NX repository folder layout

A quick overview of the default suggested directory structure of NX repository.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Building Angular applications with NX course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Building Angular applications with NX, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Building Angular applications with NX
  • [00:00 - 00:12] In this lesson we are going to explore the default and recommended for the layout in an X. Let jumps try it into example application that we generated in previous lesson.

    [00:13 - 00:57] If we list all files in this directory you will notice apps directory. So ls -l and as you can see we have apps. If you check what is inside apps so ls -l apps you will find that we have two apps. We have our example application which is our angular application and we have example e to e and to end tests for our example application. This apps directory is not standard for angular cli applications. It's a part of recommended nx folder structure. So let's jump to the slides and check how this layout looks like.

    [00:58 - 01:19] So the easiest part of this structure is apps directory. All your apps will live in that directory. So no matter if you have a front-end application, back-end application and to end application it will be inside apps directory. It's a very simple concept and it's straightforward to understand.

    [01:20 - 02:39] The next part of that structure is lips directory. We haven't done lips because we don't have any library but all your libraries so the smaller parts of applications will live inside this lips directory. So for example if you have a login form package that contains login form module it will be in lips/login form and pretty the same with buttons. So all these lips are reusable and apps depend on the lips. What's more some libraries will depend on other libraries. Libraries can be published so if you consider library as npm package that you can publish to npm as long as it is a library it will be in lips directory. The main reason why you want to have libraries is that it's easier to develop and maintain application. Problems you need to solve will be naturally separated as well so it's easier to focus on what you want to do at the moment. The last directory is called tools. If you work as a programmer already you probably know that all companies have its own tools. Sometimes we create a small script to do some work for us.

    [02:40 - 03:35] Sometimes it's more complicated but we have some tools that are internal and Nx provides you a place for that code. So every time when you need to do something custom that it 's not a part of application that it's not a library you can place that code in the tools. As you can see Nx is trying to show you where you should place the code to have everything in right order. Of course you don't need to use this layout it is recommended but if you want to have your own code organization that suits you you can do this with Nx without any problem. The last thing we are going to check during this lesson are configuration files generated by Nx. So let's go back to our console view and I'm going to list all the files. So ls minos la. As you can see we have a bunch of them.

    [03:36 - 04:04] So let's start with the most obvious one package JSON. You probably know what package JSON file is but if you are not familiar it's the main project file in Node.js applications. The next interesting file is TSConfig.Base.json. It is the TypeScript root configuration file and what is important all other TypeScript configuration files will expand this one.

    [04:05 - 05:16] Nx.json or Worspace.json are configuration files for Nx Bonerapel. It will be modified automatically by Nx if needed. EditorConfig file is a configuration for editor config plugin in your IDE. Similar situation for preterrc and aslintrc.json these files are for pre ter and aslint. We have additional justconfig.ts and just presset.js files for just testrunner and what is important about these files these are root files. All other configuration files will extend these files. So for example if we check what is inside apps example and we're going to list again all the files so ls minos la apps example you will find that inside our angular application we have separate set of configuration files and all these files extend the root ones. So you have one place to configure all your favorite aslint rules and so on.