Starter template for a MEVN ( MongoDB, ExpressJs, VueJs v2, NodeJs ) Stack Application. ( Part 1 )

Prerequisites for this guide:

• Basic knowledge of Javascript
• Node.js / NPM installed
• MongoDB installed

The following frameworks, and modules are required for this tutorial:

• Node.js ( I use v10.3.0)
• Express.js
• MongoDB
• Mongoose.js
• Vue.js
• Vue-CLI
• Terminal or Node.js command line
• IDE or Text Editor ( I use Visual Studio Code )

If you don’t have nodejs installed, katopz explained it really well in this link .

If you don’t have mongodb installed, here it is.

Let’s get started.

First we need to create a folder in our working directory. It can be anywhere you desire. Personally I have my own folder of nodeJs projects.

mkdir nodejs-projects && cd nodejs-projects

For the frontend part, we are going to use VueJS and to build up the template files we are going to install VueJs CLI Globaly ( Command Line Interface ), which later we can initiate a VueJs project with command line.

npm install -g vue-cli

After installing Vue-CLi , check your globally installed vue cli version. My current version is .

vue --version

Next, we need to create a new application folder using Vue-Cli which we already installed it’s terminal globally. In your ‘projectname’ folder go ahead open terminal and type this command.

vue init webpack projectname

You will get the questions like below, just leave all by default.

After installing project template files, navigate to ‘projectname’ , install project dependencies (included in package.json ) and run the application.

cd projectname
npm install
npm run dev

Now, open your preferred browser then go to this address http://localhost:8080, to test if the application is working and you should see this screen with Vuejs logo in the middle.

You can see a “#” hash tag at the end of url which is automatically added. This is because the default VueJS Router is configured to be : ‘mode : hash’. To remove the “#” tag at the end of the url, in your favorite text editor open

projectname/src/router/index.js 

and between line 7 and 8 add this piece of code.

mode: 'history',

and finally it should look like this :

Now navigate again to ‘http://localhost:8080’ and you will not see that “#” at the end.

Please read more about History Mode in Vuejs Documentation.

Now let’s start creating the backend for our application.

To start creating our backend part of the application, we are going to create a folder “server” inside “projectname” which will hold all backend related folders and files .

mkdir server && cd server

Inside server folder, we need to create a new package.json file. With the help of npm , we can create a simple default package.json. Open terminal inside “server” folder and type.

To get a default package.json, run npm init with the --yes or -y flag:

npm init --yes

This should create a package.json file, inside ‘projectname/server/’ and if you open package.json it should look like this.

{ 
   "name": "server",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Next thing we nee to create an “app.js” file that will hold server configuration data.

In ‘projectname/server/’ create a folder ‘src’ and inside it create app.js file.

mkdir src && cd src
touch app.js

This will create a blank app.js file which we need to require all server dependencies and later initiate this file in package.json file that we created before.

To check if everything is going well with our steps, let’s open app.js we just create and add this piece of code at the beginning .

console.log('It works');

Then inside of server folder package.json file add this piece of code between line 6 and 7 .

"start": "node src/app.js",

and the complete package.json file should look like this.

{ 
   "name": "server",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "start": "node src/app.js",
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

This will tell package.json file that there is a npm command with “start” that will look at app.js folder.

Now in server folder in terminal run

npm run start

At the end of the terminal , you should see It works string that we added on our app.js file.

If we do any changes in server folder files, we will need to stop the server and start it again. To do this automatically, we need to install Nodemon which is a utility that will monitor for any changes in your source and automatically restart your server.

In ‘projectname/server/’ run this command in the terminal

npm i --save nodemon

Then open package.json file and edit the start script with this code

"start": "nodemon src/app.js",

Now whenever you run npm run start — you don’t need to stop and rerun the server again. Nodemon detects all your changes in source code and refreshes the server itself.

Now we need to install our backend dependencies starting with express.js

In ‘projectname/server/’ folder run the command

npm i express --save

This will install express.js inside ‘node_modules’ folder inside server folder and add this as dependency in package.json file.

Now if you open package.json file located in server folder you should see this piece of code added at the end of file.

For making HTTP requests we also need to install some other middleware dependencies like :

• Body Parser ( Parse incoming request bodies in a middleware before your handlers, available under the req.body property )
• Cors ( CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options )
• Morgan ( HTTP request logger middleware for node.js )

npm i --save body-parser cors morgan

Now your package.json file should look like this.

Now to use this dependencies we need to import them in our app.js file. Go ahead and paste this code in ‘projectname/server/src/app.js’ file.

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const app = express()
app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())
app.set('port', process.env.PORT || 8081);
app.listen(process.env.PORT || 8081)

Till now we have build our initial frontend and backend skeleton. You can see the frontend part if you visit http://localhost:8080 and the backend part with http://localhost:8081.

In the next part which will come soon, you are going to achieve this things :

• Create Frontend routes
• Install Axios ( Promise based HTTP client for the browser and node.js )
• Install MongoDB and MongoDB Compass ( The GUI for MongoDB. Visually explore your data)
• Install Mongoose ( Which provides a validation and modeling layer to the app. It also adds some helpers to the native Mongo driver.)
• Install Nodemailer ( We will send e-mails with Node.JS )

and more…

Stay tuned…