Skip to content

2. Chapter 1 - Setting Up the Work Environment

2.1. Install the tools

  1. Node.js: Download and install version 22 (or later) from nodejs.org. Verify the installation in a terminal: 
    1
2
    node --version
npm --version
  1. Visual Studio Code (VSCode): available for free download at code.visualstudio.com. Install the “TypeScript and JavaScript Language Features” extension (usually already included).
  2. [NestJS] CLI, installed once and for all (on the client side; [Vite] does not require any global installation—see introduction). In a VSCode terminal: 
    8
    npm install -g @nestjs/cli
  1. [MySQL] 8: Install, for example, via XAMPP, Laragon (on Windows), or directly via [MySQL] Community Server. A graphical administration tool (phpMyAdmin, [MySQL] Workbench, DBeaver, HeidiSQL…) simplifies the process. Subsequently, the Laragon tool is used.
  2. Postman: available for free download at postman.com.

If you have downloaded the code, it is located in two folders:

Image

  • in [1], the client is [Vue.js];
  • in [2], the server [NestJS];

Open the [2] folder with Visual Studio [File / Open Folder]:

Image

2.2. Create the database

To create the [MySQL] database used by the [NestJS] server, we will use the Laragon tool. As of September 2026, Laragon is available at URL [Download Laragon – Fast & Modern Dev Environment ]. Laragon includes tools that allow you to install a PHP server and the SGBD and [MySQL] servers:

Image

  • in [1], an Apache web server;
  • into [2], the SGBD and [MySQL];
  • to [3], a messaging tool that we will not be using;
  • [4] starts all services (Apache, [MySQL], MailPit);
  • [5] displays the web page for URL and [http://localhost]. By default, this URL refers to the <laragon-install>\www folder, where <laragon-install> is the Laragon installation folder;
  • in [6], launches the HeidiSQL tool, which allows you to manage MySQL databases. We will use this tool to create the database used by the tax calculation server;
  • In [7], open a terminal; all the binaries needed for Laragon are located in PATH;
  • In [8], open a Windows Explorer window in the folder associated with URL and [http://localhost];

The Laragon installation folder contains the following items:

 
  • In [1], the [bin] folder contains numerous applications:
  • In [1], the Apache web server;
  • in [2], a command-line terminal;
  • in [3], a [git] client that allows you to manage different versions of a project;
  • in [4], a database manager;
  • in [5], a mail manager;
  • in [6], the SGBD and [MySQL];
  • [7], another web server;
  • in [8] and [node.js] to run JavaScript scripts;
  • in [9], a text editor;
  • in [10], the PHP interpreter;
  • [11], the [Python] interpreter;
  • [12], a cache server;

Laragon comes with a comprehensive development environment. In this course, we will use only SGBD, [MySQL], [6], and the [heidisql] tool to manage it graphically;

To create the [MySQL] database required by the [NestJS] server, proceed as follows:

 
  • In [1], all services must be started;
  • In [2], the [Database] option allows you to manage the database;

The option [Database] launches a utility called HeidiSQL:

  • In [1], you can select various SGBD options. The default value provided is SGBD MySQL. This is acceptable;
  • in [2], you log in to HeidiSQL;
  • In [1-2], run the SQL file, then select the [dbrdvmedecins.sql] file, which you’ll find in the [nestjs-etude-de-cas] folder:

Image

Running the [3] file will create the [dbrdvmedecins] database used by the [NestJS] server. To view it, run F5 within HeidiSQL to refresh the display:

Image

The database [dbrdvmedecins] has been created. You can view its contents:

Image

  • In [1-3], the table [clients];
    • [id] is the primary key of the table;
    • [version] is the row’s version number. This number increments each time the row is modified;
    • [titre, nom, prenom] identifies the person;

Image

  • in [1-3], the table [medecins];
    • [id] is the primary key of the table;
    • [version] is the version number of the row;
    • [titre, nom, prenom] identifies the person;

Image

  • In [1-3], the table of doctors’ appointment time slots:
    • [id]: primary key;
    • [version]: row version number;
    • [id-medecin]: foreign key referencing the doctor’s primary key;
    • [hdebut, mdebut]: hour and minutes of the appointment start time. Thus, [8,20] means 8:20 a.m.
    • [hfin, mfin]: hour and minutes of the end of the consultation.

Image

  • In [1-3], the [rv] table of scheduled appointments;
    • [id]: primary key;
    • [version]: version number;
    • [jour]: appointment date;
    • [id_creneau]: foreign key referencing the primary key of the appointment time slot. Since a time slot is linked to a doctor, we know which doctor is handling this appointment;
    • [id_client]: foreign key to the number (primary key) of the patient attending the appointment;

Image

  • in [1-3], the table [users], which lists the users authorized to use the application [NestJS];
    • [id, version]: primary key, version number;
    • [login, password]: user credentials;
    • [nom]: user name;
    • [role]: the user’s role. [ADMIN] has full access. [USER] has read-only access. This user can view a doctor’s schedule but cannot schedule or cancel an appointment;

2.3. Start the [NestJS] server for the first time

In the [rdvmedecins-nestjs-server] folder, type the following commands in a terminal:

1
2
npm install
cp .env.example .env

The [.env] file sets environment variables:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# -----------------------------------------------------------------------
# Sample configuration file.
# Copy this file to [.env], then adjust the values for your machine.
# The [.env] file must never be shared or committed (passwords).
# -----------------------------------------------------------------------

# listening port for the NestJS server (the original Spring server listened on port 8080)
PORT=8080

# Database connection parameters for MySQL and [dbrdvmedecins]
DB_HOST=localhost
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=
DB_DATABASE=dbrdvmedecins

# for development only: TypeORM can automatically create/update
# tables from entities. We disable this here because we provide our
# own script SQL [database/dbrdvmedecins.sql], just as the original Spring project did.
DB_SYNCHRONIZE=false

# -----------------------------------------------------------------------
# authentication (see src/auth/)
# -----------------------------------------------------------------------
# secret key used to sign/verify tokens JWT - to be changed
# must be changed in production (a long random string, never committed).
JWT_SECRET=change-moi-en-une-longue-chaine-aleatoire
# validity period of a JWT token (see the [ms] library documentation:
# "60", "2h", "7d"...)
JWT_EXPIRES_IN=2h

Customize the newly created file [.env] to match your [MySQL] installation (username, password, port). Since authentication was added (see Chapter 3), this file also contains a key named JWT_SECRET: the example value is suitable for following along with this document, but must be replaced with a unique random string of your own before any actual use.

Start all Laragon services [Start All], if you haven’t already done so.

Then start the server:

1
npm run start:dev

The console displays, in order: the startup of the [NestJS] module, the list of routes exposed by the controller, and then confirmation of startup:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
[Nest] RoutesResolver AuthController {/}:
[Nest] RouterExplorer Mapped {/login, POST} route
[Nest] RoutesResolver RdvMedecinsController {/}:
[Nest] RouterExplorer Mapped {/getAllMedecins, GET} route
[Nest] RouterExplorer Mapped {/getAllClients, GET} route
[Nest] RouterExplorer Mapped {/getAllCreneaux/:idMedecin, GET} route
[Nest] RouterExplorer Mapped {/getRvMedecinJour/:idMedecin/:jour, GET} route
[Nest] RouterExplorer Mapped {/getAgendaMedecinJour/:idMedecin/:jour, GET} route
[Nest] RouterExplorer Mapped {/getMedecinById/:id, GET} route
[Nest] RouterExplorer Mapped {/getClientById/:id, GET} route
[Nest] RouterExplorer Mapped {/getCreneauById/:id, GET} route
[Nest] RouterExplorer Mapped {/getRvById/:id, GET} route
[Nest] RouterExplorer Mapped {/ajouterRv, POST} route
[Nest] RouterExplorer Mapped {/supprimerRv, POST} route
[Nest] NestApplication Nest application successfully started
[RdvMedecins] serveur NestJS démarré sur http://localhost:8080

This console output confirms that the server is indeed listening on port 8080—exactly the same port as the Spring Boot server in the original document, which was deliberately chosen for this reason.

2.4. Testing the Server with a Browser

Since authentication was added (Chapter 3), all routes in [RdvMedecinsController] require a valid JWT token: a browser alone can therefore no longer be used to test them directly. For example:

1
http://localhost:[8080/getAllMedecins]

now returns a 401 Unauthorized error without a token:

Image

This is the expected behavior: this response confirms that the server is properly protecting its routes. Postman (next section) is required to obtain a token and then use it.

2.5. Testing the [NestJS] server with Postman

The Postman tool is available at URL [https://www.postman.com/downloads/]. You may need to create an account.

Start all Laragon services, then open the Postman desktop application:

  • In [1-2], create a request HTTP to query the doctors’ appointment management server;

2.5.1. Log in and obtain a token

  1. Create a new Postman request with the method POST, URLhttp://localhost:8080/login;
  2. In the [Body] tab, select "raw," then the JSON format, and enter: {"login": "admin", "password": "admin"} (or "user/user" to test the USER role);
  3. Submit the request.

Image

  • in [1-2], the request POST to the server [NestJS] running on port 8080;
  • to [3-5], the body of the request. This transmits to the server the string JSON containing the credentials of the user attempting to log in, in this case admin/admin;
  • in [6], the server’s response;
  • in [7], the authentication token that subsequent requests must send to the server to indicate “I have already authenticated”;

Copy the value from accessToken: this is the token you must now include in every subsequent request. In the example above, the token to copy is “eyJ...zoM” (without the quotes).

2.5.2. Calling a protected route with the token

For GET /getAllMedecins (or any other route starting with RdvMedecinsController), in Postman, on the Authorization tab, select the Bearer Token type and paste the token copied above (Postman will then automatically add the Authorization: Bearer <token> header).

Image

  • in [1-2], the request sent to the server. It requests the list of doctors in the database;
  • In [3-5], the request must send the authentication token. In [4], select [Bearer Token], and in [5], paste the authentication token you copied earlier;
  • in [7], the server’s response;

2.5.3. Test the POST routes (/ajouterRv, /supprimerRv)

Follow the same procedure as above (method POST, body JSON, Bearer Token), exactly as the original document used the Chrome extension “Advanced Rest [Client]” for the same routes.

Note: You can find the following Postman requests in the [rdvmedecins-nestJS.postman_collection.json] collection:

Image

In Postman, press Ctrl-0 to load the collection:

Image

  • Click on [1] to load the collection and select the collection file. Once the collection is loaded, it displays its requests:

Image

To test /ajouterRv with the token from an account ADMIN:

  1. Postman request, method POST, URLhttp://localhost:8080/ajouterRv;
  2. Authorization tab: Bearer Token, admin token;
  3. [Body] tab, raw, JSON: {"day": "2026-09-13", "idClient": 1, "idCreneau": 5};
  4. Send the request.

Image

You can use HeidiSQL to verify that an appointment has been added to the database:

Image

To test /supprimerRv, follow the same procedure with the body {"idRv": 2} (the ID of the appointment to be canceled (8) above).

Image

  • in [4], where the number above is the appointment to be deleted;

Image

  • to [5-7], the authentication token;
  • to [9], the server’s response. [status=0] indicates that the operation was successful. You can verify this with HeidiSQL:

Image

  • in [3], appointment #2 no longer exists;

Try this: repeat the same request /ajouterRv using the token for the USER account (user/user) instead of the admin token: the response becomes 403 Forbidden, with the message “The role [USER] does not allow this action (required role: ADMIN)”—a concrete demonstration of the role-based access control implemented in Chapter 3.

2.6. Launch the [Vue.js] client for the first time

In the rdvmedecins-vue-client folder (the [NestJS] server must be started beforehand):

1
2
npm install
npm start

Then open http://localhost:4200 in a browser: the login screen appears first (see Chapter 5).

Image

  • in [1], the URL server that delivers the [Vue.js] application;
  • [2], the URL of the server [NestJS] that manages the database [rdvmedecins];

It is important to understand that there are two web servers here, one of which acts as a client to the other.

Two buttons labeled “FR” and “EN” in the upper-right corner allow you to switch the interface to English, even before logging in. Log in with one of the two demo accounts (admin/admin, full access, or user/user, read-only) to access the rest of the application. Chapter 5 provides a detailed guide to using this client, with screenshots for each step.

https://stahe.github.io
This tutorial, written by Anthropic's AI Claude and reviewed by Serge Tahé, is made available to the public under the terms of the Creative Commons Attribution – No Commercial Use – ShareAlike 3.0 Unported License.