Comment déployer une application React sur Netlify

Je vais vous apprendre comment déployer et héberger votre application React avec Netlify.

Netlify est un service qui automatise les constructions, les déploiements et gère vos sites Web. C'est l'une des solutions de déploiement les plus rapides et les plus simples de nos jours.

Netlify propose un plan gratuit. Donc d'abord, nous nous connecterons à Netlify en utilisant l'une des options (Github, Gitlab, Bitbucket, Email) indiquées sur la page de connexion.

Nous allons commencer par créer une compilation de notre application en exécutant cette commande:

npm run build

Donc, maintenant, notre dossier de construction sera généré et contiendra tous les fichiers prêts pour la production.

Désormais, il existe deux façons de déployer notre application sur Netlify.

Glisser-déposer

Netifly a rendu les choses si faciles que nous devons simplement glisser-déposer notre dossier de construction dans leur application en ligne (image la plus à droite ci-dessus), et notre application sera déployée sur une URL en direct.

Remarque: l' application en ligne Netlify est l'écran qui apparaît une fois que vous vous êtes connecté à votre compte netlify.

CLI Netlify

Netifly fournit également une interface de ligne de commande qui vous permet de déployer votre application directement à partir de la ligne de commande. C'est ce que nous allons faire maintenant.

Nous allons donc d'abord installer la CLI à l'aide de la commande suivante:

npm install netlify-cli -g

Maintenant, nous sommes prêts à le déployer. Pour déployer l'application, nous devons nous assurer que nous sommes dans le dossier du projet, puis nous exécuterons cette commande:

netlify deploy

Nous pourrions avoir une fenêtre contextuelle qui nous demandera de nous connecter avec Netlify et d'accorder l'accès à la CLI Netlify .

Maintenant, nous allons cliquer sur Autoriser. Maintenant que nous sommes autorisés, nous pouvons suivre les invites de ligne de commande pour déployer l'application.

Invites de ligne de commande

  1. Dans la console, il est dit que « Ce dossier n'est pas encore lié à un site. Qu'est-ce que tu aimerais faire?" Il veut savoir si nous voulons lier ce répertoire à un site existant ou créer et configurer un nouveau site. Puisqu'il s'agit d'un nouveau site, nous allons sélectionner Créer et configurer un nouveau site.

2. Cela nous donne la possibilité de donner un nom à notre site. Je vais taper portfolio sur netlify (vous pouvez taper n'importe quel nom disponible que vous aimez).

3. Maintenant, il vous demandera le compte Netlify que vous souhaitez utiliser, donc je vais sélectionner mon compte (Abhishek Jakhar) , vous pouvez sélectionner le vôtre.

4. Maintenant, comme chemin de déploiement, nous devons spécifier le répertoire de construction de notre projet qui contient les actifs pour le déploiement. Donc, nous allons taper build ici et appuyer sur Entrée.

5. Maintenant, notre site sera créé et sera d'abord déployé sur un brouillon d'URL, que nous pouvons afficher en copiant et collant l'URL dans le navigateur.

Maintenant, de retour dans la console, il est dit "Si tout semble bon sur votre URL de brouillon, mettez-le en ligne avec l'indicateur --prod" .

Donc, pour rendre notre application active, nous allons exécuter la commande affichée sur la ligne de commande

netlify deploy --prod

Il nous demandera une fois de plus de spécifier le chemin de déploiement pour la version en direct qui est encore notre dossier de construction.

Maintenant, dans la sortie de la console, nous obtenons deux URL. Une URL de déploiement unique, qui représente l'URL unique pour chaque déploiement individuel, et une URL en direct qui affiche toujours votre dernier déploiement.

Ainsi, chaque fois que vous mettez à jour votre site Web et que vous le déployez, vous obtiendrez une URL unique pour ce déploiement. Fondamentalement, si nous déployons plusieurs fois, nous aurons plusieurs URL uniques afin que vous puissiez diriger les utilisateurs vers une version spécifique de votre application. Mais l' URL en direct affiche toujours vos dernières modifications sur la même URL.

Remarque: Netlify sécurise automatiquement votre site sur HTTPS pour gratuitement .

Erreur de page introuvable

Si vous publiez une application qui utilise un routeur tel que React Router, vous devrez configurer des redirections et réécrire des règles pour vos URL. Parce que lorsque nous cliquons sur un élément de navigation pour changer la page (itinéraire) et actualiser le navigateur, nous obtenons une page d'erreur 404.

Netlify facilite donc la configuration des redirections et des règles de réécriture pour vos URL. Nous devrons ajouter un fichier dans le dossier de construction de notre application nommé _redirects. Dans le fichier, nous devons inclure la règle de réécriture suivante.

/* /index.html 200

Cette règle de réécriture va servir le fichier index.html au lieu de donner un 404, quelle que soit l'URL demandée par le navigateur.

Alors maintenant, pour voir les dernières modifications de l'URL en direct, nous devons déployer avec netlify deploy. Encore une fois, nous spécifierons build comme chemin de déploiement. Maintenant, lorsque nous voyons l'URL en direct et actualisons l'application après avoir modifié l'itinéraire, nous ne verrons plus la page d'erreur 404.

C'est tout ce qu'on peut en dire. Sur netlify.com, vous pouvez voir les paramètres de votre site. Là, vous pouvez faire des choses comme configurer un domaine personnalisé ou connecter le site à un référentiel GitHub.

Netlify: plateforme tout-en-un pour automatiser les projets Web modernes

Déployez des sites Web statiques modernes avec Netlify. Obtenez CDN, déploiement continu, HTTPS en 1 clic et tous les services que vous… www.netlify.com

J'espère que vous avez trouvé ce message informatif et utile. J'aimerais beaucoup entendre vos commentaires!

Merci pour la lecture!