11. Deployment

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

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

npm run build

The console displays (excerpt):

> rdvmedecins-vuejs@1.0.0 build
> vue-tsc --noEmit && vite build

vite v7.3.6 building client environment for production...
✓ 96 modules transformed.
dist/index.html                             0.90 kB │ gzip:  0.52 kB
dist/assets/index-VQExeVE4.css            231.34 kB │ gzip: 30.87 kB
dist/assets/ErrorView-B9Z8vrOJ.js           0.55 kB │ gzip:  0.40 kB
dist/assets/PersonsView-B4Jl6pHo.js         1.99 kB │ gzip:  0.98 kB
dist/assets/PatientAreaView-B6uA2FSB.js     2.20 kB │ gzip:  1.08 kB
dist/assets/RegisterView-CLY_I0Z-.js        2.62 kB │ gzip:  1.21 kB
dist/assets/PersonFormView-BLJqMaW-.js      2.67 kB │ gzip:  1.33 kB
dist/assets/MyAccountView-CcpX9Rlc.js       3.89 kB │ gzip:  1.51 kB
dist/assets/index-DX4x1EAt.js             195.94 kB │ gzip: 70.60 kB
✓ built in 2.88s

The [dist/] folder contains the entire application: a page named [index.html], a stylesheet, and optimized [JavaScript] files (the code from [Vue.js], the router, [Pinia]... and ours). The pages loaded on demand ([() => import(...)]) each have their own file. The name of each file contains a hash of its contents ([index-DX4x1EAt.js]): a new version will have a different name, and a browser will never be able to cache an outdated version.

You can verify this version using [npm run preview] (http://localhost:4173).

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

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

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

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

• 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].