Tal Gershman
May 13 · 4 min read

All your project configuration in a single article

Starting a new project can be confusing as you need a lot of different setups, so I decided to gather all the configuration that you will need in one simple 6 steps guide.

HTML Boilerplate

In this article I will demostratie all the necessary setup that you will need when creating a new Angular project :

  1. Setting the project as a workspace, great for code sharing and common settings accross multiple applications.
  2. Using a custom Angular library in our Angular project.
  3. Some custom configuration for Karma & Jasmine unit testing.
  4. Setting a pre-commit hook to lint our stages files with ESLint + prettier.
  5. Setting alias path with Typescript.
  6. Setting up multiple environments for : local, staging, production + Injecting process.env variables into our project.

1. Workspace :

A workspace is very convenient way to manage multiple applications, one of benefits is having one package.json for managing your projects dependencies.

Create an empty workspace:

ng new my-workspace --create-application false

Create an empty application in the workspace.

cd my-workspace
ng g application my-app --prefix ma --style scss --routing

This will create a new application with SCSS styling and routing.

// angular.json
{
//...
"my-app": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss",
"changeDetection": "OnPush"
}
},
}
}

The above will change the default change detection to “onPush” inyour application.

2. Library :

Library makes it easy to place all the common code for your applications, such as : services, components, directives, pipes … etc.

I prefer using a library than a core module because you can publish it and make it available for other developers in your company, which often have the same core usage as you.

This article is nice guide for creating one : https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11.

If you are not inserted on publishing your library to npm, you can use the following to consume it:

//package.json
....
"optionalDependencies": {
"my-app": "file:dist/my-app"
}

I also recommend adding a watch script for the library so it will rebuild on every code change, run following npm script in a separate terminal tab.

///package.json
...
"build": "ng build my-lib --watch",

3. Unit Testing :

Angular comes out of the box with unit testing configuration but you can add some settings to make your life a bit easier.

Add the following script :

//package.json
...
scripts: {
"unit-test:my-app:code-coverage": "ng test --project=my-app --code-coverage --reporters=spec",
"unit-test:my-app": "ng test --project=my-app --reporters=spec,kjhtml"
}

Using flag “code-coverage” generates a index.html that shows you a breakdown of all your coverage per component / service.

This is my config file:

You will need to install all the plugins. (JUnit is for CI pipeline)

Also this will open chrome in a full screen with dev tools opened.

4. Pre-Commits :

We will make a pre commit hook that will run ESLint + Prettier on every commit.

Install ESlint:

npm install --save -dev eslint

Config file: (you will need to install all the extends if you use this)

Install husky:npm install --save -dev husky
npm install --save -dev lint-staged

Add the following scripts and config :

/package.json
...
"scripts": {
"lint:my-app": "ng lint --fix --project=my-app",
"lint:my-lib": "ng lint --fix --project=my-lib",
...
}
...
"husky": {
"hooks": {
"pre-commit": "lint-staged --relative"
}
},
"lint-staged": {
"*.{js,ts}": [
"eslint --fix"
],
"*.{html,scss}": [
"prettier --write"
]
},

Prettier config:

5. Path Alias :

Defining path alias make it easy to move files around in your project, also the import path looks a lot nicer.

//tsconfig.json
...
"paths": {
"@environments/*": ["projects/my-app/src/environments/*"],
"@pages/*": ["projects/my-app/src/app/pages/*"],
"my-lib": ["dist/my-lib"]
}

6. Multiple Environments:

Setting up multiple environments such as : production, staging and local. Also, I will show how you can support process env variables such as CI build number to be available in your project.

Create the following files under my-app/environments:

Create a script under root directory:

Change Angular.json:

//angular.json"projects": {
"my-lib": {
 ...
},
"my-app": {
 ...
"architect": {
"build": {
 ...
"configurations": {
"staging": {
"fileReplacements": [
{
"replace": "projects/my-app/src/environments/environment.ts",
"with": "projects/my-app/src/environments/environment.staging.ts"
}
],
 ...
},
"production": {
"fileReplacements": [
{
"replace": "projects/my-app/src/environments/environment.ts",
"with": "projects/my-app/src/environments/environment.production.ts"
}
],
 ....
}
 ...
}

Finally add to your package.json:

//package.json
...
scripts: {
...
"build-dynamic-env": "ts-node -O '{\"module\": \"commonjs\"}' ./generate-dynamic-env.ts",
"build:production": "npm run build-dynamic-env && ng build --project=my-app --configuration=production",
"build:staging": "npm run build-dynamic-env && ng build --project=my-app --configuration=staging",
}

Thank for reading! If you got any question let me know in the comments.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Tal Gershman

Written by

Senior Frontend developer at Mobileye, developing web apps in Angular.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store