Tu primera app en la nube. ReactJS + Express app + Heroku — Parte 1
En los próximos minutos deployarás una Express app en la plataforma heroku. Esta tutorial básico te puede servir para empezar a probar en la nube tus aplicaciones si es que tienes ganas de empezar con ReactJS y Express. Que empiece la diversión! 🙌
Cuenta gratis en heroku
Empecemos. Lo primero ve a Heroku y create una cuenta gratuita.
Heroku toolbelt
Luego instalamos heroku toolbelt que nos servirá para poder deployar nuestra app desde la consola. Las instrucciones están aquí. Pero si estas en mac es tan simple como ejecutar el comando:
brew install heroku
Express app
Ahora crearemos una carpeta para nuestra Express app:
mkdir heroku-express-react; cd heroku-express-react
Inicializamos nuestro proyecto en npm con:
yarn init -y
Vamos a necesitar dos paquetes: Express para el app obviamente y faker para crear usuarios falsos 😈
yarn add express faker
Hasta este punto ya tenemos todo listo para empezar a desarrollar nuestra app. Ahora crearemos nuestra app que sera el archivo index.js.
En el archivo package.json debemos agregar el script start para decirle a Heroku como iniciar nuestra app:
Hora de la prueba
Levantamos nuestra app con el comando:
yarn start
Ahora abrimos el navegador y ponemos http://localhost:5000/api/users . Deberíamos ver un array con los usuarios falsos, así:
Continuemos entonces…
Configurar el app en heroku
Antes que nada para subir el app a heroku, necesitamos que esta se encuentre en un repositorio, así que crearemos uno.
git init
echo node_modules > .gitignore
git add .
git commit -m “Initial commit”
Vamos a crear el app gratuita con heroku con el siguiente comando. Te pedirá tu usuario y password de la cuenta de heroku que creamos al iniciar este tutorial 😅, asumo que ya la tienes 😛.
git push heroku master
En las ultimas lineas veras un mensaje como este:
La dirección que he señalado en rojo es el nombre de tu servidor en heroku. Si vamos a: TU_SERVIDOR/api/users/ vamos a ver el app corriendo en la nube:
En la segunda parte vamos a crear el frontend de esta aplicación usando create-react-app que es un boilerplate de facebook para crear tu primera app en reactjs.
¡Hasta la próxima!
