Configurando Frontend MEVN

Introducción

En este artículo vamos a configurar el frontend para nuestro proyecto MEVN para lograrlo vamos a utilizar Vue y Vite

Prerequisitos

Para escribir el ejemplo de este artículo estamos utilizando

• node 14.16.0
• npm 7.7.5

Vamos a necesitar un proyecto Vue, en caso de que aún no tengamos uno creado lo podemos generar con el comando

npm init @vitejs/app frontend -- --template vue

Vamos instalar las dependencias para nuestro proyecto y comprobar nuestra instalación de la siguiente manera

cd frontend

npm install

La estructura de archivos de nuestro proyecto quedará de la siguiente manera

Lo siguiente será instalar vue-router

npm install vue-router@4

Generando nuestro router

Para iniciar con la configuración de nuestro router vamos a crear el componente frontend/src/components/Bands.vue

<template>
  <h1>Listado de Bandas</h1>
  <ul>
    <li v-for="(band, index) in bands" :key="index">{{ band.name }}</li>
  </ul>
</template>

<script>
import BandsService from "../services/BandsService";
export default {
  name: "Bands",
  data() {
    return {
      bands: [],
    };
  },
  mounted() {
    this.getBands();
  },
  methods: {
    async getBands() {
      BandsService.fetchBands().then(
        (response) => (this.bands = response.data.bands)
      );
    },
  },
};
</script>

Ya que tenemos nuestro componente vamos a crear nuestro archivo frontend/src/router.js

import { createRouter, createWebHistory } from "vue-router";
import Bands from "./components/Bands.vue";

const routes = [{ path: "/", component: Bands }];

const history = createWebHistory();

const router = createRouter({
  history,
  routes,
});

export default router;

Agregando el router a nuestro componente principal

Ahora vamos a modificar el archivo frontend/src/main.js , importando el router creado anteriormente

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App)
  .use(router)
  .mount("#app");

Para finalizar con la configuración de nuestro router vamos a modificar el archivo frontend/src/App.vue

<template>
  <router-view />
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Conectando el Frontend y el Backend

Para lograr esto vamos a utilizar axios en el frontend que nos servirá para realizar peticiones al backend, lo primero que haremos es instalar axios

npm install --save axios

Lo que sigue es crear el archivo frontend/src/services/api.js

import axios from "axios";

export default () => {
  return axios.create({
    baseURL: `http://localhost:3000`, // Url de nuestro Backend
  });
};

Y ahora vamos a crear el servicio encargado de hacer las peticiones frontend/src/services/BandsService.js

import api from "./api";

export default {
  fetchBands() {
    return api().get("bands");
  },
};

Habilitando CORS en el Backend

La forma más fácil de hacer funcionar CORS en Express es usando el modulo cors , y lo vamos agregar como una dependencia

cd backend

npm install --save cors

Ahora vamos a agregar los siguiente a nuestro archivo backend/app.js

...
var cors = require('cors');
app.use(cors());
...

Listo! tenemos CORS configurado

Configurando puerto en Vite

Vamos a abrir el archivo frontend/vite.config.js y agregar el siguiente código

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 8080,
  },
  plugins: [vue()],
});

Ejecutando nuestra aplicación

Vamos a ir a nuestro directorio backend y vamos a ejecutar lo siguiente

DEBUG=backend:* npm start

Lo siguiente es ir a nuestro directorio frontend y vamos a ejecutar

npm run dev

Para probar que todo está funcionando correctamente vamos a ingresar a http://localhost:8080/ y si todo a ido bien vamos ver lo siguiente

Conclusión

Listo, hemos terminado de configurar el frontend de nuestra aplicación y además lo hemos conectado con el backend (API), en el siguiente artículo configuraremos nuestra base de datos MongoDB