Hey, welcome back in this post series where we will see how to setup a full HTTPS development environment.

In this post, we will setup local HTTPS for Angular app in Nx workspace (or angular cli).

If you don't have generated your certificate with mkcert, I recommand you read the first post of this series. → link

What is Nx?

Nx is a set of extensible dev tools for monorepos, which helps you manage your projects at any scale. It provides great integration with major framework such as Angular, React, Nestframework, Express, ionic, ...

💡 Nx use the angular-cli under the hood!

Setting up the project workspace

Creating a new empty workspace

$ npx create-nx-workspace
npx : 179 installé(s) en 7.547s
? Workspace name (e.g., org name)     myorg
? What to create in the new workspace empty             [an empty workspace with a layout tha
t works best for building apps]
? CLI to power the Nx workspace       Nx           [Recommended for all applications (React, 
Node, etc..)]
...

🗒️ If you already have an Nx workspace, you can skip these steps.

Then, we will install the Angular schematics:

npm install -D @nrwl/angular

Now, we will generate a new Angular application called myapp (change the name with your app name).

nx generate @nrwl/angular:application --name=myapp

Choose your settings such as stylesheet format, routing, ...

Start serving your app with nx serve myapp 🎉

🗒️ Look at the Angular Nx plugin documentation to see more options → here

Setting up HTTPS

From the first post of this series, I will assume that you have generated your certificate at location myorg/dev-stack/certs/local-cert.pem & myorg/dev-stack/certs/local-key.pem. Don't hesitate to go back to the first post to use mkcert and generate your certificate.

In the workspace.json (or angular.json with angular-cli), search for your project name (here myapp). Under this, look for the serve object and options. We will add the ssl configuration under "browserTarget": "myapp:build",.

The serve object in the workspace.json should look like this:

...
    "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build",
            "host": "dev.local",
            "ssl": true,
            "sslKey": "./dev-stack/certs/local-key.pem",
            "sslCert": "./dev-stack/certs/local-cert.pem"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
...

Now save and serve the app:

$ nx serve myapp

> nx run myapp:serve 

chunk {main} main.js, main.js.map (main) 24.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 13.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.64 MB [initial] [rendered]
Date: 2020-10-08T13:44:58.948Z - Hash: 546469cedb2db4de6e20 - Time: 3675ms
** Angular Live Development Server is listening on dev.local:4200, open your browser on https://dev.local:4200/ **
: Compiled successfully.

You can open https://dev.local:4200 which is secured with a valid certificate 🔐🎉

Feel free to change any configuration on the options, but don't forget to regenerate a new certificate with mkcert of you change the domain name ⚠️

See you in the next post!

Github repository