This lesson will describe the NX mono repository's default and recommended folder layout (structure).

When you access the project, we generated in the previous lesson,
you should recognize three main directories: apps, libs, and tools.

I know I'm repeating myself, but it's crucial to remember.
NX was designed to handle multiple applications in the same repository.
The apps directory will contain all your apps, whether front-end or back-end.

Each app will have its own directory inside the 

---
title: NX repository folder layout
description: A quick overview of the default suggested directory structure of NX repository.
privateVideoUrl: https://stream.mux.com/YYymMcm01gaIOZktUHF9KQGor02zfSUieqA5LKwB9BkeI.m3u8
---

This lesson will describe the NX mono repository's default and recommended folder layout (structure).

## Layout

When you access the project, we generated in the previous lesson,
you should recognize three main directories: apps, libs, and tools.

![Layout](https://d2uusema5elisf.cloudfront.net/courses/building-angular-applications-with-nx/module_02/lesson_02.03/public/images/02-03-01.png)

## Apps

I know I'm repeating myself, but it's crucial to remember.
NX was designed to handle multiple applications in the same repository.
The apps directory will contain all your apps, whether front-end or back-end.

Each app will have its own directory inside the `apps`.

## Libs

In the real world, we often split applications into libraries.
There are a few reasons to do this, but the two most important for this course are:

-   It's easier to develop and maintain applications when they are separated. 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.
-   You can create common component libraries shared by all your apps. In this way, you will keep your apps consistent
    because if, for example, you change the color of your buttons,
    the change will automatically appear in every application in the mono repository.

galczo5

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

NX repository folder layout

In this lesson we are going to explore the default and recommended for the

Let jumps try it into example application that we generated in previous lesson.

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

that we have two apps. We have our example application which is our angular

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

nx folder structure. So let's jump to the slides and check how this layout

So the easiest part of this structure is apps directory. All your apps will

So no matter if you have a front-end application, back-end application and to

it will be inside apps directory. It's a very simple concept and it's

The next part of that structure is lips directory. We haven't done lips because

library but all your libraries so the smaller parts of applications will live

lips directory. So for example if you have a login form package that contains

it will be in lips/login form and pretty the same with buttons. So all these

and apps depend on the lips. What's more some libraries will depend on other

can be published so if you consider library as npm package that you can publish

as long as it is a library it will be in lips directory. The main reason why

libraries is that it's easier to develop and maintain application. Problems you

will be naturally separated as well so it's easier to focus on what you want to

The last directory is called tools. If you work as a programmer already you

all companies have its own tools. Sometimes we create a small script to do some

Sometimes it's more complicated but we have some tools that are internal and Nx

place for that code. So every time when you need to do something custom that it

application that it's not a library you can place that code in the tools. As

to show you where you should place the code to have everything in right order.

need to use this layout it is recommended but if you want to have your own code

that suits you you can do this with Nx without any problem. The last thing we

during this lesson are configuration files generated by Nx. So let's go back to

and I'm going to list all the files. So ls minos la. As you can see we have a

So let's start with the most obvious one package JSON. You probably know what

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

and what is important all other TypeScript configuration files will expand this

Nx.json or Worspace.json are configuration files for Nx Bonerapel. It will be

automatically by Nx if needed. EditorConfig file is a configuration for editor

IDE. Similar situation for preterrc and aslintrc.json these files are for pre

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

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

our angular application we have separate set of configuration files and all

the root ones. So you have one place to configure all your favorite aslint

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript