Cómo subir app React a Heroku con GitHub y MongoDB Atlas

Uno de los pasos más grandes como desarrolladores web es conocer los servicios más importantes hoy en día y por esto, veremos hoy cómo subir app React a Heroku. si bien existen diferentes métodos para hacerlo y así mismo, cada desarrollador crea su forma personalizada, hoy quiero compartir contigo la forma que me está funcionando actualmente.

Nos enfocaremos en crear una app React con base de datos en Mongodb Atlas, luego subirla a Heroku por medio de Github. Este proceso tal vez tenga diferentes etapas importantes pero vamos a verlo paso a paso.

Por último al final conoceremos un método de heroku para tener el control total de la aplicación llamado pipeline, tuberías o canalización. Podemos crear app de prueba y ejecución.

Antes de iniciar

En los primeros pasos de subir la app React a Heroku correctamente, necesitamos ciertas cosas previas, tanto localmente como en servicios alojados, entonces aquí te dejo una lista:

1. Tener una cuenta en Github. Si aún no la tienes, debes crearla y si quieres ver rápidamente cómo funciona git y github aquí te comparto el post con video.
2. Versión Node Js actualizada. Haz click aquí para ver y descargar la última versión.
3. Extensión Babel Javascript para Visual Studio Code.
4. Extensión Beauty (cmd + shift + b) para arreglar código.
5. Crear cuenta en Heroku.
6. Por último, el repositorio que usamos en el video. Aquí puedes verlo: https://github.com/eduardoariasova/aplicacion-web

Adicional te comparto el comando para PARAR PROCESOS EN TERMINAL. Este comando lo sabremos bastante, entonces cada vez que veas «parar proceso», me refiero a este comando:

Control + C

Cabe resaltar que todos estos son necesarios y usados en todo el post. Entonces vamos a iniciar!

Estructura general de react

Es importante también conocer la estructura de un archivo JSX en react, ya que la usaremos prácticamente en todos los archivos. Así que cuando me refiera a la estructura de react, puedes volver aquí, copiar y pegar.

// ejemplo para página home
import React from "react";

function Home(){
    return(
        <div className="container micontenedor">
            <h1>Home prueba</h1>
        </div>
    );
}

export default Home;

Recuerda que el código va precisamente dentro del div. A menos que, en algunos casos debamos crear funciones, adicionales, estas si irán fuera del return, pero dentro de function. Solo deberás copiar, pegar y cambiar la palabra Home, por el nombre de la página actual.

Método de implementación: post y repositorio

Este básicamente es un tutorial algo extenso, por ende tendremos el apoyo del video de youtube el cual encontrarás abajo y adicional, del repositorio que deje en la sección anterior. Con el post + video + repositorio podrás ejecutar este proyecto sin ningún problema.

1 Crear y clonar repositorio

Este primer paso es fundamental porque desde aquí tendremos total control de nuestra aplicación: localmente y en ejecución de react a heroku. Por lo mismo, cada cambio que vamos realizando recomiendo que hagas commit, de esta manera podrás volver en cualquier etapa o versión funcional de la aplicación en general.

Para esto ve a tu cuenta de github:

• haz click en el + de la parte superior derecha y «nuevo repositorio».
• Puedes crearlo privado o púbico, añadir archivo readme o .gitignore.
• Una vez creado haz click en el botón verde «code» y copia la url del repositorio.
• Ve a la terminal de tu pc, selecciona una ubicación y escribe:

git clone urldelcodigo

Al terminar de clonar, abre Visual studio code, en una nueva ventana y arrastra la carpeta recién creada del repositorio hacia github, esto permitirá abrir desde el programa.

Si quieres ver este proceso más detenidamente, aquí comparto contigo el post con video para verlo.

2 Crear App React y probar

Una vez en VS Code, abre la terminal DENTRO DE Vs code, y escribe el siguiente comando:

npm create-react-app frontend

Esta línea creará la aplicación de react dentro de una carpeta llamada Frontend, dentro de la carpeta o folder principal de la app web. Una vez esté ejecutado el código, podrás proceder a abrir una segunda terminal haciendo click derecho sobre la carpeta «frontend» y luego «open in integrated terminal» en la barra lateral izquierda.

Esto anterior es bastante importante porque usaremos dos terminales durante este proyecto:

• una terminal para frontend: /frontend
• una terminal para el servidor /aplicacion-web (en el caso del repositorio y video)

Puedes tener las dos terminales abiertas sin problema en VS Code. Ahora, ejecuta el comando en la terminal de frontend:

npm start

Si todo está bien hasta ahora, verás la aplicación abrirse en tu navegador, con la dirección http://localhost/3000. Esta es la ruta por defecto de React para las aplicaciones. Antes de pasar a la siguiente etapa, aquí puedes realizar un commit, para guardar el proceso con:

git status - git add . - git commit -m 'comentario' - git push

De esta manera podrás ver ya en tu cuenta de GitHub los cambios realizados.

3 Crear y probar Servidor: server.js

El tercer paso en el proceso de subir app React a Heroku es crear el servidor el cuál básicamente controlará el sitio. Para esto, vamos a hacer lo siguiente:

• Crea un archivo llamado server.js dentro de la carpeta contenedora del respo, NO DENTRO DE FRONTEND. Puedes crear el archivo haciendo click en la carpeta y luego «new file».
• Una vez tengas el archivo, abre la terminal de frontent e inicia la aplicación react con npm start.
• Mientras está corriendo React, abre otra terminal, con la ubicación de la carpeta contenedora y ejecuta el siguiente comando:

npm init

Verás que como respuesta en la terminal, te van a preguntar ciertas cosas sobre el servidor. Puedes oprimir «enter» en todas, aunque si debes revisar que «server.js» sea el archivo fuente o inicializador del servidor. Es la segunda o tercera opción que saldrá en la terminal. Una vez aceptes todas las opciones entonces, puedes iniciar el servidor con:

nodemon server.js

4 Instalación de paquetes o módulos NPM

Para todo el proceso, vamos a utilizar ciertos paquetes o módulos tanto para frontend como para el servidor. Como has podido ver, cuando instalamos la app de react y luego el server js, se crearon 4 carpetas:

• 2 archivos json para frontned.
• 2 archivos json para server.js (o fuera de frontend).

Entonces, la instalación de paquetes o módulos será independiente. Podrás ver en la imagen anterior que hay dos terminales, como lo hemos hablado antes, entonces en la terminal de fronten, vamos a instalar: react-router-dom y axios, así:

npm i react-router-dom axios

Ejecuta el comando, espera que se instale y luego, para verificar que todo esté bien, abre el archivo «package.json» de frontend y revisa que estén ambios paquetes descritos con su versión. Ahora, para la terminal del servidor (terminal general o aplicacion-web, carpeta contenedora del repositorio), ejecuta:

npm i mongoose express body-parser cors

Estos cuatro paquetes los usaremos para pasar los datos al servidor y poder ejecutar correctamente la base de datos con mongodb. Verifica que estén correctamente instalados en el archivo json POR FUERA DE FRONTEND.

5 Creación de todos los archivos sitio web

Es muy probable que tengas un desorden de archivos en este momento en tu VS Code, por esto vamos a proceder con dos pasos:

1. Limpiar el archivo de fuente de react.
2. Crear todos los archivos que vamos a utilizar, EN BLANCO!

Eliminar archivos app react

Para el primer paso básicamente elimina todos los archivos de la siguiente manera:

• Carpeta Public: solo deja favicon e index.html. El resto puedes borrarlo.
• Carpeta src: solo deja index.js, el resto puedes borrarlo.

Crear archivos

Este paso es fundamental porque vamos a crear todos los archivos de una vez. Cuando hablo de crearlos es solamente hacer click en «new file» o «new folder» y asignar nombres con extensiones. Deja los archivos en blanco, no crees nada dentro aún y lo vamos haciendo paso a paso. Crea los siguientes archivos en las siguientes carpetas:

1. Public: styles.css.
2. src: carpeta components.
3. components: carpetas partials, paginas. Archivos: App.js y Direccionamiento.jsx
4. Partials: archivos Footer.jsx y Header.jsx
5. Paginas: Home.jsx y Registro.jsx

Una vez que tengas todos los archivos creados como en la imagen anterior, vamos a proceder.

6 gitignore

Por defecto, en la carpeta frontend verás un archivo .gitignore el cual lo instala react automáticamente, pero vamos a eliminar ese archivo y luego, crea un archivo .gitignore por fuera de frontend y vas a escribir dentro, por el momento:

node_modules

7 Modificación index html

El archivo index.html como sabemos contendrá la estructura del sitio: cabecera, cuerpo y pie de página. Entonces aquí compartiré lo que necesitaremos en la cabecera:

• script de CDN bootstrap.
• script de adaptabilidad en móvil.
• script de hoja de estilos.

Aquí comparto contigo el código. Recuerda que puedes revisar el repositorio igualmente.

<head>
    <meta charset="utf-8" />
    <!-- líneas de código adaptabilidad móvil -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- líneas de código adaptabilidad móvil  -->
    <title>React App</title>
    <!-- Hoja de estilos -->
    <link rel="stylesheet" href="styles.css" type="text/css">
    
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
  </head>

Asegúrate de tener el archivo styles.css dentro de la carpeta «public» dentro de frontend. De no ser así, crea el archivo con ese mismo nombre.

Body

Ahora, para el body, necesitamos añadir también unos scripts adicionales:

• script de bootstrap javascript
• script de archivo fuente index js

<body>
    <div id="root"></div> 
    <!-- JavaScript Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="../src/index.js" type="text/jsx"></script>
  </body>

Una vez lo tengas listo, vamos a proceder a la creación de archivos.

7 Modificación index js y App js

Ambos archivos son igual de importantes así que los hablaré en la misma sección. Para iniciar, hablemos de index js. Este contendrá el render general de todo el sitio, con el id «root» proveniente del script que ingresamos en el body de html.

Lo único que haremos será renderizar app. Para esto debemos:

• importar app desde la carpeta contenedora.
• Dejar App en el primer argumento del método render.

Aquí comparto la sección del código:

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./components/App";

ReactDOM.render( <App />, document.getElementById('root'));

App js

Por otro lado, muchos desarrolladores prefieren dentro de App js, hablando de tutoriales, desarrollar todo aquí mismo, pero en mi preferencia me gusta trabajar independiente de todo y saber dónde va cada cosa. Así mismo puedes ver cómo generalmente redirecciono entre carpetas. Así que lo que haremos será:

• Usar Router para envolver toda la aplicación: se usa en vez de BrowserRouter para mantener su interfaz de usuario sincronizada con la URL
• Un div permitirá tender el control o bueno, envolver: header, footer y direccionamiento.

De esta manera, direccionamiento será el archivo encargado de decirle a la app a donde debe ir en caso de que accedan a una ruta, y no App js. Así que este archivo queda totalmente limpio de rutas. Aquí comparto el código:

import React from "react";
import Header from "./partials/Header";
import Footer from "./partials/Footer";
// react router dom
import { BrowserRouter as Router } from "react-router-dom";
import Direccionamiento from "./Direccionamiento";


function App(){
    return (
        <Router>
            <div>
                <Header />
                    <Direccionamiento />
                <Footer />
            </div>
        </Router>
    );
}

export default App;

8 Modificando direccionamiento jsx: frontend

Como lo expliqué anteriormente, uso este archivo para controlar qué archivos se deben cargar en qué ruta, de esta manera, este será el único archivo pesado sobre rutas de todo el sitio. Cabe aclarar que hay más y mejores métodos para hacer este direccionamiento pero, este por el momento me está funcionando muy bien:

• Usamos Rutes que utiliza la parte hash de la URL (es decir, window.location.hash) para mantener su interfaz de usuario sincronizada con la URL. Como lo hacemos directamente desde home (es decir «/» y no, por ejemplo «/categorías») entonces Routes queda solo.
• Dentro, usamos Route para definir la ruta y el archivo individual que se abrirá al acceder a esta ruta.
• Dentro, usamos Route para las rutas de home y registro. Es decir que cuando entren a estas rutas o urls, va a cargar el archivo correspondiente.

De esta manera, podemos agregar todas las páginas de nuestro sitio web sin problema alguno.

import React from "react";
// react router dom
import { Routes, Route } from "react-router-dom";
// paginas
import Home from "./Paginas/Home";
import Registro from "./Paginas/Registro";

function Direccionamiento(){
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/registro" element={<Registro />} />
        </Routes>
    );   
}

export default Direccionamiento;

9 Partials: Header jsx y Footer jsx

Llegamos a uno de los puntos más importantes en este proceso de subir app react a heroku y es modificar el header y footer. Lo que haremos será:

• buscar una plantilla del header y footer dentro de bootstrap/examples
• Escogemos la que deseamos. En mi caso fue la segunda. Copiamos el código fuente de este header y lo pegamos dentro de nuestro archivo header.

Cabe resaltar que antes de pegar el código fuente tanto para el header como el footer, debemos tener la estructura jsx mencionada al inicio del post. Luego, crea un elemento <header> </header> y luego, copia y lega dentro de este.

Antes de copiar el código es importante hablar de link to. Este proviene de react router dom, y nos permite reemplazar el clásico a de html para entrar a usar a react sin problema. Como sabemos, este es un archivo jsx y tanto los enlaces, hasta las clases cambian.

De hecho, podrás ver que cambiamos class por className las cuales son la nomenclatura correcta en React, pero como lo copiamos desde bootstrap, este no está 100% modificado para react.

Existen paquetes que permiten esta transición, pero en lo personal, solo es un poco de trabajo extra para amoldarlo a react y funcionará perfecto. Aquí tejo el código, modificado:

import React from "react";
import { Link, NavLink } from "react-router-dom";


function Header() {
    return (
        <header>
            <div className="container">
                <header className="d-flex justify-content-center py-3">
                    <ul className="nav nav-pills">
                        <li className="nav-item">
                            <Link to="/" class="nav-link active" aria-current="page">Home</Link>
                        </li>
                        <li className="nav-item">
                            <Link to="/registro" class="nav-link">Registro</Link>
                        </li>
                    </ul>
                </header>
            </div>
        </header>
    );
}

export default Header;

Podemos ver que hay dos header y sé que es un error, pero al darle el fondo que verán adelante, se selecciono para este elemento html. Igualmente lo pueden modificar a voluntad. Ahora, para el caso del footer, seleccioné uno igual de sencillo, modificado solo para dos enlaces. Aquí dejo el código:

import React from "react";
import { Link } from "react-router-dom";

function Footer() {
    return (
        <footer >

            <div class="container">
                <footer class="py-3 my-4">
                    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                        <li class="nav-item">
                            <Link to="#" class="nav-link px-2 text-muted">Home</Link>
                        </li>
                        <li class="nav-item">
                            <Link to="/registro" class="nav-link px-2 text-muted">Registro</Link>
                        </li>
                    </ul>
                    <p class="text-center text-muted">&copy; 2021 Company, Inc</p>
                </footer>
            </div>

        </footer>
    );
}

export default Footer;

10 Home jsx

Aunque este archivo básicamente no tiene nada de contenido, lo creo para que veas el direccionamiento en react, entonces aquí dejo el código:

import React from "react";

function Home(){
    return(
        <div className="container micontenedor">
            <h1>Home prueba</h1>
        </div>
    );
}

export default Home;

Este solo va a mostrar el h1 como «Home prueba» y listo.

11 Hoja de estilos css

Comparto para terminar esta parte del front, la hoja de estilos que usé para el sitio. Realmente es un archivo corto pues las clases importantes vienen de bootstrap, pero si añadí un contenedor general para todas las páginas, con un padding superior e inferior, color para header y footer. Aquí está el código:

header {
    background-color: rgb(197, 197, 197);
}

footer {
    background-color: black;
}

.micontenedor{
    padding-top: 50px;
    padding-bottom: 50px;
}

12 Registro jsx: pasar datos a servidor

Hemos por fin llegado al tema principal y es pasar datos al servidor desde el front. Para esto vamos a hacerlo desde registro.

En este caso, voy primero a pasar el código y luego lo voy a explicar, así que aquí está el código:

import React, {useState} from "react";
import axios from "axios";

function Registro() {
    
    // declaración objeto inicial
    const[input, setInput] = useState ({
        nombre: "",
        email: "",
        contraseña: ""
    });
    
    // cambiar el valor por el que escribe el usuario
    function handleChange(event){
        const {name, value} = event.target;
        // guardar el valor previo.
        setInput(prevInput => {
            return {
                ...prevInput,
                [name]: value
            }
        });
    }

    // se activa cuando se oprime el botón
    function handleClick(event){
        // evita el parpadeo predefinido
        event.preventDefault();

        // crear objeto para pasar a servidor
        const nUsuario = {
            nombre: input.nombre,
            email: input.email,
            contraseña: input.contraseña
        }

        // pasar datos a servidor o bd.
        axios.post("/registrar", nUsuario);

    }





    return (
        <div className="container micontenedor">
            <h1>Registro</h1>
            <p>A continuación, puedes registrarte aquí!</p>

            <main class="form-signin">
                <form>


                    <div class="form-floating">
                        <input
                            onChange={handleChange}
                            name="nombre"
                            value={input.name}
                            type="text"
                            class="form-control"
                            id="floatingInput"
                            placeholder="[email protected]"/>
                        <label for="floatingInput">Nombre</label>
                    </div>

                    <div class="form-floating">
                        <input
                            onChange={handleChange}
                            name="email"
                            value={input.email}
                            type="email"
                            class="form-control"
                            id="floatingInput"
                            placeholder="[email protected]"/>
                        <label for="floatingInput">Email address</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input
                            onChange={handleChange}
                            name="contraseña"
                            value={input.contraseña}
                            type="password"
                            class="form-control"
                            id="floatingPassword"
                            placeholder="Password"/>
                        <label for="floatingPassword">Password</label>
                    </div>

                    <button onClick={handleClick} class="w-100 btn btn-lg btn-primary" type="submit">Registrar</button>
                    <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
                </form>
            </main>

        </div>
    );
}

export default Registro;

Entonces el código lo podemos ver en el siguiente orden:

Formulario

• Dentro de return está el formulario que copiamos desde ejemplos de bootstrap.
• Los cambios fueron: link en vez de «a» de html.
• Se adicionó a cada input el valor de onChange para crear la función handleChange: cada vez que hay un cambio en los campos, se activa la función handle Change.
• Para el botón, se crea onClick con la función handleClick: cada vez que se oprime el botón de registro, se activa handleClick.

Cabe aclarar este punto y es que cada input cuenta con un value, a este atributo se le asigna el valor de la propiedad del objeto input. Por eso podemos ver que tienen, por ejemplo: nombre, value={input.name} haciendo referencia al valor de la propiedad name.

UseState: input objeto inicial

UseState se encarga básicamente de detectar un cambio en cierta variable. Cuando ocurre el cambio, le asigna ese valor a la variable correspondiente. En este caso usamos use state para guardar lo que escribe el usuario en ciertas variables.

• Hacemos la desestructuración de un objeto usando useSate, para la variable input y el valor que cambia en setInput.
• El objeto guarda las propiedades: nombre, email, contraseña. Todo inicializados en string vacíos.

HandleChange

Esta función como lo mencioné anteriormente, se activa cuando escriben algo en los inputs, o bien, registra un evento y se activa:

• Recibe como argumento el evento que ocurre.
• Creamos la desestructuración de un objeto para guardar el atrituto nombre y value.
• Creamos dentro la función setInput con el argumento prevInput, el cual guarda el evento pasado, de esta manera cuando pasemos a la base de datos no se elimina nada.
• Dentro de la función, primero retornamos el eventoprevio y a continuación: el atributo name, con su valor.

En otras palabras: cuando ocurre un evento o cambio en los campos, se activa esta función donde, por medio del atributo «name» sabe de cuál input se trata, y así, se asigna a esta propiedad del objeto, el valor «value».

De esta manera, cuando se escribe algo, el valor de input cambia por lo que escribe el usuario.

HandleClick

Por último, esta función se activa o ejecuta cuando se oprime el botón de registro. Es decir, que queremos que envíe los datos que el usuario escribió a la base de datos, no es más y para esto:

• Usamos event.preventDefautl(); para evitar el parpadeo de formulario html predeterminado. Esta línea no puede faltar.
• Creamos un objeto el cual guardará todos los datos que el usuario escribio.
• Con el método post de axios, enviamos los datos en el objeto creado «nUsuario» a la ruta «/registrar».

De esta manera concluímos con el envío de datos desde frontend hasta el servidor.

13 Server js: recibir datos de frontend y crear base de datos

Igualmente, voy primero a copiar el código y paso a su explicación. Entonces aquí está el código:

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();
app.use(express.json());
app.use(bodyParser.urlencoded({extended: true}));
// solicitudes o declaraciones previas /////////////////


// conectar atlas
mongoose.connect("mongodb+srv://mibasededatos:[email protected]/MiAppDB", {useNewUrlParser: true});


//Base de datos
//1. Esquema
const usuarioSchema = {
    nombre: String,
    email: String,
    contraseña: String
}

// 2. crear el modelo
const Usuario = new mongoose.model("Usuario", usuarioSchema);


//Método post
app.post("/registrar", function (req, res){
    // guardar variables
    const usuarioFormulario = req.body.nombre;
    const emailFormulario = req.body.email;
    const contraseñaFormulario = req.body.contraseña;

    // 3. Crear documento
    const usuarioBaseDatos = new Usuario ({
        nombre: usuarioFormulario,
        email: emailFormulario,
        contraseña: contraseñaFormulario
    });

    //4. subir a la base de datos o guardar.
    usuarioBaseDatos.save();
});






////////// 2 fragmentos necesarios para implementar heroku

// usar estáticos cuando esta en modo produccion //
if(process.env.NODE_ENV === 'production') {
app.use(express.static('frontend/build'));
app.get("*", (req, res) => {
    res.sendFile((__dirname + "/frontend/build/index.html"));
})
}


// cambio de puerto en heroku
let port = process.env.PORT;
if (port == null || port == "") {
port = 5000;
}
////////// 2 fragmentos necesarios para implementar heroku



// react usa puerto 3000. Server debe usar otro puerto
app.listen(port, function(){
    console.log("servidor de express funcionado");
})

Este archivo es básicamente la fuente de todo pero voy a explicarlo por partes. Es claro que debemos solicitar los diferentes módulos instalados con sus correspondientes usos. Por ejemplo, usamos por medio de app, express.

Crear base de datos

La conexión de mongodb atlas la explico en la siguiente sección. Por ahora, primero creamos la base de datos basados en mongoose, de mongodb. Entonces lo primero es crear el esquema como un objeto con las propiedades: nombre, email y contraseña. Todos son String como tipo de dato.

A continuación creamos el modelo a partir de este esquema con el nombre de Usuario.

Post: recibir datos y guardar en base de datos

Lo que hacemos aquí es primero creamos un método post a partir de express, el cual guarda primero en 3 variables const los valores que se envían desde el formulario.

Usamos body-parser para traer estos datos, y con el nombre de la propiedad, guardamos en la constante, por ejemplo const usuarioFormulario = req.body.nombre;

Este anterior, guarda en usuarioFormulario, el valor de la propiedad nombre del objeto nUsario que viene desde el formulario.

A continuación pasamos a crear el documento de la base de datos, el cual creamos a partir del modelo «Usuario», con el correspondiente esquema. Entonces a cada propiedad del esquema se le asignar el valor de las constantes creadas anteriormente.

Por último, usamos save() para guardar este documento como objeto en la base de datos!

Puertos localhost (proxy) y heroku

La última sección del código es extremadamente importante para la ejecución tanto local como en heroku. Pero por el momento solo voy a explicar la ejecución localmente, cuando lleguemos a heroku hablamos de estos cambios:

• deja comentado todo el fragmento: 2 fragmentos necesarios para implementar heroku.
• En el primer argumento cambia «port» por 5000.
• en el archivo json de frontent, bajo «private» añade la siguiente línea

"proxy": "http://localhost:5000",

Esto es por que React por defecto usa el puerto 3000 y debemos usar el servidor en otro puerto. Entonces usamos el puerto 5000 y cuando trabajemos desde el pc, localmente, por medio del proxy programa correrá sin problema: tanto react como server js.

14 Conectar mongodb Atlas

Mongodb atlas hace parte del servidor, solo que lo hago aparte para poder revisar algunas cosas independientes. En la página de mongo db atlas crea una nueva base de datos con los datos mostrados en las imágenes previas. Básicamente una cuenta gratuita compartida. Una vez estés dentro de la plataforma debes continuar con los siguientes pasos.

Acceso a base de datos – usuario

Entonces, vamos a acceso de base de datos y creamos un usuario que tenga el permiso de administrador. Creamos un usuario y contraseña para el usuario y guardamos. Esta contraseña la usaremos en el código más adelante.

IP Lista blanca

Vamos a Network Access y creamos una nueva ip con la opción «allow access from anywhere». Esto nos permitirá acceder sin problema a la base de datos.

Conectar base de datos

Conectamos la base de datos creada, por medio de aplicación. Luego, nos dará un código o fragmento para pegar en nuestro código. Entonces primero copiamos y pegamos este fragmento:

mongoose.connect(<aquívalaurl> , {useNewUrlParser: true});

El framento debe ir en server.js. Igualmente arriba puedes ver el fragmento en server. Ahora, en el primer argumento vamos a pegar la url que nos dan.

Debemos hacer dos cosas una vez lo peguemos en nuestro vs code:

1. Luego de «//cluster0:» y antes de «@cluster» vamos a pegar la contraseña que creamos al crear el usuario.
2. Luego de «mongodb.net/» borramos el resto y escribimos un nombre para nuestra base de datos, por ejemplo: miBaseDeDatos.

Listo! hemos terminado con la conexión.

15 Primera ejecución

Antes de ejecutar, recuerda guardar o hacer commit, antes de continuar. Ahora la primera ejecución será de la siguiente forma:

• Primera terminal para frontend: ejecuta npm start.
• Segunda terminal para server (terminal proyecto): ejecuta nodemon server.js

Ahora, ingresa al sitio, ve a registro y escribe los datos del formulario. A continuación, ve a la web de mongodb atlas y en «colecciones» ya debes ver un primer documento generado con los datos que ingresaste.

16 Subir App React a Heroku

Al inicio del post hablamos de crear una cuenta en HEROKU. Ingresa a tu cuenta gratuita y crear una nueva app. Esta app. Una vez dentro, ve a la sección «deploy» y selecciona el método github:

• conecta tu cuenta de github.
• A continuación, escribe el nombre del repositorio en «app connected to GitHub». En tu caso estará en blanco hasta que se conecte.
• Por último, activa «automatic deploys». Esto permitirá que cada vez que guardes con push desde vscode se suba a heroku e implemente directamente.

17 Cambios en código para implementar app a Heroku

En teoría ya hemos conectado nuestra app react a heroku pero aún no la vas a ver funcionando. Para esto debemos realizar algunos cambios:

• 1. Vamos a server JS y descomentamos: 2 fragmentos necesarios para implementar heroku
• 2. en app listen, cambiamos «5000» por «port».
• En el archivo json de frontend, eliminamos la línea de proxy.

Ahora procedemos a explicar estos dos fragmentos. El primer fragmento se basa en el método producción:

• Cuando estamos en modo producción, por medio de express, usamos el archivo estático que está ubicado en la carpeta «frontend/build».
• Por ultimo cuando alguien accede a cualquier ruta de la web (*) entonces enviamos a ejecución el archivo index.html que está ubicado en la carpeta build.

Ahora, el segundo fragmento consiste en:

• Le asignamos a la variable port, el puerto local actual.
• Si este puerto no está asignado o bien, contiene una string vacía, entonces le asignamos el peurto 5000.

Ya sabemos que el puerto 5000 lo usamos para el servidor y el puerto 3000 para react.

Creamos archivo build

Lo último que debemos hacer es crear un archivo build el cual será el que contendrá los archivos estáticos del sitio y heroku usará para su implementación, entonces en la terminal de frontent, usamos el comando de react:

npm run build

Esto creará la carpeta build en nuestro frontend.

Crear procFile

Lo último es crear el archivo de procFile el cual le indica a heroku cuál es nuestro archivo de inicio. En nuestro caso es server.js.

web: node server.js

18 Subir a heroku con código corregido

Hemos terminado. Ahora podemos proceder a guardar nuestro programa con git:

• git status
• git add
• git commit
• git push

Al hacer click en push, se guardará el programa y en unos 2 o 3 minutos podrás abrir la app de heroku funcionando sin problema!

19 Pipeline Heroku

Por último veremos rápidamente cómo crear pipeline heroku. Dentro de nuestra aplicación de heroku, vamos a «deploy» y luego en pipeline, hacemos click en «choose a pipeline»:

• se abrirá un menú para selecciona o crear una pipeline.
• Crea una con el nombre que desees, pero escoge «staging», es decir va a subirse a la etapa de prueba de pipeline.

A continuación verás la pipeline, pero no verás nada en «production». Debes hacer click en «crear app» con el nombre que desees, por ejemplo: produccionapp:

• inmediatamente crees la app, bajo «Staging» veras que apareció un botón «promote».
• Este botón permitirá pasar la app de prueba a ejecución. Es decir copiará todo lo de prueba a ejecución.

Listo! ahora puedes abrir ambas apps y verás que tienes una de prueba en la cual se sube todos los cambios que realices desde vscode, y una de producción la cual ve el usuario final!

20 Recomendaciones finales

Hemos terminado completamente pero me gustaría decirte algunas cosas para finalizar:

Ejecutar localmente y en heroku es diferente, por eso recuerda que cuando trabajes desde tu pc:

• Activar el proxy en archivo json de frontend.
• dejar el 5000 en app listen.
• Comentar dos fragmentos de código: 2 fragmentos necesarios para implementar heroku

Pero cuando vayas a subir a heroku para ver cómo va la app, entonces:

• Elimina el archivo de build actual.
• elimina el «5000» de app listen y escribe «port»
• Descomenta dos fragmentos de código: 2 fragmentos necesarios para implementar heroku
• Elimina el proxy de archivo json de frontend.
• Crea un nuevo archivo build con: npm run generate.
• sube a github (y automaticamente a heroku) con git push y sus commits.

21 Mi código en funcionamiento

Al igual que ustedes, estoy aprendiendo y estudiando todos los días, por ende puede que en unos meses pueda tener un método mejor de ejecución utilizando todos los servicios. Claramente otros desarrolladores a la fecha puedan tener mejores y más limpios códigos pero espero que este sirva para los proyectos actuales de todos!

Video de Ayuda

Hice este video para ayudarte en el proceso. Si te gusta no olvides dar like y suscribirte para nuevos videos!

Producto sugerido

Si al igual que yo, pasas demasiado tiempo en un pc, puede que este producto te ayude, como yo a cuidar mis manos y a su vez, optimizar mis horas de digitalización. Te recomiendo totalmente este teclado mecánico Keychron k6. Si quieres ver la reseña completa puedes hacerlo aquí.

Conclusión

Este es uno de los métodos que uso actualmente para conectar todos los servicios en un solo proyecto. React, mongodb, hoerku y github deben si o si trabajar juntos para el bien de todos nuestros proyectos y por esto, vamos a seguir implementando pruebas para mejorar su conexión.