Puis-je héberger mon application React gratuitement en utilisant react-router-dom avec Netlify?

Jan 12 2021

Mon projet:

  • React (j'utilise la create-react-appbibliothèque)
    • Utilisez react-router-domusing BrowserRouter, Route& Switchimportations. Cela me permet d'accéder à différentes URL: par exemple, lorsque j'exécute mon application sur localhost, localhost3000c'est chez moi. Une partie des fonctionnalités de mon application consiste à générer des URL de manière aléatoire - par exemple: localhost3000/123456ou localhost3000/654321.
  • Apportez des modifications à une base de données dans la base de données en temps réel de Firebase et utilise l'authentification de Firebase.

Ce dont j'ai besoin:

  • Gratuit: puisque cette application est un élément de portfolio, je pense que tout ce dont j'ai besoin est un nom de domaine qui me permet de l' utiliserreact-router-dom . Par exemple, www.anyname.comest à la maison et www.anyname/123456.comest l'un de mes itinéraires.

  • Non gratuit: s'il n'est pas possible d'obtenir gratuitement ce que je veux, je suis heureux d'acheter un nom de domaine et j'apprécierais des suggestions sur la façon dont je peux y parvenir.

Ce que j'ai recherché:

  • Netlify m'a été suggéré. Je sais que cela donne la possibilité de modifier une partie du nom de domaine, mais je ne sais pas si cela affichera mes «routes», par exemple ( nameofmychoosing.netlify.appest à la maison et nameofmychoosing/123456.netlify.appest l'une de mes routes - cela fonctionnerait-il?).

PS si ce n'est pas le bon endroit pour poster cette question, me diriger vers le bon type de forum serait très apprécié.


EDIT: je viens de découvrir ceci et cela qui dit que je dois faire une légère modification pour que netlify fonctionne react-router-dom.

Réponses

1 Deadron Jan 12 2021 at 01:04

Vous pouvez modifier librement l'URL de n'importe quelle page Web sur laquelle vous exécutez du code. La seule conséquence est le comportement des URL relatives et ce qui se passe lorsque la page est rechargée. Dans la plupart des environnements auto-hébergés, vous devriez vous sentir libre de changer tout ce qui vient après le domaine. Exhttps://www.example.com/yourrouteshere ou également utilisé https://www.example.com/page#Yourrouteshere. Il faut garder à l'esprit que si l'utilisateur actualise la page, votre backend a encore besoin de fournir une réponse appropriée. Cela peut signifier que le backend renvoie toujours la même chose quel que soit le chemin de l'URL ou cela peut signifier servir quelque chose de différent en fonction de votre cas d'utilisation.

Vous ne devriez pas modifier le domaine lui-même à moins d'avoir une configuration étrange qui repose sur plusieurs noms d'hôte pour un cas d'utilisation étrange.

Une fois que vous avez une application en cours d'exécution, vous pouvez envisager de configurer un enregistrement DNS avec un attribut CNAME à transmettre à l'hôte existant.

tonitone120 Jan 13 2021 at 00:14

Je suis capable, avec Netlify, héberger mon application réagir pour une utilisation libre et faire de react-router-dompar i) la création d' un fichier appelé _redirectsdans le dossier où la .htmlvie et ii) l' insertion dans _redirects: /* /index.html 200.

Il y a déjà une question et réponse SO similaire ici à laquelle j'aimerais relier ma question. Je ne sais pas comment faire cela, donc si quelqu'un pouvait me montrer que cela serait apprécié.