Start a Local, Live-reload Web Server with One Command

Démarrez un serveur Web local à rechargement en direct avec une seule commande

En tant que développeurs, nous avons souvent besoin d'un serveur Web local pour tester quelque chose sur lequel nous travaillons et nous n'avons souvent pas le temps de configurer un système complexe pour un test rapide. Nous avons besoin de quelque chose de prêt à l'emploi et facile à utiliser pour vérifier nos dernières modifications de code, maintenant !

Voici une astuce rapide pour démarrer un serveur Web local avec une seule commande !

Le serveur que nous utiliserons dispose de fonctionnalités de rechargement en direct, ce qui signifie que lorsque vous modifiez votre code, votre navigateur se rafraîchit automatiquement !

Oh, vous avez aussi besoin de tester sur mobile, tablette et/ou votre console de jeu ? Aucun problème! Connectez chacun de vos appareils à votre serveur local et regardez-les tous s'actualiser, se relier et défiler ensemble en temps réel ! 😱

Allons-y! 🚀

Tout d'abord, installons quelques trucs

Node.js et npm

Comme la plupart des choses de nos jours, assurez-vous que Node.js et npm sont installés. Vous pouvez le faire en téléchargeant le programme d'installation officiel de votre plateforme sur NodeJS.org .

Une fois Node.js installé, ouvrez votre application Terminal pour vérifier que npm est installé et prêt à fonctionner en exécutant la commande suivante :

 npm -v

Cela devrait renvoyer le numéro de version actuel.

Capture d'écran de mon application Terminal, Hyper Terminal, affichant la sortie de la commande "npm -v". Le texte résultant s'affiche, "5.5.1"

Synchronisation du navigateur

Utilisons ensuite npm pour installer notre application serveur, Browsersync ! C'est l'application qui fait tout le gros du travail, comme servir vos fichiers, recharger tous les navigateurs connectés lors de la sauvegarde des fichiers, et plus encore !

Saisissez et exécutez la commande suivante :

 npm install -g browser- sync

Cela installera browser-sync "globalement" afin que vous puissiez l'utiliser pour servir et tester votre travail dans n'importe quel répertoire de votre ordinateur.

Maintenant que tout est installé, configurons la commande pour démarrer le serveur dans votre terminal !

Création de la commande

L'une des choses les plus intéressantes à propos de l'utilisation du Terminal et de l'utilisation de l'interface de ligne de commande est que vous pouvez créer vos propres commandes personnalisées qui exécutent ensuite un tas d'autres commandes pour vous !

Nous allons faire exactement cela afin de faire fonctionner notre serveur avec une simple commande : serve .

Ouvrez la configuration du shell

Une commande personnalisée est appelée un "alias" qui est créé dans votre fichier de configuration du shell Terminal.

Par défaut, le terminal macOS exécute le shell Bash . Depuis votre répertoire personnel ( ~/ ), ouvrez le fichier .bash_profile ou, s'il n'existe pas, le fichier .bashrc . Si celui-ci n'existe pas non plus, créez-le simplement et nous y apporterons les modifications.

Mon éditeur de texte de choix est Atom , donc si vous l'avez installé, exécutez ce qui suit dans votre Terminal pour éditer votre fichier de configuration shell :

 atom ~/.bashrc

Faites défiler jusqu'à la fin de ce fichier car nous inclurons nos ajouts à la toute fin.

Obtenez votre adresse IP locale

La première ligne à ajouter sera utilisée pour obtenir l'adresse IP locale actuelle de votre ordinateur. Cela vous sera utile si et quand vous testez quelque chose ailleurs que sur votre réseau domestique.

Ajoutez ceci à votre fichier :

 export LOCAL_IP=`ipconfig getifaddr en0`

Cette ligne crée une nouvelle variable appelée $LOCAL_IP et stocke l'adresse IP de votre réseau local. Pourquoi avons-nous besoin de ces informations ? Vous le saurez bientôt !

Configurer l'alias de commande de service

L'autre ligne que nous devons ajouter est l'alias de commande réel qui démarrera le serveur Browsersync.

Ajoutez cette ligne à votre fichier de configuration shell :

 alias serve= "browser-sync start -s -f . --no-notify --host $LOCAL_IP --port 9000"

Décomposons ce qu'il y a dans cette ligne.

  • La première partie, alias , indique à notre environnement shell que nous voulons créer une nouvelle commande personnalisée.
  • Tout ce qui vient après alias est la commande que nous tapons. Dans ce cas, notre commande sera " serve ". La chaîne définie pour cette commande est celle qui est réellement exécutée en arrière-plan.
  • La commande browser-sync start est ce qui démarre le serveur Browsersync.
  • L'option -s exécute le serveur local .
  • L'option -f indique à Browsersync quels fichiers surveiller. Dans ce cas, nous utilisons le point . caractère pour désigner le répertoire actuel du terminal.
  • Normalement lors de la connexion à un serveur Browsersync il y a un petit message pour signifier une connexion. Nous utilisons l'option --no-verify pour supprimer cette fonctionnalité.
  • L'option --host définit l'adresse IP de l'ordinateur hôte. C'est ici que nous utilisons la variable $LOCAL_IP que nous avons créée précédemment.
  • Enfin, l'option --port indique sur quel port notre serveur doit fonctionner.

Remarque : consultez toutes les autres options de ligne de commande de Browsersync disponibles pour personnaliser votre serveur !

Capture d'écran de l'éditeur Atom, avec le fichier .bashrc ouvert pour modification. Les deux lignes décrites ci-dessus sont vues en place.

Maintenant, enregistrons le fichier et essayons la nouvelle commande serve !

Exécutez la commande

Dans votre terminal, changez les répertoires en quelque part avec les fichiers de projet sur lesquels vous travaillez. Par exemple, je vérifie une modification que j'ai apportée sur le site du projet A11Y et je souhaite la tester localement.

Étant donné que ma copie du site se trouve dans ~/Sites/a11yproject.com/_site , j'émettrais la commande suivante pour accéder à ce répertoire :

 cd ~/Sites/a11yproject. com /_site

Dans ce répertoire, il y a un fichier index``.html avec le contenu et les feuilles de style liés à partir d'un sous-répertoire, ainsi que tous les autres fichiers qui composent le site.

Je vais exécuter la commande serve à partir d'ici :

 serve

Votre terminal doit afficher des informations comme celles-ci, ainsi qu'ouvrir votre navigateur par défaut et charger automatiquement la page index.html :

Capture d'écran d'Hyper Terminal, affichant la sortie de la commande "serve". Le texte résultant s'affiche : "URL d'accès :" avec une liste des URL locales disponibles auxquelles se connecter. La liste comprend "Local : http://localhost:9000" et "Externe : http://192.168.0.9:9000". Ci-dessous, un message se lit comme suit : "Serving files from: ./ Watching files…"

Comme affiché dans la sortie du terminal, la valeur IP "Local :" est celle de votre propre ordinateur, http://localhost:9000 . Cependant, l'IP "Externe :" est ce qui est intéressant ici. C'est encore un autre avantage et utilisation de la variable $LOCAL_IP dans le fichier de configuration du shell.

La variable $LOCAL_IP ajoute une note rapide de l'adresse IP actuelle de votre réseau local lors du démarrage de votre serveur.

Utilisez cette valeur lorsque vous souhaitez tester sur un mobile, une tablette ou un autre appareil informatique avec un navigateur !

Découvrez la commande serve en action ! 👇

GIF animé d'un navigateur Google Chrome à côté du simulateur Apple iPhone. L'animation affiche les deux fenêtres défilant et reliant la copie locale du site Web du projet A11Y en temps réel.

J'espère que cette astuce a été utile pour mettre en place et faire fonctionner rapidement un serveur local de rechargement en direct !

Y a-t-il d'autres configurations de Browsersync que vous recommanderiez ? Utilisez-vous une méthode différente pour lancer un serveur local pour des tests rapides ? Faites-moi savoir dans les commentaires! 🙌

Bon piratage ! 💻😄💖

Retour au blog