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í 👇🏽

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

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.

En KEY ponemos el nombre de la variable que hemos configurado anteriormente en nuestro proyecto:

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.