Cómo implementar MERN (MongoDB, Express, React y Node.js) en Ubuntu 20.04 LTS

MERN es uno de los stacks más populares para crear aplicaciones de una sola página. Está compuesto por MongoDB, Express, React, Redux y Node.js. Lo mejor de MERN es que todas estas tecnologías admiten el mismo lenguaje tanto para el front-end como para el back-end.

A continuación, te mostramos una breve descripción de cada componente:

• MongoDB es una base de datos simple y orientada a objetos que se utiliza para el almacenamiento de datos de gran tamaño.
• Express JS es un framework de node js que ayuda a los desarrolladores a implementar rápidamente aplicaciones basadas en nodos.
• React se utiliza para el desarrollo de aplicaciones web front-end.
• Node JS es un runtime de JavaScript que permite escribir en JavaScript desde el lado del servidor.

En este tutorial te mostramos cómo desplegar una aplicación MERN en Ubuntu 20.04.

Requisitos

• Un servidor corriendo con Ubuntu 20.04 LTS.
• Uso del usuario root o un usuario con permisos para realizar sudo su.

Instalar Node.js

Por defecto, la última versión de Node.js no está incluida en el repositorio de Ubuntu. Así que tendrás que añadir el repositorio de fuentes de Node a tu sistema.

En primer lugar, instala las dependencias necesarias utilizando el siguiente comando:

apt-get install curl gnupg2 -y

A continuación, descarga y añade la clave GPG de origen de Node y el repositorio con el siguiente comando:

wget -qO- https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -

echo 'deb https://deb.nodesource.com/node_16.x focal main' | tee -a /etc/apt/sources.list

Posteriormente, actualiza el repositorio con el siguiente comando:

apt-get update -y

Por último, instala el paquete Node.js con el siguiente comando:

apt-get install nodejs -y

Una vez instalado el paquete Node.js, puedes verificar la versión con el siguiente comando:

node --version

Éste es el resultado que deberías ver:

v16.8.0

Instala el servidor MongoDB

Por defecto, la última versión de MongoDB tampoco está incluida en el repositorio de Ubuntu. Así que tendrás que añadir también el repositorio oficial de MongoDB a tu sistema.

Primero, añade la clave GPG de MongoDB con el siguiente comando:

wget -qO- https://www.mongodb.org/static/pgp/server-4.4.asc | apt-key add -

A continuación, añade el repositorio MongoDB utilizando el siguiente comando:

echo 'deb [arch=amd64] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse' | tee -a /etc/apt/sources.list

Después actualiza el repositorio e instala el paquete MongoDB con el siguiente comando:

apt-get update -y && apt-get install mongodb-org -y

Una vez completada la instalación, inicia el servicio MongoDB y permite que se inicie al reiniciar el sistema:

systemctl start mongod && systemctl enable mongod

A continuación, verifica la versión de MongoDB utilizando el siguiente comando:

mongo --version

Éste es el resultado que deberías ver:

MongoDB shell version v4.4.8
Build Info: {
     "version": "4.4.8",
     "gitVersion": "83b8bb8b6b325d8d8d3dfd2ad9f744bdad7d6ca0",
     "openSSLVersion": "OpenSSL 1.1.1f 31 Mar 2020",
     "modules": [],
     "allocator": "tcmalloc",
     "environment": {
        "distmod": "ubuntu2004",
        "distarch": "x86_64",
        "target_arch": "x86_64"
     }
}

Crea la aplicación MERN

En primer lugar, tendrás que crear un directorio para albergar tu proyecto. Puedes crearlo usando el siguiente comando:

mkdir project

A continuación, accede al directorio del proyecto y crea un archivo package.json con el siguiente comando:

cd project && npm init -y

Posteriormente, instala Express, React y otras dependencias para la aplicación utilizando el siguiente comando:

npm i express mongodb react react-dom webpack webpack-cli html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader dotenv

Luego, crea un directorio para almacenar tu código:

mkdir -p src/public

A continuación, crea un archivo index.js con un editor de texto:

nano src/index.js

Y añade el siguiente contenido en él:

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

const path = require("path");
const express = require("express");
const app = express();
const { MongoClient } = require("mongodb");

(async () => {
    const mongo = new MongoClient(process.env.MONGODB);

  try {
      await mongo.connect();
  } catch (e) {
      console.log("Failed connecting to MongoDB");
      console.log(e);
      process.exit(1);
  }
  console.log("Connected to MongoDB");
  app.use(express.static(path.join(__dirname, "../dist")));
  app.listen(process.env.PORT);
  console.log(`HTTP listening on ${process.env.PORT}`);
})();

Guarda y cierra el archivo y luego crea otro archivo llamado App.jsx:

nano src/public/App.jsx

Añade las siguientes líneas:

import React from "react";
import ReactDOM from "react-dom";

const App = () => (
  <div>
    <h1>My First App</h1>
  </div>
);

ReactDOM.render(<App />, document.querySelector("#app"));

De nuevo, guarda los cambios cerrando el archivo y crea un archivo index.html:

nano src/public/index.html

Añade las siguientes líneas en él:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First MERN Application</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Guarda y cierra el archivo. Posteriormente, crea un archivo webpack.config.js para agrupar el proyecto:

nano webpack.config.js

Con el siguiente contenido:

module.exports = {
  entry: "./src/public/App.jsx",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new (require("html-webpack-plugin"))({
      template: "./src/public/index.html",
    }),
  ],
};

Luego crea un archivo .babelrc para compilar el código React:

nano .babelrc

Con este contenido:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Crea un último archivo .env para definir la base de datos y el puerto de MongoDB:

nano .env

El contenido de dicho fichero es:

PORT=8080
MONGODB=mongodb://localhost

Y construye la aplicación con el siguiente comando:

npx webpack

Por último, inicia la aplicación con el siguiente comando:

node src/index.js

Una vez iniciada la aplicación, deberías obtener la siguiente salida:

Connected to MongoDB
HTTP listening on 8080

Acceder a la aplicación MERN

En este punto, la aplicación MERN está iniciada y a la escucha por el puerto 8080 TCP. Puedes acceder a ella usando la URL http://your-server-ip:8080, pero recuerda primero crear una regla en el Firewall de Clouding para poder acceder. Deberías ver tu aplicación MERN en la siguiente pantalla:

Conclusión

¡Enhorabuena! Has desplegado con éxito una aplicación MERN en Ubuntu 20.04 LTS.

Ya puedes empezar a desarrollar la aplicación utilizando MERN.