11. Deployment
In development, two servers work together: the [Vite] development server (the client) and the JSON server (the API). In production, there is only one:
1. Build the client. In the [rdvmedecins-react] folder:
The console displays:
First, [tsc --noEmit] checks the types for the entire project: [Vite] does not do this; it simply removes the syntax from [TypeScript]. A type error stops the build. Then [Vite] builds the entire application in the [dist/] folder: a [index.html] page, style sheets, and optimized [JavaScript] files:
- [libraries-....js]: the library code ([React], [React Router], [TanStack Query], [i18next]...), stored in a separate file by the configuration of [vite.config.ts]. It rarely changes: from one version of the application to the next, the browser keeps it in the cache. [libraries-....css]: the stylesheet for [Bootstrap];
- [index-....js]: OUR code, used for pages loaded immediately (login, calendar) and the rest of the application;
- Each page loaded on demand ([lazy], see [routes.tsx]) has its own file ([MyAccount-....js]...), downloaded on the first visit; [PersonFields-....js] and [persons.config-....js] contain code common to several of these pages;
- Upon startup, the browser downloads approximately 170 KB once compressed by the server (gzip column), of which 150 KB is for libraries;
- Each file’s name contains a hash of its contents ([index-D-CLbbe-.js]): a new version will have a different name, and a browser will never be able to cache an outdated version. Only [index.html] retains its name: it is this file that references the others.
You can try the version built with [npm run preview] (http://localhost:4173, using the same proxy to the JSON server).
2. Upload it to the server. Copy the CONTENTS of the [dist/] folder into a [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:
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].