⚛️ Local HTTPS for React app in Nx workspace
Tags: monorepo, nx, react, security
Published: 2020-10-08 14:54:23

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 React app in Nx workspace.

If you don't have generated your certificate with [mkcert](https://mkcert.dev), I recommand you read the first post of this series. → [link](https://dev.to/nightbr/full-https-ssl-development-environment-4dam)

## What is Nx?

![nx](https://dev-to-uploads.s3.amazonaws.com/i/droj114ob53e52l2yiqt.png)

**[Nx](https://nx.dev/)** 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

```bash
$ 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 Reactjs schematics:

```bash
npm install -D @nrwl/react
```

Now, we will generate a new Reactjs application called `react-app` (change the name with your app name).

```bash
nx generate @nrwl/react:application --name=react-app
```

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

Start serving your app with `nx serve react-app` 🎉

![http](https://dev-to-uploads.s3.amazonaws.com/i/tfo25c1lv1sni5vzffo6.png)

🗒️ Look at the Reactjs Nx plugin documentation to see more options → [here](https://nx.dev/latest/angular/plugins/react/overview)

## 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`, search for your app name (here `react-app`). Under this, look for the `serve` object and `options`. We will add the ssl configuration under `"browserTarget": "react-app:build",`.

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

```json
...
	"serve": {
          "builder": "@nrwl/web:dev-server",
          "options": {
            "buildTarget": "react-app:build",
            "host": "dev.local",
            "ssl": true,
            "sslKey": "./dev-stack/certs/local-key.pem",
            "sslCert": "./dev-stack/certs/local-cert.pem"
          },
          "configurations": {
            "production": {
              "buildTarget": "react-app:build:production"
            }
          }
        },
...
```

Now save and serve the app:

```bash
$ nx serve react-app

> nx run react-app:serve 
**
Web Development Server is listening at https://dev.local:4200/
**
Starting type checking service...
Using 14 workers with 2048MB memory limit
ℹ ｢wds｣: Project is running at https://dev.local:4200/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
No type errors found
Version: typescript 4.0.3
Time: 4026ms
Hash: cc02edd4220bb47802d9
Built at: 2020-10-08 16:49:42
Entrypoint main [big] = runtime.js runtime.js.map vendor.js vendor.js.map main.js main.js.map
Entrypoint polyfills [big] = runtime.js runtime.js.map polyfills.js polyfills.js.map
chunk {main} main.js, main.js.map (main) 359 KiB ={runtime}= ={vendor}= [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 569 KiB ={runtime}= [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 0 bytes ={main}= ={polyfills}= ={vendor}= [entry] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 1.09 MiB ={main}= ={runtime}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
ℹ ｢wdm｣: Compiled successfully.

```

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

![https](https://dev-to-uploads.s3.amazonaws.com/i/ffot8s7ibszv60p5evlt.png)

![certificate](https://dev-to-uploads.s3.amazonaws.com/i/nyt6mnd878uxr96x8l6s.png)

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

 {% github Nightbr/full-https-development-environment %}