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:
    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).
  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.

2.1.1. Installing the Flutter client

Launch VSCode without selecting a project:

Image

  • In [1-2], open the command palette;

Image

  • In [3], create a new Flutter project;

Image

  • in [4], create an empty app;

Image

  • In [5-6], specify a folder in which the project subfolder will be created;

Image

  • In [6], enter a name for the project. This will also be the name of the folder created for the project;

Image

  • In [1-3], specify the project targets for [1 – Android application, 2 – desktop application, 3 – web application];

Image

  • to [4], the created project. VSCode automatically downloads the Flutter SDK;

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

Image

Image

  • in [1], the client [Flutter];
  • in [2], the [NestJS] server;
  • in [3], the contents of [2]. Copy all of this content into your Flutter project folder. New elements will appear in your project:

Image

The command [flutter doctor] verifies that everything [Flutter] needs is in place, target by target. Run this in a terminal within the Flutter project:

flutter doctor

When everything is correct, you’ll get a result like this (version numbers may vary):

PS C:\Data\st-2026\dev\flutter-nestjs-sept-2026\flutter_application_1> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.9, on Microsoft Windows [version 10.0.26200.9457], locale fr-FR)
[√] Windows Version (Windows 11 or higher, 25H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 37.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2026 18.9.0)
[√] Connected device (3 available)
[√] Network resources

• No issues found!

Each line begins with a symbol: [√] (everything is fine), [!] (warning: an element is missing, which doesn’t necessarily prevent the code from working), or [X] (error). For this course, the relevant lines are [Flutter], [Android toolchain] (compilation for an [Android] phone) and [Connected device] (at least one device detected, specifically the phone). The lines [Chrome] (web target) and [Visual Studio] (Windows target) apply only to those targets: A [!] or [X] on a target you are not using can be ignored.

If [Android toolchain] reports “cmdline-tools component is missing,” install [Android SDK Command-line Tools] (see below); if it reports “Android license status unknown,” accept the licenses (step 5). The [flutter doctor -v] command provides details on each check.

PS C:\Data\st-2026\dev\flutter-nestjs-sept-2026\flutter_application_1> flutter doctor -v
[√] Flutter (Channel stable, 3.44.9, on Microsoft Windows [version 10.0.26200.9457], locale fr-FR) [305ms]
    • Flutter version 3.44.9 on channel stable at C:\Users\serge\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6b182d2c75 (7 weeks ago), 2026-08-05 10:04:07 -0700
    • Engine revision 5a2a6a42cc
    • Dart version 3.12.2
    • DevTools version 2.57.0
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop,
      enable-android, enable-ios, cli-animations, enable-native-assets, enable-swift-package-manager,
      omit-legacy-version-file, enable-lldb-debugging, enable-uiscene-migration

[√] Windows Version (Windows 11 or higher, 25H2, 2009) [895ms]

[√] Android toolchain - develop for Android devices (Android SDK version 37.0.0) [1 793ms]
    • Android SDK at C:\Users\serge\AppData\Local\Android\sdk
    • Emulator version 37.1.11.0 (build_id 15917651) (CL:N/A)
    • Platform android-37.0, build-tools 37.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 25.0.3+-15898627-b508.16)
    • All Android licenses accepted.

[√] Chrome - develop for the web [114ms]
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2026 18.9.0) [113ms]
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\18\BuildTools
    • Visual Studio Build Tools 2026 version 18.9.12105.275
    • Windows 10 SDK version 10.0.26100.0

[√] Connected device (3 available) [216ms]
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [version 10.0.26200.9457]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 151.0.7922.174
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 153.0.4234.48

[√] Network resources [274ms]
    • All expected network resources are available.

• No issues found!

You can now launch the Flutter app even if the web service it needs to communicate with has not been launched. First, list the apps (devices) recognized by Flutter:

1
2
3
4
5
6
7
PS C:\Data\st-2026\dev\flutter-nestjs-sept-2026\rdvmedecins_flutter_client> flutter devices                 
Found 4 connected devices:
sdk gphone16k x86 64 (mobile) • emulator-5554 • android-x64    • Android 17 (API 37) (emulator)
Windows (desktop)             • windows       • windows-x64    • Microsoft Windows [version
10.0.26200.9457]
Chrome (web)                  • chrome        • web-javascript • Google Chrome 153.0.8010.48
Edge (web)                    • edge          • web-javascript • Microsoft Edge 153.0.4234.48

In column 2, you’ll find the IDs of the recognized devices. To launch the Flutter app on one of them:

flutter run -d <device_id>

For example, to launch the app in the Chrome browser with the identifier (chrome):

flutter run -d chrome

This produces the following result (or a server connection error):

Image

You may not have installed the Android SDK required by Flutter. We’ll now describe how to install it.

2.1.2. Android Studio and Android Command-Line Tools

The mobile target for this course is a [Android] phone. To compile the app and install it on this phone, [Flutter] requires the [Android] SDK, which is installed along with [Android Studio], Google’s development environment. [Android Studio] is not used for writing code—the editor remains [VSCode]—it is used here only to install and update the [Android] SDK.

  1. [Android Studio]: Download it for free from [https://developer.android.com/studio] and then install it. When you launch it for the first time, the wizard will offer a standard installation: accept it, and it will download the [Android] SDK.

Image

  1. Open [SDK Manager] from [Android Studio] (the [Tools / SDK Manager] menu when a project is open, or [More Actions / SDK Manager] from the home screen): This is the tool that installs and updates the components of the [Android] SDK.
  2. [SDK Platforms] tab: Verify that a recent [Android] platform is installed (the [Flutter] documentation specifies version 36 at the time of writing).

Image

  1. [SDK Tools] tab: Check [Android SDK Command-line Tools (latest)], [Android SDK Build-Tools], and [Android SDK Platform-Tools] (as well as [Android Emulator] if you want to test on an emulator), then click [Apply]. The documentation for [Flutter] also recommends [CMake] and [NDK (Side by side)]. It is the [Android SDK Command-line Tools] packages that are missing when [flutter doctor] displays “cmdline-tools component is missing.”
  2. Accept the licenses for the [Android] SDK by typing the following command in a terminal within the Flutter project, then answering “[y]” to each question until you see the message “All SDK package licenses accepted.”:
    flutter doctor --android-licenses
    

[Note]: With version 23.0 of [Android SDK Command-line Tools], the command above may terminate immediately, without prompting for anything, displaying “The --licenses option is no longer needed.” This is a known issue in [Flutter] (issues 191558 and 191487 on github.com/flutter/flutter). Workaround: In [SDK Manager], [SDK Tools] tab, check [Show Package Details], replace version 23.0 of [Android SDK Command-line Tools] with version 22.0, click on [Apply], and then rerun the command.

2.1.3. Create an Android emulator

If you don’t have a phone, you can test the app on a [Android] emulator: a virtual phone that runs in a window on your computer. [Android Studio] installs the [Android Emulator] program (if it was checked in the [SDK Manager], see above) but does not provide a ready-to-use virtual device: you must create one.

  1. [Prerequisite]: Virtualization must be enabled in the computer’s [BIOS], and under [Windows], the [Windows Hypervisor Platform] feature must be checked ([Control Panel / Programs / Turn Windows features on or off]), which requires a restart. Otherwise, the emulator will not start or will remain very slow.
  2. Open [Device Manager] from [Android Studio]: [More Actions / Virtual Device Manager] from the home screen, or [Tools / Device Manager] when a project is open (depending on the version: [View / Tool Windows / Device Manager]).

Image

  1. Click on [Create Device], select a template (for example, [Pixel 8]), then [Next]. Select a recent [Android] system image for the [x86_64] processor and download it using the [Download] link located next to it, then [Next] and [Finish].

Image

Image

Image

  1. Start the emulator using the [Play] button on the [Device Manager], or from a terminal (the first command lists the emulators and their IDs):
    flutter emulators
    flutter emulators --launch <id>
    

Image

  1. Wait until the [Android] welcome screen appears in the emulator window: the first startup may take several minutes. Then verify that [Flutter] recognizes the emulator, which should appear in the list (for example, [emulator-5554], platform [android-x64]):
flutter devices
1
2
3
4
5
6
7
PS C:\Data\st-2026\dev\flutter-nestjs-sept-2026\rdvmedecins_flutter_client> flutter devices
Found 4 connected devices:
  sdk gphone16k x86 64 (mobile) • emulator-5554 • android-x64    • Android 17 (API 37) (emulator)
  Windows (desktop)             • windows       • windows-x64    • Microsoft Windows [version
  10.0.26200.9457]
  Chrome (web)                  • chrome        • web-javascript • Google Chrome 153.0.8010.48
  Edge (web)                    • edge          • web-javascript • Microsoft Edge 153.0.4234.48

[Note]: if [flutter devices] does not display the emulator but instead shows the message “Device emulator-5554 is offline,” the emulator has not finished starting up, or [adb] (the tool that connects the computer to the device, installed along with [Android SDK Platform-Tools]) is in an inconsistent state. Try the following in order: (1) wait for the welcome screen to appear, then rerun the command; (2) restart [adb] using the following three commands (in [Windows], within [PowerShell]), with the last one displaying “device” rather than “offline”; (3) In the [Device Manager], under the device’s [⋮] menu, select [Cold Boot Now], or even [Wipe Data] as a last resort.

1
2
3
& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" kill-server
& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" start-server
& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" devices

If the problem persists, use [where.exe adb] to verify that no other [adb], of a different version, is present in the [PATH]: Two versions of [adb] competing for the connection cause this issue.

Once the emulator is recognized, the application launches on it with the following command. Note: In the emulator, [localhost] refers to the emulator itself and not the computer; the “Server URL” field must contain [http://10.0.2.2:8080] (see Chapter 5).

flutter run -d emulator-5554

Image

2.1.4. Preparing the Android phone

To run the app on a real [Android] phone, the phone must be set to allow control from the computer:

  1. Enable developer options: open [Settings / About phone], then tap [Build number] several times (usually 7) until the phone indicates that you are a developer. The exact labels vary by manufacturer.
  2. Enable [USB debugging] in the [Developer options] menu (added in the previous step).
  3. Connect the phone to the computer using a USB cable that transfers data (not just charges the phone), and accept the USB debugging permission request on the phone. On Windows, if the phone is not recognized, install the manufacturer’s driver USB (“OEM USB drivers,” see [https://developer.android.com/studio/run/oem-usb]).
  4. Verify that [Flutter] detects the phone: it should appear in the list displayed by the following command, along with the [android] platform:
    flutter devices
    

The phone will access the [NestJS] server via the computer’s IP address on the local network (and not via [localhost]): this configuration is described in Chapter 5.