Build full stack web apps with MEVN Stack [Part 1/2]
[Update] I have written a book(Full-Stack Web Development with Vue.js and Node) which talks about how we can build web applications using the MEVN technology stack mentioned in this blog.
You can find more details on the book here: https://www.packtpub.com/web-development/full-stack-web-development-vuejs-and-node or grab yourself a copy from Amazon here.
If you want to learn more, here is a preview of the book:
At CloudFactory, we always strive to go an extra mile. Even though we are a Ruby first company, we like to invest in learning new technologies. While exploring full-stack development framework for a pet project we thought about MEAN and MERN but since VueJS was something new we wanted to give it a try and MEVN came to light.
Prerequisites for this guide:
- Concepts of REST and CRUD
- Node.js / NVM installed
- MongoDB installed
What to expect from this guide:
- Full stack application with MEVN architecture
- CRUD operations via Express.js
- Connect APIs with MongoDB(we will be using mongoose)
This tutorial is based on
MongoDB v3.0.5, ExpressJS v4.15.4, VueJS v2.4.2, Node.js v8.5.0.
This guide will be focused on generating a skeleton for MEVN full stack application. We will cover the Mongo part in the next tutorial. The github repo for this tutorial can be found here.
Okay, so let’s get started!
First, let’s create an application folder called
posts in the workspace:
Now, we want to set up our client
VueJS for the frontend. We will be using
vue-cli to build up the template.
npm install -g vue-cli
Now, we will be creating a separate folder of client with
vue init webpack client
(This command will ask you certain questions like project name, author, description, using eslint, using test, etc. You can just hit enter for every question.)
The command should look like this:
Now, we have a folder named
client in our application. As we can see, now we need to run
npm install inside the
client folder to install all the dependencies listed in
client/package.json file. So, let’s go ahead and do it.
npm run dev
npm run dev will open up the
http://localhost:8080/#/in the browser which renders the default VueJS template.
Now that we have set up the frontend framework, let’s move ahead on creating the backend with
express . Let’s create a
server folder in the root directory which is going to hold all the server code.
We want to initialize this server project with
npm which we can do with
npm init -f which will create a
package.json file inside the
package.json file is missing is it doesn’t have a
start command. So let’s do that first so that we can run the server with
npm start command. The
package.json file should look like this:
Now, let’s go ahead and create
src folder inside this directory and create a file called
app.js , let’s write:
and then inside
server directory in terminal, let’s run
If everything went well, we should be able to see the printed out
Hello World in the terminal.
Now we will need to install dependencies to create an
express application. Inside
npm install express --save
We will also need some of the other dependencies for making HTTP requests. So let’s go ahead and install
bodyParser, morgan and cors.
npm install --save body-parser cors morgan
src/app.js with following code:
Up to this point, what we have is a skeleton for frontend project and a skeleton for a backend project. Now we will create an endpoint in the server. Upto this point, we have a client which is running on port 8080
(http://localhost:8080) and a server which is running on port 8081
Let’s, restart the server and visit
http://localhost:8081/posts . We should be able to see the JSON formatted data.
We have to manually kill and restart our server in order to view the changes. To save some time we can install
nodemon which helps to automatically restart the server everytime we make a change in our application. So let’s go ahead and do that first.
npm install --save nodemon
scripts command in
"start": "./node_modules/nodemon/bin/nodemon.js src/app.js",
"test": "echo \"Error: no test specified\" && exit 1"
Now we don’t need to restart the npm server every time we make changes to our code.
Now let’s go ahead on creating a connection between the client and the server.
clients folder, let’s add
npm install axios --save
axios is a library which is used to make http requests to the backend.
Now let’s create a folder called
clients/src and add a new file called
Api.js which is going to be a connector between the
client and the
Let’s create a new file in the same location as
PostsService.js . This is going to be used for hitting the
posts api endpoint which we create a while ago in the
Let’s add a new page for displaying posts.
src/router/index.js should look like this:
Now that we have created a route for posts, let’s add a new view component for that route. Let’s add a new file in
When you go to
http://localhost:8080/posts , you should be able to see this:
We don’t need VueJS logo, let’s remove this line of code from
Now let’s call the posts controller from view component posts which lists all the posts that is returned by the posts api endpoint we defined earlier.
Replace the contents of
Posts.vue with this:
Now when you go to the same location
http://localhost:8080/posts , you will be able to see this:
We will be covering the database connection with Mongo and its CRUD operations in the next part.
Continue to next part: (Build full stack web apps with MEVN Stack [Part 2/2])