DEV Community

Sandy Marmolejo
Sandy Marmolejo

Posted on

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
Enter fullscreen mode Exit fullscreen mode
  • 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);
Enter fullscreen mode Exit fullscreen mode
  • Modificar el start en el package.json (SÓLO PARA DESPLEGAR A HEROKU)
"start": "node server.js",
Enter fullscreen mode Exit fullscreen mode

Cambios en Heroku

  • Crear una nueva app en Heroku

Alt Text

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

Alt Text

Desplegando tu app desde el terminal

  • Ejecutando en el terminal de tu aplicación los siguientes comandos:
heroku login
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

  • Suscribiéndote el repositorio remoto de tu app en Heroku
heroku git:remote -a miprimeraappenheroku
Enter fullscreen mode Exit fullscreen mode

Alt Text

  • Subiendo el código a heroku
git add .
git commit -am "Subiendo a heroku"
git push heroku master
Enter fullscreen mode Exit fullscreen mode
  • Si has seguido los pasos correctamente, se inicia el despliegue y tendrías tu app desplegada en heroku :) Alt Text

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

Alt Text

Espero les sirva, hasta la próxima :)

Top comments (0)