Deployer son Application Web en ligne gratuitement

Deployer son Application Web en ligne gratuitement


05-11-2021
fr

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

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:

Connection à Netlify

Etape 2: sélectionner le fournisseur Git

Choisissez le fournisseur git que vous utilisez. Dans notre cas, il s'agit de Github:

Fournisseur git

Etape 3: sélectionner le répertoire

Cherchez et sélectionnez le répertoire git que vous souhaitez déployer: Sélection du répertoire

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

Options de déploiement

Etape 5: (optionnel) Personnaliser le nom du site

  • Allez dans Site Settings

Personnaliser le site

  • Cliquez sur Site details et Change site name

Changer le nom

Changer le nom

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:

Problèmes de déploiement

Dans ce cas, il faut créer un fichier _redirects dans le dossier public et copier ce code:

/* /index.html 200

Fichier _redirects

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!!



Guillaume Cassin