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.
Step 1: Make a directory for this Project.
First we need to create a directory which will contain both folders Client and Server
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.
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
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:
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.
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://127.0.0.1/my_database';
mongoose.connect(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:'));
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.
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
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’
Finally we have set up all what we need for backend, so now we are going to checkout our frontend using Vuejs2.