Deploy Node + Express + Mongo Atlas con fetch de React en Heroku (MERN App)
Published: 2021-11-17 17:12:24

 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](https://dev.to/veritechie/deploy-tu-proyecto-de-reactjs-en-github-pages-1afp))

- 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](https://heroku.com).


### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkqzp6o3bkhnkbjygooc.png)

#### 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í](https://www.youtube.com/watch?v=EjQfQBf0oCw)

En la pestaña Database, le damos al botón Connect
![Connect tour app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l2vgc1ai2mhuu4mximl.png)

Copiamos la url
```
mongodb+srv://<username>:<password>@sandbox.tvib4.mongodb.net/nombreDeMiBBDD?retryWrites=true&w=majority
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx9oxbe5pyhxtezjmkkv.png)
En KEY ponemos el nombre de la variable que hemos configurado anteriormente en nuestro proyecto:
![uri mongo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvz5nxbkz576pqelgn86.png)

#### 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"
  }
```
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}`)
})
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2bjxww33c60wdutgx11.png)
 
 
Y en overview:
![overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km9spusge2ypvbmzbjns.png)