NG: Setup local environment and workspace

NG: Setup local environment and workspace

  May 09, 2020    Vinod Kumar

---

Today we will discuss how to set up a local environment. This is pretty basic for developers who are working on angular applications but will discuss in detail setting up the workspace, projects and if possible we will discuss how to build and deploy, if not we will discuss in the next blog post.

We can set up the application using local development or a tool like stackblitz. 

So let on focus on setting up locally in our machine.

Steps:

1. Install Node (check version using: npm -v)

2. Node comes with a package manager which will be helpful to download dependent packages for our application (check version using: npm -v)

3. Install Angular CLI (command line Interface for scaffolding the application (ready-made application)).

        npm install -g @angular/cli 

4. To create a new workspace and initial app, you will be asked for prompts just accept the defaults by pressing the Enter key (More on prompts later)

        npm new <appName> 

5. Run the application, CLI includes a built-in server to serve the app locally and it supports building, testing, bundling, and deployment of the application.

    More on CLI commands(here).

        cd <appName> 

        ng serve --open

To build the application for production use command:  ng build --prod (This will produce the files which are required to deploy, host these files on any webserver)

(How to host the application using Firebase/Github - here)

Till here it was very basic and everyone might be aware of the same if you are already working on angular projects. In the later sections. we will be covering more on the new setup like the workspace, projects which are newly added in the angular versions (Versions and its features here)

Workspace: It contains the files for one or more projects. In simple terms, it is like a container for all our projects.

Project: It is a set of files for a standalone application or a shareable library.

when we ran command (npm new appName). CLI creates a root-level application named appName. The workspace root folder contains various configuration files, a ReadMe file, and an end-to-end test. The root-level application has the same name as the workspace. This is typically called a "multi-repo" development style.

Besides, angular also supports workspaces with multiple projects. This is typically called a "mono-repo" development style which is suitable for developing advanced applications mostly enterprise applications or shareable libraries. The mono-repo has a single repository for all the projects and a global shareable configuration.

By now you should be aware of workspace and projects, but still not clear on how do we create such a project. So, let's dive to know more about the configuration files, setting up a workspace with multiple projects. Please hold on your breath as we are going to learn multiple things at one shot.

Before going deep into this I just want to clear on "why mono-repo"?

• All the projects under one roof make the configuration easy. 
• One configuration file for all the projects.
• One node_modules folder all the projects in the workspace
• One build configuration in angular.json for all the projects.
• Maintaining the applications would be simpler.
• Upgrading all the projects at once.

There are many more uses on why we need mono-repo, it is not mandatory to use but good to use if you have multiple projects. Multi-repo would be good for small and POC/Demo kind of applications.

Set up a multi-project workspace: 

• You need to skip the initial application generation and provide a name for the workspace.

        ng new workspaceName --createApplication="false"

• In previous versions. we used to create a "component", "service" using ng commands, in similar lines, we need to generate "application".

        cd workspaceName

        ng generate application appName

In order to generate a library use below command

        ng generate library libName

Note: Unline applications, the library has its own package.json configuration files.

That's it we are done generating multiple projects under one workspace, let's have a look at the project structure and then we will compare multi-repo project structure with mono-repo project structure and deep dive into the angular.json file and its changes.

Mono-repo Structure:

my-workspace/

  ...             (workspace-wide config files)

  projects/       (generated applications and libraries)

    my-first-app/ --(an explicitly generated application)

      ...         --(application-specific config)

      e2e/        ----(corresponding e2e tests)

         src/     ----(e2e tests source)

         ...      ----(e2e-specific config)

      src/        --(source and support files for application)

    my-lib/       --(a generated library)

      ...         --(library-specific config)

      src/        --source and support files for library)

Multi-repo Structure:

Below is the structure of our application combining multi-repo and mono-repo in one diagram. 

Project Structure Multi-repo and Mono-repo

Let's learn about the workspace configuration with respect to mono-repo development style applications. (here)