11. Deployment

In development, two servers work together: the [Angular] development server (the client) and the JSON server (the API). In production, there is only one:

1. Build the client. In the [rdvmedecins-angular] folder:

npm run build

The console displays:

> rdvmedecins-angular@1.0.0 build
> ng build

✔ Building...
Initial chunk files | Names         |  Raw size | Estimated transfer size
chunk-BruCX3rK.js   | -             | 296.78 kB |                80.48 kB
styles-XPRPA6EW.css | styles        | 231.34 kB |                22.81 kB
main-3NXKYGU5.js    | main          | 126.90 kB |                31.26 kB

                    | Initial total | 655.02 kB |               134.55 kB

Lazy chunk files    | Names         |  Raw size | Estimated transfer size
chunk-B1I-NpSr.js   | my-account    |   4.57 kB |                 1.57 kB
chunk-D5fQy4dw.js   | -             |   3.58 kB |                 1.35 kB
chunk-BQacMvxR.js   | person-form   |   3.40 kB |                 1.42 kB
chunk-DQ2njJU7.js   | patient-area  |   3.37 kB |                 1.40 kB
chunk-1j2zX3Jb.js   | persons       |   3.21 kB |                 1.32 kB
chunk-Cg9nGEEi.js   | register      |   3.13 kB |                 1.27 kB
chunk-C7lHBFC2.js   | error         | 841 bytes |               841 bytes
chunk-DXwhrlsA.js   | -             | 514 bytes |               514 bytes

Application bundle generation complete. [7.124 seconds]

Output location: .../rdvmedecins-angular/dist/rdvmedecins-angular

The [dist/rdvmedecins-angular/browser/] folder contains the entire application: a [index.html] page, a stylesheet, and optimized [JavaScript] files (the code from [Angular], the router, [ngx-translate]... and ours):

• The initial files are downloaded at startup: approximately 135 KB once compressed by the server;
• each page loaded on demand ([loadComponent]) has its own file, downloaded on the first visit;
• the name of each file contains a hash of its contents ([main-3NXKYGU5.js]): a new version will have a different name, and a browser will never be able to cache an outdated version;
• the compiler has verified the budgets set in [angular.json]: a warning would indicate that an application has become too large.

2. Upload it to the server. Copy the CONTENTS of the [dist/rdvmedecins-angular/browser/] folder to a [client/] folder at the root of the JSON server ([rdvmedecins-nestjs-json/client/index.html], [rdvmedecins-nestjs-json/client/main-3NXKYGU5.js]...), then restart the server. It displays:

[Nest] LOG [RdvMedecins] Angular client served from .../rdvmedecins-nestjs-json/client
[Nest] LOG [RdvMedecins] JSON server started: http://localhost:8080/api

The complete application is now available at http://localhost:8080. The server serves the client’s files and returns [index.html] for any other URL outside of /api: reloading the /schedule page works (it is the client’s browser that displays it). For the curious reader, it is the [src/web/client-spa.ts] file on the server that performs this task.

3. In a real production environment, don’t forget the file [.env] on the server:

• a long, random [JWT_SECRET];
• an empty [CAPTCHA_TEST];
• [COOKIE_SECURE=true] if the site is served via HTTPS (it must be: passwords are being transmitted);
• [TRUST_PROXY=true] if the server is behind a proxy ([nginx]...), so that the attempt limit sees the clients’ actual IP address.

We then launch the compiled server: [npm run build], followed by [npm run start:prod].