Mettre son application en ligne avec Netlify
Afin de mettre son application en ligne, nous allons utiliser Netlify qui permet de dépoyer des applications de manière gratuite.
Sommaire
- Les prérequis
- Etape 1: se connecter sur Netlify
- Etape 2: sélectionner le fournisseur Git
- Etape 3: sélectionner le répertoire
- Etape 4: options de déploiement
- Etape 5: (optionnel) Personnaliser le nom du site
- Problèmes connus
- Communauté & Assistance
Les prérequis
Ce tutoriel a vocation à présenter le déploiement d'Application Web développée en React.js mais peut s'appliquer également à toutes librairies javascript utilisées dans le cadre de site statique.
Pour cela, il faut au préalable créer un compte gratuitement sur Netlify et Github.
Etape 1: se connecter sur Netlify
Cliquez New site from Git dans la page d'accueil:
Etape 2: sélectionner le fournisseur Git
Choisissez le fournisseur git que vous utilisez. Dans notre cas, il s'agit de Github:
Etape 3: sélectionner le répertoire
Cherchez et sélectionnez le répertoire git que vous souhaitez déployer:
Etape 4: options de déploiement
- Vous pouvez choisir n'importe quel branche de déploiement au lieu de la branche master
- Indiquez CI= npm run build dans la "Build Command" afin de permettre le déploiement continu
- Cliquez sur Deploy site
Etape 5: (optionnel) Personnaliser le nom du site
- Allez dans Site Settings
- Cliquez sur Site details et Change site name
Problèmes de déploiement avec React Router DOM
Page Not Found
Looks like you're followed a broken link or entered a URL that doesn't exist on this site.Dans le cas ou vous utilisez react-router-dom et que vous avez le message d'erreur suivant quand vous rechargez la page:
Dans ce cas, il faut créer un fichier _redirects dans le dossier public et copier ce code:
/* /index.html 200
Communauté & Assistance
Afin de pouvoir échanger sur le sujet et répondre à vos questions, vous pouvez rejoindre notre serveur Discord et suivre nos développements sur notre Github.
Vous pouvez également nous contacter par email: contact@tridyme.com.
A bientôt sur TriDyme!!