Series Este artículo forma parte de una serie sobre Introducción a MEVN.

Configurando el Backend MEVN

Adrian Galicia • April 15, 2021

javascript mevn vue

Introducción

En este artículo vamos a configurar el backend para nuestro proyecto MEVN para lograrlo vamos a utilizar ExpressJS y Express generator

Creando la estructura

Lo primero que haremos es instalar las dependencias

sudo npm install express-generator -g

Vamos a usar el generador para nuestro backend

express --git --view ejs backend

Ahora ingresamos al directorio backend e instalamos las dependencias

cd backend && npm install

Para comprobar que la instalación es correcta ejecutamos el comando

DEBUG=backend:* npm start

Visitamos la url http://localhost:3000/ y el navegador mostrará la siguiente vista

express-curl-output

Configurando una nueva ruta en nuestra API

Vamos a crear el archivo routes/bands.js y en el vamos a escribir el siguiente código

var express = require("express");
var router = express.Router();

/* GET bands listing. */
router.get("/", function (req, res, next) {
  res.send({
    bands: [
      {
        name: "Hammerfall",
        songs: [
          {
            name: "Bushido",
          },
          {
            name: "Renegade",
          },
        ],
      },
      {
        name: "Helloween",
        songs: [
          {
            name: "I want out",
          },
          {
            name: "If i could fly",
          },
        ],
      },
    ],
  });
});

module.exports = router;

Ahora vamos a agregar lo siguiente a nuestro archivo app.js

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var bandsRouter = require("./routes/bands");

var app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/bands", bandsRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

module.exports = app;

Iniciamos nuestro servidor para probar nuestra ruta

DEBUG=server:* npm start

Una vez iniciado nuestro servidor hacemos la siguiente petición

curl localhost:3000/bands | jq '.'

Si todo a ido bien veremos lo siguiente

express-welcome-page

Conclusión

Listo, hemos terminado de configurar el backend de nuestra aplicación, en el siguiente artículo vamos a configurar el frontend y lo conectaremos con el backend que hemos configurado.