Skip to main content

Setup a workspace

This article outlines ways to setup your front-end project from scratch. You can also follow only some of these steps to implement specific technologies in existing projects.

Prerequisites​

To start work on a new front-end project, make sure you have the following software installed locally:

Install node (nvm)​

Create a new workspace​

Instead of creating just one single Angular application, it is recommended to setup your codebase as a workspace. This has several benefits:

  • Easier to manage multiple applications
  • Abstract your code into reusable libraries
  • Easily build and deploy your applications
  • Easily publish your libraries as npm packages.

Below, we show two ways for creating such a workspace.

Nx is a modern build system to create and manage frontend mono-repo’s. It makes maintaining and publishing your apps and libraries easier with built-in plugins (i.e. linting, code formatting, testing etc.).

There are two flavors of Nx projects:

  1. An integrated setup that does many things out of the box;
  2. A package based setup that gives you more fine-grained access to each individual package.

Create an Nx workspace​

To create an Nx workspace, run the following command to setup a package based repository:

npx create-nx-workspace@latest package-based --preset=npm

Choose a short, concise name. If you don’t use an npm namespace, this name will be used internally to reference parts of your setup, for example: import {MyClass} from '@workspace-name/library-name.

If used in a Docker setup with other containers, this would best be called frontend or similar, to live nicely alongside other types of services in their own respective folders.

tip

Working with an Nx workspace is much easier with IDE integrations, for example the Nx Console VSCode extension.

After installation, cd into your newly created folder, or remove the wrapper folder.

Create an Angular application​

If it's the first Angular app, install the Angular plugin:

npm install --save-dev @nrwl/angular

To create an Angular application, run the following command:

nx g @nrwl/angular:application my-app

Create an Angular library​

To create an Angular library that can be reused within the project, run the following command:

nx g @nrwl/angular:application my-library

Create other packages​

Nx provides many packages to create and manage other types of apps and libraries. For example, you can create a generic typescript library:

nx g @nrwl/workspace:library my-library

Option 2: Using Angular workspaces​

If you don’t want to use Nx, you can use the Angular cli to create a workspace to be able to work with several projects in one single codebase.

Install the Angular CLI (if you haven’t already):

npm install -g @angular/cli

Create an Angular workspace​

Next, create a new Angular workspace project:

ng new my-workspace --create-application false

This command will setup your empty workspace.

Create an Angular application​

Next, you will need to create your first actual app. Make sure to cd into your project workspace, and then run the following command:

ng generate application my-first-app

Create an Angular library​

To create an Angular library that can be reused within the project, run the following command:

ng generate library my-lib

Enforcing coding standards​

Your frontend project must use ESLint, Prettier and Stylelint to enforce consistent code styling. You can read more about how to setup these tools using the XIP configurations in this guide: Enforce coding standards.

Browser plugins​

  • Angular DevTools - Angular DevTools extends Chrome DevTools adding Angular specific debugging.
  • Redux DevTools - Redux DevTools for debugging application's state changes.