Tu primera app en la nube. ReactJS + Express app + Heroku — Parte 2
Puedes encontrar la primera parte del tutorial AQUI.
Continuemos con lo bueno. Como les he prometido ahora vamos a agregar la parte de frontend a nuestra aplicación que se comunicara con la Express app que ya hemos deployado en la primera parte de este tutorial 😃.
Resumiendo hasta ahora ya tenemos una app que generar nombres de usuarios dinámicamente a través del dominio que nos ha dado gratuitamente Heroku (Gracias por cierto por el espacio que me das y a todos los que probaremos tus servicios usando este tutorial 🙌).
Crear el app cliente
Instalaremos create-react-app con el siguiente comando:
npx create-react-app client && cd client
Debes tener instalado node >= 6 y npm 5.2+ para poder instalarlo con el comando anterior.
Ahora poder usar “/api/users/” desde nuestra aplicación en reactjs necesitamos agregar un proxy.
Dentro de la carpeta client, en el archivo package.json, agregaremos la linea proxy, que apunte al puerto 5000, esto es porque nuestro servidor de express lo hemos configurado para que corra en ese puerto, pero tu puedes correr express en el puerto que quieras y solo cambiarias aquí ese 5000 por el puerto en el que esta corriendo tu express app.
Ahora vamos a modificar el archivo App.js que se encuentra en la carpeta client:
De tal manera que quede asi:
A probar
Detenemos nuestro servidor con CTRL+C y lo volvemos a correr con el comando “yarn start”, luego haremos lo mismo dentro de la carpeta client con el comando “yarn start”.
Nos dirigimos al navegador y colocamos localhost:3000 y deberíamos ver algo como esto 😙
Deployar en heroku
Llegamos a la ultima parte del tutorial, ahora deployaremos nuestro proyecto en heroku, ya casi todo esta listo.
Hemos abierto la aplicación en localhost:3000 que es donde esta la app de reactjs, pero en heroku se levantara la de express, si intentamos correr en localhost:5000 que seria como lo correría el servidor en heroku, veremos que solo nos da una pagina en blanco y no funciona, porque hemos indicado en nuestro server, que busque lo archivos en client/build/ y yarn start no los construye en esa carpeta, para eso usaremos yarn build.
Para que heroku ejecute yarn build basta con agregar la linea #12 al package.json de nuestro server, IMPORTANTE: Al del server no al de reactjs
El script “heroku-postbuild” lo ejecutara heroku cuando termine de construir nuestro proyecto y lo que hace es entrar en la carpeta client y ejecutar el comando “yarn run build” que construirá todos nuestros assets y los colocara en la carpeta client/build para que nuestra app de express los pueda usar.
Ya con todo esto listo podemos subir nuestro archivos. Ejecutamos:
git add .
git commit -m “add client side”
git push heroku master
Y listo nos vamos a la url que nos indica nuestra consola:
Y ahi lo tienes!
Ya tienes deployada tu primer app en la nube con heroku, a partir de aquí puedes darle muchos usos y todo ya depende de tu imaginación.
Espero que hayan disfrutado este tutorial y siendo sábado aun les deseo un increíble fin de semana!
