DEV Community

Veritechie
Veritechie

Posted on

Deploy Node + Express + Mongo Atlas con fetch de React en Heroku (MERN App)

Si has llegado aquí es porque tienes un proyecto que reúne las siguientes características:

  • Proyecto de React.JS con fetch apuntado a un proyecto de backend y deployeado con Github Pages. (Te dejo aquí el enlace al post que hice para deployear en gh-pages)

  • Proyecto de backend con Express + Node, utilizando MongoDB Atlas como base de datos.

Ambos proyectos (Front y Back) funcionan en local y se alojan en Github

En resumen, lo que tendremos al final será nuestro proyecto de react alojado en gh-pages y nuestro proyecto de back de node y express alojado en Heroku.

Deploy Backend en Heroku

1. Configurar deploy automático en Heroku

Me gustó este método porque automáticamente cada vez que hacemos un cambio en nuestro repositorio de github, este será modificado directamente en Heroku.

Para eso vamos a crear una nueva app Create new app en heroku, accedemos a la pestaña de deploy y como Deployment method usamos GitHub.

Buscamos el repositorio al que queremos conectarnos. Search. Si existe el repositorio, lo encontrará con éxito.

Un poco más abajo, en Automatic deploys hacemos click en el botón Enable Automatic Deploys

Esto quedaría mas o menos así 👇🏽
resultado

2. Configurar URI de Mongo en Heroku

Resume pasos previos para usar Mongo Atlas

  • Configurar cluster gratuito
  • bbdd mongoimport de local a una bbdd de atlas
  • Configurar usuario y contraseña de acceso a bbdd
  • Activar cluster (Network access)

Te dejo un recurso para hacer esto aquí

En la pestaña Database, le damos al botón Connect
Connect tour app

Copiamos la url

mongodb+srv://<username>:<password>@sandbox.tvib4.mongodb.net/nombreDeMiBBDD?retryWrites=true&w=majority
Enter fullscreen mode Exit fullscreen mode

Modifica el usuario y contraseña por los que has configurado. Pon el nombre de la bbdd que estás utilizando.

Volvemos a Heroku > Settings > Config Vars > Reveal Config Vars y pegamos la url en VALUE como indica la imagen.
config vars
En KEY ponemos el nombre de la variable que hemos configurado anteriormente en nuestro proyecto:
uri mongo

3. Cambios en tu backend para que funcione Heroku

Nos vamos a nuestro proyecto y vamos a configurar un par de cosas necesarias para que podamos deployear en heroku.

Dentro de Package.json

"scripts": {
    "start": "node ./archivoDeArranqueDeNode.js"
  }
Enter fullscreen mode Exit fullscreen mode

No more nodemon. Heroku va a interceptar este nuevo script que acabamos de configurar y se arrancará con npm start

Dentro de tu archivoDeArranqueDeNode.js

const PORT = process.env.PORT || 3000;

const server = app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`)
})
Enter fullscreen mode Exit fullscreen mode

Configuramos la variable de entorno PORT. Cuando despleguemos a producción queremos que escuche en el puerto que Heroku nos asigne en esta variable de entorno (process.env.PORT). Para hacerlo usamos el operador lógico or ||, lo que hace, es quedarse con el primer valor que no arroje undefined de todos los valores que pongamos separados por este operador.

Hagamos la magia, subamos estos cambios a Git y veremos en Heroku como se hace el deploy automático.

Si vamos a Heroku y accedemos a More > View Logs, veremos como nuestro PORT está escuchando en 37457.
view logs

Y en overview:
overview

Discussion (0)