Photo by Fatos Bytyqi on Unsplash

Creating a ToDo App with a MEVN Full Stack (Part 1)

VueJS is going to continue to rise in popularity, so it’s important to know how to integrate this Javascript framework with frequently-used technology like MongoDB, Express, and Node.

Creating Your Project

First, we’re going to setup the project structure. A MEVN stack, like all full stacks, will have two separate parts: a client-side for frontend framework and a server-side for backend calls.

mkdir client
mkdir server

Setting Up Your Vue Frontend

First off, make sure you have Vue-Cli 3 and Vue Cli-Init installed on your system. Then, while still in the root folder, type the following command to setup your frontend.

vue init webpack client
cd client
npm install
npm run dev
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {

}
}
}
</script>
<style>
</style>

Setting Up Your Backend

First, we’re going to have to navigate over to our server folder from our client folder using the command cd ../server/ .

{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"keywords": [],
"description": ""
}
"scripts": {
"start": "./node_modules/nodemon/bin/nodemon.js src/app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
npm install --save express body-parser cors morgan
Your file structure for server (hopefully)
// import dependencies
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const app = express() // create your express app// make app use dependencies
app.use(morgan('dev'))
app.use(bodyParser.json())
app.use(cors())
app.listen(process.env.PORT || 8081) // client is already running on 8080
// import dependencies
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const app = express() // create your express app// make app use dependencies
app.use(morgan('dev'))
app.use(bodyParser.json())
app.use(cors())
app.get('/todo', (req, res) => {
res.send([
'Thing 1',
'Thing 2'
])
})
app.listen(process.env.PORT || 8081) // client is already running on 8080

Routing to Your First Page

Navigate back over to the client/src folder and create two folders: one named components and one named router . The components folder will store all of the components for the app, and the router folder will store all of information that allows for the app to have multiple pages.

<template lang="html">
<div>
<ul>
<li>
Hello World
</li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css"></style>
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ToDo from '@/components/ToDo'
Vue.use(Router)export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
{
path: '/todos',
component: ToDo
}
]
})

Using Axios to Connect Client and Server

To allow our client to communicate with our server and vice-versa, we will use axios — a package that can make HTTP requests to a node server.

import axios from 'axios'export default() => {
return axios.create({
baseURL: `http://localhost:8081/` // the url of our server
})
}
import API from '@/services/API'export default {
getToDos () {
return API().get('todo')
}
}
<template lang="html">
<div>
<ul>
<li v-for='todo in todos'>
<span>{{todo}}</span>
</li>
</ul>
</div>
</template>
<script>
import ToDoAPI from '@/services/ToDoAPI.js'
export default {
data () {
return {
todos: []
}
},
mounted () {
this.loadTodos()
},
methods: {
async loadTodos () {
const response = await ToDoAPI.getToDos()
this.todos = response.data
}
}
}
</script>
<style lang="css"></style>
Found at http://localhost:8080/#/todo
  • A Node/Express server
  • Axios communicating data between the client and server
  • The client using Axios to get and render the data from the server

teaching web dev at https://learnvue.co | sharing my content creation tips at https://mattmaribojoc.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store