8 services d’hébergement d’applications React gratuits13 min read

Vous avez donc créé une application React, mais vous ne savez pas comment ni où l’héberger. Dans cet article, nous vous présenterons 8 services d’hébergement React gratuits et vous montrerons comment nous avons déployé cette application React en utilisant chacun d’eux et vous raconterons ce que nous avons appris au cours du processus.

Nous avons construit notre application dans Figma en utilisant le Anima plugin, qui nous a permis d’ajouter des fonctionnalités, un comportement réactif et du rich media, puis exporter le code React prêt pour le développement pour l’ensemble de l’interface utilisateur. Il nous a fallu une journée pour concevoir et déployer.

Où héberger gratuitement votre application React

Il existe un nombre croissant de solutions d’hébergement sans serveur grâce à la montée en puissance des frameworks basés sur des composants comme React. Amazon AWS, Microsoft Azure et Google Cloud sont actuellement les plateformes dominantes. Cependant, on observe une tendance croissante vers des services d’hébergement front-end dédiés qui nécessitent moins d’efforts et peuvent vous permettre d’être opérationnel en un rien de temps, et la plupart incluent CI/CD. Voici les 8 services d’hébergement d’applications React gratuits que nous avons testés :

1. Netlifier

2. Vercel

3. AWSAmplifier

4. Base de feu

5. Pages GitHub

6. Pages GitLab

7. Rendu

8. Surtension

Examinons plus en détail ces services d’hébergement d’applications React gratuits et montrons comment nous avons déployé une application React en utilisant chacun d’eux. 

Netlifier

Contexte

Netlify a été fondée en 2014 et s’est concentrée dès le départ sur l’hébergement de sites Web statiques. Il a attiré de nombreux développeurs en raison de son offre gratuite généreuse. Quelques années plus tard, Netlify est devenu l’un des hébergeurs JAMstack et de sites Web statiques les plus populaires.

Comment utiliser

1. Idéalement, vous vous inscrirez ou vous connecterez avec GitHub. Cela garantit que vous pouvez accéder aux référentiels de votre profil et les déployer rapidement.
2. Une fois connecté, cliquez sur « Ajouter un nouveau site » et choisissez « Importer un projet existant ».
3. Cliquez ensuite sur GitHub comme fournisseur.
4. Choisissez le « site Web de la banque » ou quel que soit le nom de votre projet.
5. Affinez les paramètres de déploiement (dans le cas de notre site Internet, les valeurs par défaut fonctionnent parfaitement), puis cliquez sur « Déployer le site ».
6. Une fois déployé, vous pouvez le visualiser sur un URL public que vous pouvez partager avec le monde. Ouais!

Voici l’application en direct déployée sur Netlify.

Avantages et inconvénients

Netlify est facile à configurer et à déployer, sans compter qu’il s’agit de l’un des services les plus rapides que nous avons testés ici. Un inconvénient est que si vous avez besoin de collaborateurs et/ou d’une équipe, vous devez passer à un forfait payant.

Vercel

Contexte

Vercel (initialement connu sous le nom de Zeit) a été fondée en 2015 et est rapidement devenue célèbre. Ils sont les responsables de Next.js, un framework React populaire pour la création de sites Web. Ils offrent un niveau gratuit aux sites Web non commerciaux, ainsi que des moyens d’utiliser leur réseau Edge pour des fonctions sans serveur.

Comment utiliser

1. Connectez-vous ou inscrivez-vous sur GitHub.
2. Cliquez sur le menu déroulant « Ajouter un nouveau… » et sélectionnez « Projet ».                                                             
3. Choisissez le « site Web de la banque » ou votre projet React préféré.
4. Nous avons opté pour les paramètres de déploiement par défaut, puis avons cliqué sur « Déployer ».
5. Après un certain temps, nous avons déployé le site Web.

Voici le URL en direct.

Avantages et inconvénients

Vercel a besoin d’un certain temps pour mettre en cache la partie installation du processus de déploiement, mais après cela, c’est l’un des services les plus rapides. Il affiche un aperçu des déploiements pour chaque branche que vous poussez et il le fait rapidement grâce à la mise en cache.

AWSAmplifier

Contexte

AWS est une vaste collection de produits cloud, et Amplify est présenté comme un moyen simple d’en obtenir certains. Avec AWS Amplify, vous pouvez rapidement créer, expédier et héberger des applications full-stack sur AWS, avec la flexibilité nécessaire pour tirer parti de l’étendue des services AWS à mesure que les cas d’utilisation évoluent.

Comment utiliser

1. Inscrivez-vous ou connectez-vous à AWS, puis recherchez AWS Amplify et cliquez sur « Commencer ».
2. Choisissez GitHub et autorisez-le (je ne l’ai autorisé que pour le repo « site-banque »).
3. Sélectionnez le dépôt dans la section « Référentiels récemment mis à jour ».
   1. Dans le paramètre de build, nous devrons changer le répertoire de base pour que notre application soit dist comme ça : Ensuite, les paramètres de build devraient ressembler à ceci :
4. À l’étape suivante, cliquez sur « Enregistrer et déployer ».
5. Après un certain temps, le site Web sera déployé et prêt à être utilisé.

Et nous sommes en direct ! Voici le URL.

Avantages et inconvénients

Vous devez modifier le répertoire de base dans la spécification de déploiement : il n’est pas reconnu immédiatement. L’interface utilisateur semble un peu maladroite, mais il s’agit d’une préférence personnelle. Il existe un énorme potentiel pour AWS Amplify, car de nombreux autres services Web AWS sont à portée de main.

Base de feu

Contexte

Firebase est un service Google surtout connu comme plate-forme de stockage en temps réel. Mais il dispose également d’une option d’hébergement pour les sites Web statiques et les microservices Express.js ou API, et prend en charge les versions préliminaires des URL pour les branches sur lesquelles votre équipe travaille. Comme Netlify, Vercel et autres, il diffuse le contenu déployé sur un réseau CDN.

Comment utiliser

1. Installer outils Firebase avec npm install -g outils-firebase.
2. Connectez-vous à Firebase avec connexion à Firebase. Une fois connecté, vous devriez voir un message comme celui-ci :
3. Accédez au répertoire du projet et exécutez initialisation de Firebase, vous devriez voir quelque chose comme ceci : Choisissez l’option permettant de configurer les fichiers pour l’hébergement Firebase avec les déploiements d’action GitHub facultatifs. Ensuite, vous pouvez créer un projet directement à partir de la CLI ou utiliser Firebase UI pour le faire et le connecter plus tard. Nous avons créé le projet à partir de la ligne de commande et voici comment nous avons répondu aux questions résultantes :                                                                  Après cela, de simples fichiers `firebase.json` et `.firebaserc` seront créés.
4. Ensuite, courez déploiement de Firebase pour déployer réellement les fichiers à partir du distannuaire. Si le répertoire est manquant, assurez-vous d’exécuter npm exécuter la construction premier à générer des fichiers. Le déploiement de Firebase La commande doit générer une sortie similaire à l’exemple ci-dessous :

Maintenant tu peux voir le site internet sur le URL fourni. Ouais! 

Avantages et inconvénients

Firebase est assez simple, mais lorsque vous le configurez dans votre projet, les questions auxquelles vous devez répondre sont un peu déroutantes. Heureusement, nous y avons répondu pour vous dans la section ci-dessus, mais ils nécessitent une compréhension des fonctionnalités réelles de Firebase avant de continuer. En dehors de cela, Firebase est rapide à déployer et peut générer un URL dans lequel vous pouvez prévisualiser les fichiers déployés. Vous pouvez également l’automatiser facilement avec les déploiements GitHub Action avec la CLI, ce qui est pratique.

Pages GitHub

Contexte

Les pages GitHub existent depuis un certain temps et constituent un moyen simple de publier des documents ou un site Web personnel directement à partir de GitHub. C’est idéal pour le contenu statique et beaucoup de gens l’utilisent pour déployer des sites simples avec un investissement minimal. Son utilisation est gratuite si votre projet est public et constitue un moyen rapide et peu coûteux d’héberger un site Web.

Comment utiliser

Veuillez noter que vous devez modifier le App.jsx où nous appelons Routeur et ajouter nom de base pour qu’il corresponde au nom du dépôt. Voilà donc comment App.jsx devrait ressembler à :                                                                                        Nous devons changer le nom de base car les pages GitHub déploieront le site Web sur un URL de cette forme `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Le site Web ne fonctionnera pas correctement sans le nom de base défini pour le réagir-routeur-dom.

1. Une fois le code modifié, nous devons installer pages gh forfait avec :
2. Et ajoutez un pré-déploiement et un déployer script à package.json:
3. Ensuite, nous courons simplement npm exécuter déployer. Cela déclenchera npm exécuter la construction et il utilisera pages gh publier le contenu de dist vers une branche distincte sur GitHub appelée pages gh.
4. Enfin, vérifiez si le pages gh est utilisé pour les pages GitHub comme ci-dessous :

Voici le URL en direct.

Avantages et inconvénients

Si vous déployez un projet différent de votre nom d’utilisateur, il sera déployé dans un sous-répertoire de notre domaine gratuit au sein de GitHub. Ensuite, vous devez écrire du code supplémentaire pour prendre en charge la logique d’être dans un sous-répertoire.

Il ne prend pas en charge le déploiement continu prêt à l’emploi dans notre cas d’utilisation, mais vous pouvez le configurer. Une fois configuré, il est rapide de déployer les modifications.

Pages GitLab

Contexte

Comme GitHub, GitLab dispose de sa propre solution d’hébergement, qu’ils appellent GitLab Pages. Je dois le leur donner, il est plus facile de mettre en place un déploiement continu sur les pages GitLab que pour les pages GitHub.

Comment utiliser

1. Inscrivez-vous ou connectez-vous à GitLab
2. Ajoutez un dépôt à GitLab si vous ne l’avez pas déjà. Vous pouvez fork celui que j’ai ajouté là 
   Semblable aux pages GitHub, vous devez modifier le App.jsx où nous appelons Routeur et ajouter  nom de base pour qu’il corresponde au nom du dépôt. Voici donc le dernier changement :                                                               Nous devons changer le nom de base car les pages GitLab déploieront le site Web sur un URL de cette forme : https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Le site Web ne fonctionnera pas correctement sans le nom de base défini pour le réagir-routeur-dom.
3. Une fois que vous avez modifié et poussé le projet vers GitLab, accédez à Paramètres > Pages et vous serez accueilli par un assistant en quatre étapes pour déployer le dépôt sur les pages GitLab. 
4. La première étape de l’assistant consiste à saisir l’image de construction. Nous utiliserons le LTS Node.js.
5. Ensuite, nous entrerons la commande de pré-construction. Le npm ci suffira ici.
6. Passons maintenant à l’étape de construction. Nous devons passer — –dist-dir public parce que les pages GitLab s’attendent à ce que le site Web soit construit dans le publique annuaire. Vous ne pouvez vous en sortir avec aucun autre répertoire, désolé.
7. Validez le nouveau généré .gitlab-ci.yml fichier qui indique à GitLab comment déployer votre site Web.
8. Maintenant, accédez à la section CI/CD -> Pipelines du dépôt et observez le fonctionnement du pipeline nouvellement ajouté.
9. Après un certain temps, le travail du pipeline se terminera et le site Web sera déployé sur les pages GitLab.

Voici le résultat.

Avantages et inconvénients

Les packages sont lents à installer et vous devez ajouter du code supplémentaire pour le faire fonctionner, mais l’assistant est super intuitif avec seulement quatre étapes à déployer.

Rendu

Contexte

Render est un petit nouveau lancé en 2019. Il tente de perturber la façon dont les gens déploient leurs services (y compris les sites Web statiques). Pour l’instant, ils se portent bien et leur nombre augmente.

Comment utiliser

1. Inscrivez-vous ou connectez-vous à Render.
2. Créez un nouveau site Web statique en appuyant sur le bouton « Nouveau » et en sélectionnant « Site statique ».
3. Choisissez le dépôt que vous souhaitez déployer.
4. Gardez le fil; construction de fil commande build dans les paramètres de construction. Malheureusement, cela ne fonctionne pas avec npm ci; npm exécuter la construction comme le font d’autres services. Remplacez le « Répertoire de publication » par dist et cliquez sur « Créer un site statique ».
5. Après un certain temps, Render déploiera le code.

Voici le live URL de Render.

Avantages et inconvénients

C’est vraiment rapide, mais cela ne fonctionne pas bien pour notre projet avec les commandes `npm ci` et `npm run build`. Seul le « fil » semble fonctionner.

Surtension

Contexte

Surge existe depuis un certain temps maintenant. Dès le départ, leur service est simple à utiliser et il suffit d’une ou deux commandes pour déployer votre site Web statique. C’est gratuit, mais propose un forfait payant de 30$/mois. C’est le stoïcisme de l’outil qui le fait briller. Aucune configuration complexe n’est nécessaire, installez simplement « surge » et exécutez-le avec « surge ».

Comment utiliser

1. Pour vous préparer, exécutez npm exécuter la construction pour générer des fichiers statiques à l’intérieur dist annuaire. Le montée subite les utilisera pour le déploiement.
2. Courir npm install –surtension mondiale
3. Ensuite, courez montée subite.

Quelques points à noter :
Si c’est la première fois que vous l’exécutez, vous devrez créer un compte avec Surge. Ne vous inquiétez pas, c’est facile. Entrez simplement votre e-mail et le mot de passe souhaité.

Ensuite, il vous sera demandé de saisir « projet », qui devrait être le chemin d’accès au dist annuaire. Vous pouvez simplement ajouter dist au chemin qui vous est donné si vous avez exécuté une surtension dans le dépôt que vous déployez.

Ensuite, saisissez le futur URL de votre site Web. Essayez quelque chose d’unique parce que quoi montée subite proposé n’a pas fonctionné pour moi.

Après l’entrée URL, le montée subite déploiera le contenu de dist au URL spécifié. Voici ce que j’ai obtenu :

Avantages et inconvénients

C’est rapide et simple et ne nécessite pas l’adoption d’une interface distincte, mais il ne suggère pas de URL disponible pour votre application.

Temps de déploiement pour chaque service d’hébergement

Nos 3 meilleurs services d’hébergement React gratuits

1. Netlifier
2. Vercel
3. Surtension

Points clés à retenir

Après avoir testé chacun de ces services d’hébergement d’applications React gratuits, nous pensons que Netlify est le meilleur du groupe. Il fournit des déploiements rapides avec de nombreuses fonctionnalités dont vous pourriez avoir besoin. Juste après se trouve le Vercel qui possède de nombreuses fonctionnalités et est assez rapide après le déploiement initial. Ensuite, nous avons Surge qui est un outil de déploiement minimal qui peut être assez bon marché si vous décidez de mettre à niveau.

Automatisez la création de votre frontend et expédiez votre application 10 fois plus rapidement. Apprendre encore plus.