Installation du cours

Installation sur l'ordinateur

Installez les outils de développement sur votre ordinateur!

Une partie importante de cette formation sera dédiée à créer vos propres applications sur votre équipement. Vous allez coder, déboguer et éxécuter dans un environnement propice à la création. Vous pouvez utiliser Windows, Mac ou Linux pour votre développement.

Voici la configuration necessaire:

• Avoir des permissions Admin Local sur votre équipement. (Nous allons installer des outils de programmation durant le cours).
• Ayez un ou plusieurs navigateurs installés pour vos tests (Chrome, Firefox, Safari, Edge, Opera, etc.)
• Ayez un éditeur de code installé. Le formateur utilise Visual Studio Code (un outil gratuit). Mais vous pouvez utiliser ce qui vous convient:
  • Visual Studio Code
  • Atom
  • WebStorm
  • Sublime
  • PHPStorm
  • Brackets

Installation de Git

Git est un outil de gestion de code source.

Écrivez les instructions suivantes dans une ligne de commande (bash, powershell, cmd, etc.)

• Vous devez avoir installé git version 2.39 ou plus. Vérifiez la version avec la commande > git --version
  • Installez une nouvelle version au besoin https://git-scm.com/downloads.

Installation de nvm

Pour installer Node.js, nous utilisons l'installateur nvm (node version manager).

• Validez la version de nvm installée

  • Tapez sur la ligne de commande: > nvm -v
    • Il faut v0.40.1 ou plus sur MacOS
    • Il faut 1.1.12 ou plus sur Windows PCs

• Pour mettre à jour ou installer nvm

  • D'abord désinstaller toutes les versions de nvm et Node.js
    • Sur Windows, aller sur Paramètres, Applications , Applications et fonctionalités.
      • Désinstallez NVM for Windows et Node.js (si elles existent)
    • Sur MacOS, tapez la commande suivante dans le Terminal:
      • $ rm -rf $NVM_DIR ~/.npm ~/.bower

• Pour installer nvm sur Windows

  • Aller sur https://github.com/coreybutler/nvm-windows/releases/latest
  • Tout en bas de la page, téléchargez nvm-setup.exe
  • Installez nvm en utilisant l'installateur

• Pour installer nvm sur MacOS

  • Tapez cette commande dans votre Terminal :
  • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

• Une fois installé, il est possible que nvm ne soit pas immédiatement détecté.

  • Fermez la fenêtre et ouvrez une nouvelle ligne de commande.

Installation de Node.js

Sur Windows, dans une Invite de commandes exécutée en tant qu'administrateur:

nvm install lts
nvm use lts

Sur Terminal de MacOS:

nvm install --lts
nvm use --lts

Creation d'une application React

• Sur la ligne de commande, déplacez-vous dans un dossier dans lequel vous allez créer vos projets du cours. (Nous utilisons ici un dossier nommé Projets)
• Naviguez vers votre dossier: > cd Projets
• Créez votre application nommée demo1: > npm create vite@latest demo1 -- --template react-swc
  • Ceci va créer un projet vite nommé demo1, utilisant le gabarit React
  • Notez que la commande possède un double tiret vide (--)
  • vous aurez un message Need to install the following packages. Ok to proceed? Faites Y (ou O) et enter pour confirmer.
• Naviguez vers le dossier de cette nouvelle app: > cd demo1
• Installez les outils et les dépendences: > npm install
  • Ces outils et dépendances seront intallées dans le dossier node_modules
• Démarrez le serveur web local de développent: > npm run dev
• Pressez la lettre o et enter.
  • Ceci démarre votre navigateur et charge la page http://localhost:5173/.
  • Si vous voyez une page web, vous avez réussi votre installation.
• Stoppez le serveur web en tapant q et enter.