Full Stack Shopping Cart With MEVN Stack [Part 1]

Jaouad Ballat
Mar 3, 2018 · 4 min read
Image for post
Image for post

VueJS 2.0 Nodejs Tutorial is today’s main topic. NodeJS is a viral platform nowadays because of its features and Express is a web framework build on top of Node.js. This is the perfect example of How to use VueJS with NodeJS.

One possible reason I am writing this is showcase how Node.js, Express Framework,MongoDB and modern client-side Javascript frameworks (Vue.js with Webpack) can all play nicely together. Express is still the dominant Node.js web framework.

Step 1: Make a directory for this Project.

First we need to create a directory which will contain both folders Client and Server

mkdir Vueexpress

Step 2: Create Server sub folder .

Now, create one folder called Server because all of our backend features will be stored in this folder.

Install Express Generator

Now we’re going to install Express, which is a framework that takes Node from a barebones application and turns it into something that behaves more like the web servers we’re all used to working with. We need to start with Express-Generator, which is actually different than Express itself … it’s a scaffolding app that creates a skeleton for express-driven sites. In your command prompt, type the following:

npm install -g express-generator

This command will install express-generator globally, So let’s use our generator to create the scaffolding for a website.

express server

Now we have some basic structure in there, but we’re not quite done. You’ll note that the express-generator created a file called package.json in your server directory which is a basic JSON file describing our app and its dependencies

Right now we need to install our dependencies by running this command

npm install 

It’s going to print out a ton of stuff. That’s because it’s reading the JSON file we just installing all the stuff listed in the dependencies object

You now have a fully-functioning app ready and waiting to run, so let’s test out our web server! Type the following:

npm start

Everything working? Awesome! Open a browser and head for http://localhost:3000 where you will see a welcome to Express page.

Create Products and Categoies Models.

Now, we need to create one folder in a root called models which will contain two file js for products schema and categories schema both.

Products Schema
Categories Schema

Connecting to MongoDB

Mongoose requires a connection to a MongoDB database. You can require() and connect to a locally hosted database with mongoose.connect(), as shown below.

//Import the mongoose module
const mongoose = require('mongoose');

//Set up default mongoose connection
const mongoDB = 'mongodb://';
// Get Mongoose to use the global promise library
mongoose.Promise = global.Promise;
//Get the default connection
const db = mongoose.connection;

//Bind connection to error event (to get notification of connection errors)
db.on('error', console.error.bind(console, 'MongoDB connection error:'));

Using Faker.js

Now we need to add much data to our products and categories models, for that we want to use faker.js to get some random data

Let’s start by creating a folder in routes directory called seeder which will contain products.js file, where were going to store some random data to products and categories.

Categories and products seeder

Now wee need to import this file to app.js and use it as midleware

const seeder = require('./routes/seeder/products');app.use(‘/seeder’, seeder);

To get a random data you just neet to go to:


As we can see we have two collections one for categories and other for products with some random data

Products and Categories routes:

Firstly we need to set up products and categories routes

products routes

As we can see we have created two routes for products, one to display products with pagination and other to display a specific product.

We do same with categories routes :

So, now we just need to imports it to app.js file and use it as a middleware

app.use('/products', products);app.use('/categories', categories);

yeah!! it’s working, try it by checking this url ‘localhost:3000/products’

Image for post
Image for post
products with pagination features

Finally we have set up all what we need for backend, so now we are going to checkout our frontend using Vuejs2.

part 2: https://medium.com/@jaouad_45834/full-stack-shopping-cart-with-mevn-stack-part2-2e5465359887

Backend Code: https://github.com/jaouadballat/vueexpress-2

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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