Easy-Micro [ FULL STACK - Node et Angular ] - Formations informatiques pour entreprises

Full stack
Node et Angular
Installation de Node.js et d'Angular

Installez Node

Après avoir téléchargé la version LTS de Node.js (Long Term Support), on crée un dossier de travail à la racine de notre disque dur (projet_full_stack). Voir les détails de l'installation

Depuis la console Windows (CMD) - Sélection du répertoire de travail

C:\Users\yo> cd C:/projet_full_stack

Installez Angular

Installer ensuite le framework Javascript dans sa version Angular CLI (Command Line Interface) qui vous permet de générer, compiler, tester et déployer des projets Angular

Depuis la console Windows (CMD)

C:\projet_full_stack> npm install -g @angular/cli

option -g pour installation global, (requiert un accès administrateur)

Clonez l'application front-end

Pour cloner le code pour l'application front-end, crée d'abord un sous-répertoire appelé frontend. À partir de votre répertoire de travail (projet_full_stack), entrez la commande ci-dessous :

Depuis la console Windows (CMD)

C:\projet_full_stack> git clone https://github.com/OpenClassrooms-Student-Center/go-fullstack-fr-frontend.git frontend

-> Plus d'infos sur Git

Vous pouvez ensuite procéder comme suit toujours depuis la console Windows (CMD)

C:\projet_full_stack> cd frontend
C:\projet_full_stack\frontend> npm install
C:\projet_full_stack\frontend> ng serve

npm install pour une installation de tous les drivers nécessaire. La commande ng serv (ng pour aNGular) lance le serveur web en mémoire (cela peut ralentir votre PC)

Serveur local

Désormais, si vous accédez à http://localhost:4200, vous devriez voir l'interface du projet (en supposant que vous avez bien suivi les étapes)

Page d'accueil de l'application front-end

La dernière étape consiste à créer un second sous-répertoire dans votre répertoire de travail, appelé backend. C'est là que vous créerez l'application Express.

Le fichier de projet package.json

À partir de votre dossier backend, exécutez la commande de terminal npm init pour initialiser votre projet. Cela génère le fichier package.json. Vous pouvez utiliser les options par défaut ou les modifier si vous le souhaitez. Cependant, votre point d'entrée (main) doit être server.js. Le fichier package.json devra donc contenir la ligne : "main": "server.js".

Dans la console Windows (CMD) - Création du fichier package.json

C:\projet_full_stack\frontend> cd ..
C:\projet_full_stack> cd backend
C:\projet_full_stack\backend> npm init

La commande npm init génère un fichier package.json vierge, dans lequel seront enregistrés les détails de tous les packages npm que nous utiliserons pour ce projet.

Initialiser un dépôt Git

À ce stade, vous pouvez initialiser un dépôt Git en exécutant git init depuis votre dossier backend . N'oubliez pas de créer un fichier .gitignore contenant la ligne node_modules afin de ne pas envoyer ce dossier (qui deviendra volumineux) vers votre dépôt distant.

Initialisez un dépôt Git en exécutant la commande git init

C:\projet_full_stack\backend> git init

Un dossier caché .git a été créé qui contient tous les éléments non visibles de Git : la configuration, les logs, les branches... Vous pouvez l'afficher en allant dans Affichage => Éléments masqués.

< >