Full Stack Shopping Cart With MEVN Stack [Part 1]

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.

mkdir Vueexpress

Step 2: Create Server sub folder .

Install Express Generator

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.

Products Schema
Categories Schema

Connecting to MongoDB

//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

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

categories and products collections
products collection

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’

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

Full Stack Web Developer from Morocco. Telecommunications Engineering graduate. Been working in web development since graduation.