Configurando Frontend MEVN
Adrian Galicia • April 21, 2021
javascript mevn vueIntroducció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