Cómo implementar una aplicación React + Node en Heroku en 3 minutos sin la línea de comando

En este tutorial, realizaremos una implementación básica de la aplicación React + Node en Heroku.

Hay muchos tutoriales que hacen esto solo usando la línea de comando, así que para cambiar un poco las cosas, lo haré completamente sin la línea de comando.

Para cosas como generar aplicaciones React y Express, no tenemos más remedio que usar la línea de comandos. Para todo lo demás usaremos una GUI.

También supongo que tienes una cuenta de Github y Heroku. Ambos son gratuitos, por lo que no se preocupe por registrarse.

proyecto de muestra:

//github.com/iqbal125/react-express-sample

Configuración de React y Express

Primero, comencemos creando dos directorios llamados Servidor y Cliente.

El directorio del cliente contendrá el contenido del create-react-appcomando y el servidor contendrá el contenido del expresscomando. Esta biblioteca simplemente crea una aplicación Express simple para nosotros automáticamente, similar a create-react-app. Debe instalarse globalmente, lo que puede hacer con el comando:

npm install -g express-generator

Después de esto, simplemente ejecute estos comandos en cada uno de los directorios respectivos para instalar los proyectos iniciales:

npx create-react-app app1en el directorio de clientes

expressen el directorio del servidor

Cambie al directorio app1 generado por create-react-appy ejecute:

npm run build

Esto generará una versión de construcción de producción del proyecto que está optimizada para una implementación de producción, con cosas como el código de manejo de errores y los espacios en blanco eliminados.  

Nota: En una compilación de desarrollo, usaría un proxy para // localhost: 5000 para comunicarse desde su aplicación React a su servidor Express, pero aquí la aplicación React y el servidor Express son solo un proyecto. El servidor Express sirve los archivos React.

A continuación, corte y pegue todo el directorio de compilación en el directorio del servidor . La estructura de su proyecto debería verse así:

Ahora podemos agregar algún código para que nuestro servidor Express sepa que sirve a nuestro proyecto React:

.... app.use(express.static(path.join(__dirname, 'build'))); app.get('/*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); .... 

La primera línea de código sirve todos nuestros archivos estáticos desde el directorio de compilación .

La segunda parte del código es mantener funcional el enrutamiento del lado del cliente. Este código esencialmente sirve el index.htmlarchivo en cualquier ruta desconocida. De lo contrario, tendríamos que reescribir todo nuestro enrutamiento para que funcione con esta configuración de servidor Express.

Para probar su aplicación, simplemente ejecútela npm starten el directorio del servidor y vaya a // localhost 3000 en el navegador. Entonces deberías ver tu aplicación React en ejecución.

Ahora estamos listos para cargar este proyecto en GitHub.

GitHub

En lugar de usar la línea de comando para cargar en GitHub, lo haremos con la GUI. Primero, vaya a la página de inicio de GitHub y cree un nuevo repositorio. Nómbrelo como desee, pero asegúrese de que Inicializar este repositorio con una opción README marcada:

A continuación, cargue todos los archivos del proyecto sin el directorio node_modules .

Haga clic en confirmar y hemos terminado. Sus archivos de proyecto cargados aparecerán en GitHub así:

Ahora podemos pasar a configurar Heroku.

Heroku

Vaya al panel de Heroku, cree una nueva aplicación y asígnele el nombre que desee.

A continuación, vaya a la pestaña Implementar y seleccione GitHub en Método de implementación:

Si aún no ha conectado su cuenta de GitHub a su cuenta de Heroku, se le indicará a través del flujo de autenticación de GitHub.

Después de esto, busque su proyecto en GitHub y conéctese a él:

Finalmente, podemos implementar nuestra aplicación haciendo clic en el botón Implementar rama:

Heroku instalará todos los módulos de nodo automáticamente. Puede ver su proyecto haciendo clic en el botón Ver.

Y eso es todo, ¡hemos terminado! Gracias por leer.

Conéctese conmigo en Twitter para obtener más actualizaciones sobre futuros tutoriales: //twitter.com/iqbal125sf