Desplegando una app de React en Heroku

Hola a todos,

Una de las formas gratuitas y fáciles de alojar tus aplicaciones web es usando Heroku.

Para subir tu aplicación REACT debemos hacer lo siguiente:

Cambios en React

• Instalar en tu proyecto de React los siguientes paquetes

npm i express
npm i express-favicon

• Añadir un archivo llamado server.js en el root del proyecto que use express en nuestra aplicación de React

const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

• Modificar el start en el package.json (SÓLO PARA DESPLEGAR A HEROKU)

"start": "node server.js",

Cambios en Heroku

• Crear una nueva app en Heroku

• Poner el nombre a tu app y escoger la región donde quieres que se despliegue (EEUU o Europa)

Desplegando tu app desde el terminal

• Ejecutando en el terminal de tu aplicación los siguientes comandos:

heroku login

El terminal te pide pulsar cualquier tecla (menos la letra q). Esto te abrirá una ventana en el navegador para que aceptes el login.

• Suscribiéndote el repositorio remoto de tu app en Heroku

heroku git:remote -a miprimeraappenheroku

• Subiendo el código a heroku

git add .
git commit -am "Subiendo a heroku"
git push heroku master

• Si has seguido los pasos correctamente, se inicia el despliegue y tendrías tu app desplegada en heroku :)

Y aqui el proyecto desplegado
https://miprimeraappenheroku.herokuapp.com/

Espero les sirva, hasta la próxima :)