8 free React hosting services for your app

Reading Time: 11 minutes

Así que creaste una aplicación React, pero no estás seguro de cómo ni dónde alojarla. En este artículo, lo guiaremos a través de 8 servicios de alojamiento gratuitos de React y le mostraremos cómo implementamos esta aplicación React usando cada uno y contarle lo que aprendimos en el proceso.

Construimos nuestra aplicación en Figma usando el Anima complemento, que nos permitió agregar funcionalidad, comportamiento receptivo y medios enriquecidos, luego exportar código React listo para desarrolladores para toda la interfaz de usuario. Nos llevó un día diseñarlo e implementarlo.

Dónde alojar su aplicación React de forma gratuita

Existe un número creciente de soluciones de alojamiento sin servidor gracias al auge de marcos basados en componentes como React. Amazon AWS, Microsoft Azure y Google Cloud son actualmente las plataformas dominantes. Sin embargo, hay un cambio creciente hacia servicios de hosting frontend dedicados que requieren menos esfuerzo y pueden ponerlo en funcionamiento en poco tiempo, y la mayoría incluye CI/CD. Estos son los 8 servicios gratuitos de alojamiento de aplicaciones React que probamos:

1. Netlificar

2. Vercel

7. renderizar

8. oleada

Profundicemos en estos servicios gratuitos de alojamiento de aplicaciones React con más detalle y demostremos cómo implementamos una aplicación React usando cada uno de ellos.

Netlificar

Antecedentes

Netlify se fundó en 2014 y se centró desde el principio en alojar sitios web estáticos. Atrajo a muchos desarrolladores debido a su generoso nivel gratuito. Un par de años después, Netlify creció hasta convertirse en uno de los servidores de sitios web estáticos y JAMstack más populares que existen.

como usar

Lo ideal es que te registres o inicies sesión con GitHub. Esto garantiza que pueda acceder a los repositorios de su perfil e implementarlos rápidamente.
Una vez que haya iniciado sesión, haga clic en «Agregar nuevo sitio» y elija «Importar un proyecto existente».
Luego haga clic en GitHub como su proveedor.
Elija el «sitio web del banco» o cualquiera que sea el nombre de su proyecto.
Ajuste la configuración de implementación (en el caso de nuestro sitio web, los valores predeterminados funcionan perfectamente) y luego haga clic en «Implementar sitio».
Una vez implementado, podrá verlo en un URL público que podrá compartir con el mundo. ¡Hurra!

Aquí está la aplicación en vivo implementada en Netlify.

Pros y contras

Netlify es fácil de configurar e implementar, sin mencionar que es uno de los servicios más rápidos que probamos aquí. Una desventaja es que si necesitas colaboradores y/o un equipo, debes actualizar a un plan pago.

Vercel

Antecedentes

Vercel (originalmente conocido como Zeit) se fundó en 2015 y rápidamente saltó a la fama. Son los mantenedores de Next.js, un marco popular React para crear sitios web. Ofrecen un nivel gratuito para sitios web no comerciales, así como formas de utilizar su red Edge para funciones sin servidor.

como usar

Inicia sesión o regístrate en GitHub.
Haga clic en el menú desplegable «Agregar nuevo…» y seleccione «Proyecto».
Elige la «web-banco» o tu proyecto React favorito.
Seguimos los valores predeterminados para la configuración de implementación y luego hicimos clic en «Implementar».
Después de un tiempo, implementamos el sitio web.

Aquí está el URL en vivo.

Pros y contras

Vercel necesita algo de tiempo para almacenar en caché la parte de instalación del proceso de implementación, pero después de eso, es uno de los servicios más rápidos. Muestra implementaciones de vista previa para cada rama que inserta y lo hace rápidamente gracias al almacenamiento en caché.

AWS amplificar

Antecedentes

AWS es una colección masiva de productos en la nube y Amplify se anuncia como una manera fácil de conseguir algunos de ellos. Con AWS Amplify, puede crear, enviar y alojar rápidamente aplicaciones de pila completa en AWS, con la flexibilidad de aprovechar la amplitud de los servicios de AWS a medida que evolucionan los casos de uso.

como usar

Regístrese o inicie sesión en AWS, luego busque AWS Amplify y haga clic en «Comenzar».
Elija GitHub y autorícelo (solo lo permití para el repositorio “banco-sitio web”).
Seleccione el repositorio en la sección «Repositorios actualizados recientemente».
1. En la configuración de compilación, tendremos que cambiar el directoriobase para que nuestra aplicación sea dist. así: Entonces, la configuración de compilación debería verse así:
En el siguiente paso, haga clic en «Guardar e implementar».
Después de un tiempo, el sitio web estará implementado y listo para usar.

¡Y estamos en vivo! Aquí está el URL.

Pros y contras

Tienes que editar el directoriobase en la especificación de implementación: no se reconoce de fábrica. La interfaz de usuario parece un poco torpe, pero es una preferencia personal. Existe un enorme potencial para AWS Amplify porque muchos otros servicios web de AWS están al alcance de la mano.

base de fuego

Antecedentes

Firebase es un servicio de Google mejor conocido como plataforma de almacenamiento en tiempo real. Pero también tiene una opción de alojamiento para sitios web estáticos y microservicios Express.js o API, y admite versiones preliminares de URL para las sucursales en las que está trabajando su equipo. Al igual que Netlify, Vercel y otros, ofrece el contenido implementado a través de una red CDN.

como usar

Instalar herramientas-firebase con npm install -g herramientas-firebase.
Inicie sesión en Firebase con iniciar sesión en base de fuego. Una vez que inicie sesión, debería ver un mensaje como este:
Vaya al directorio del proyecto y ejecute inicio de base de fuego, deberías ver algo como esto: Elija la opción para configurar archivos para Firebase Hosting con implementaciones de acción GitHub opcionales. Luego, puede crear un proyecto directamente desde la CLI o usar Firebase UI para hacerlo y luego conectarlo. Creamos el proyecto desde la línea de comando, y así es como respondimos las preguntas resultantes: Después de eso, se crearán archivos simples `firebase.json` y `.firebaserc`.
Entonces, corre despliegue de base de fuego para implementar realmente los archivos desde el dist.directorio. Si falta el directorio, asegúrese de ejecutar compilación de ejecución npm primero en generar archivos. el despliegue de base de fuego El comando debería generar una salida similar al ejemplo siguiente:

Ahora puedes ver el sitio web en el URL proporcionado. ¡Hurra!

Pros y contras

Firebase es bastante simple, pero cuando lo configuras dentro de tu proyecto, las preguntas que debes responder son un poco confusas. Afortunadamente, las respondimos en la sección anterior, pero requieren una comprensión de las características reales de Firebase antes de continuar. Aparte de eso, Firebase se implementa rápidamente y puede generar un URL donde puede obtener una vista previa de los archivos implementados. También puede automatizarlo fácilmente con implementaciones de acción GitHub con la CLI, lo cual es genial.

Páginas GitHub

Antecedentes

GitHub Pages existe desde hace bastante tiempo y es una forma sencilla de publicar documentos o un sitio web personal directamente desde GitHub. Es excelente para contenido estático y mucha gente lo usa para implementar sitios simples con una inversión mínima. Es de uso gratuito si su proyecto es público y es una forma rápida y económica de alojar un sitio web.

como usar

Tenga en cuenta que debe editar el aplicación.jsx donde llamamos Enrutador y agregar nombre base para que coincida con el nombre del repositorio. Entonces así es como aplicación.jsx debe mirar: Tenemos que cambiar el nombre base porque las páginas GitHub implementarán el sitio web en un URL de este formulario `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. El sitio web no funcionará correctamente sin el nombre base establecido para el reaccionar-enrutador-dom.

Después de que el código cambie, necesitamos instalar páginas-gh paquete con:
Y agregue un predespliegue y un desplegar guión para paquete.json:
Luego simplemente ejecutamos implementación de ejecución npm. Se disparará compilación de ejecución npm y lo usará páginas-gh publicar el contenido de dist. a una rama separada en GitHub llamada páginas-gh.
Finalmente, verifique si el páginas-gh se utiliza para páginas GitHub como las siguientes:

Aquí está el URL en vivo.

Pros y contras

Si está implementando un proyecto que difiere de su nombre de usuario, se implementará dentro de un subdirectorio en nuestro dominio gratuito dentro de GitHub. Luego, necesitas escribir código adicional para soportar la lógica de estar dentro de un subdirectorio.

No admite la implementación continua lista para usar en nuestro caso de uso, pero puede configurarla. Una vez configurado, los cambios se implementan rápidamente.

Páginas de GitLab

Antecedentes

Al igual que GitHub, GitLab tiene su propia solución de alojamiento y la llaman GitLab Pages. Tengo que concedérselo, es más fácil configurar una implementación continua en GitLab Pages que para GitHub Pages.

como usar

Regístrese o inicie sesión en GitLab
Agregue un repositorio a GitLab si aún no lo tiene allí. tu puedes bifurca el que agregué allí
De manera similar a las páginas GitHub, debe editar el aplicación.jsx donde llamamos Enrutador y agregar nombre base para que coincida con el nombre del repositorio. Entonces este es el cambio final: Tenemos que cambiar el nombre base porque las páginas de GitLab implementarán el sitio web en un URL de esta forma: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. El sitio web no funcionará correctamente sin el nombre base establecido para el reaccionar-enrutador-dom.
Una vez que haya editado y enviado el proyecto a GitLab, vaya a Configuración > Páginas y será recibido con un asistente de cuatro pasos para implementar el repositorio en GitLab Pages.
El primer paso del asistente es ingresar la imagen de compilación. Usaremos Node.js LTS.
A continuación, ingresaremos el comando previo a la compilación. El npmci será suficiente aquí.
Ahora para el paso de construcción. necesitamos pasar –dist-dir público porque GitLab Pages espera tener el sitio web construido en el publico directorio. No puedes salirte con la tuya con ningún otro directorio, lo siento.
Confirmar el recién generado .gitlab-ci.yml archivo que le dice a GitLab cómo implementar su sitio web.
Ahora, vaya a CI/CD -> sección Canalizaciones del repositorio y observe el funcionamiento de la canalización recién agregada.
Después de un tiempo, el trabajo de canalización finalizará y el sitio web se implementará en GitLab Pages.

Aquí está el resultado.

Pros y contras

Los paquetes se instalan lentamente y es necesario agregar código adicional para que funcionen, pero el asistente es súper intuitivo y solo tiene cuatro pasos para implementar.

renderizar

Antecedentes

Render es un nuevo chico en el bloque que se lanzó en 2019. Está tratando de alterar la forma en que las personas implementan sus servicios (incluidos los sitios web estáticos). Hasta ahora les está yendo bien y su número está creciendo.

como usar

Regístrate o inicia sesión en Render.
Cree un nuevo sitio web estático presionando el botón «Nuevo» y seleccionando «Sitio estático».
Elija el repositorio que desea implementar.
Mantenga el hilo; construcción de hilo comando de compilación en la configuración de compilación. Lamentablemente no funciona con npmci; compilación de ejecución npm como lo hacen otros servicios. Cambie el «directorio de publicación» a dist. y haga clic en «Crear sitio estático».
Después de un tiempo, Render implementará el código.

Aquí está el URL en vivo de Render.

Pros y contras

Es muy rápido, pero no funciona bien para nuestro proyecto con los comandos `npm ci` y `npm run build`. Sólo el «hilo» parece funcionar.

oleada

Antecedentes

Surge existe desde hace algún tiempo. Desde el principio, su servicio es fácil de usar y solo se necesitan uno o dos comandos para implementar su sitio web estático. Es gratis, pero ofrece un plan pago de 30$/mes. El estoicismo de la herramienta es lo que la hace brillar. No se necesita una configuración compleja, simplemente instale «surge» y ejecútelo con «surge».

como usar

Para prepararse, ejecute compilación de ejecución npm para generar archivos estáticos dentro dist. directorio. el oleada los usará para la implementación.
correr Instalación de npm: oleada global
Entonces, corre oleada.

Algunas cosas a tener en cuenta:
Si es la primera vez que lo ejecutas, tendrás que crear una cuenta con Surge. No te preocupes, es fácil. Simplemente ingrese su correo electrónico y la contraseña deseada.

Luego, se le pedirá que ingrese «proyecto», que debería ser la ruta al dist. directorio. Puedes simplemente agregar dist. a la ruta que se le proporciona si ejecutó surge dentro del repositorio que está implementando.

Luego, ingrese el futuro URL de su sitio web. Prueba algo único porque ¿qué oleada ofrecido no funcionó para mí.

Después de la entrada URL, el oleada desplegará contenidos de dist. al URL especificado. Esto es lo que obtuve:

Pros y contras

Es rápido y simple y no requiere que usted adopte una interfaz separada, pero no sugiere un URL disponible para su aplicación.

Tiempo de implementación para cada servicio de hosting

Nuestros 3 mejores servicios de hosting gratuitos para React

Netlificar
Vercel
oleada

Conclusiones clave

Después de probar cada uno de estos servicios gratuitos de alojamiento de aplicaciones React, creemos que Netlify es el mejor del grupo. Proporciona implementaciones rápidas con muchas funciones que podría necesitar. Justo después está Vercel, que tiene muchas funciones y es bastante rápido después de la implementación inicial. Luego, tenemos Surge, que es una herramienta de implementación mínima que puede resultar bastante económica si decide actualizar.

8 servicios gratuitos de alojamiento de aplicaciones React12 min read