skip to Main Content
Building A Store With Vue – Part Seven:  Express API Setup
Post Series: VueJS Shop

Express API Setup is the next thing on our list. We need to now implement the Express API so we can connect our Vue Store to the MongoDB database. We do this setting up Express with the CLI tool, creating the MongoDB database and making some config tweaks.

Express Generator Setup

We assume you have Node and NPM up and running already as we have been using these tools. So we now move onto the installation of the Express Generator Command Line Interface. We do this with the following command:

npm install express-generator -g

This way it is installed globally. Next we move onto the actual setup of a template using this tool:

express --view=ejs vue-express-api

You will then see:

   express --view=ejs express-api

   create : express-api
   create : express-api/package.json
   create : express-api/app.js
   create : express-api/public
   create : express-api/views
   create : express-api/views/index.ejs
   create : express-api/views/error.ejs
   create : express-api/routes
   create : express-api/routes/index.js
   create : express-api/routes/users.js
   create : express-api/bin
   create : express-api/bin/www
   create : express-api/public/javascripts
   create : express-api/public/images
   create : express-api/public/stylesheets
   create : express-api/public/stylesheets/style.css

   install dependencies:
     $ cd express-api && npm install

   run the app:
     $ DEBUG=express-api:* npm start

This you run in your working directory. In our case inside ~/webdesign where we also have our VueJS Basics directory in which the Vue Store resides. So this is in a totally different location.

Dependencies including Mongoose

To install the dependencies you will do a:

# Install dependencies
 npm install

as usual. You will also need to install Mongoose:

npm install --save mongoose

If you now would like to start the app you run

# Start app
 npm start

App Central

Once you have done all the above you will find appp.js. The app.js file is the Express API App Central where you have a nice overview of what has been setup and what is needed. It is the Express API Setup’s core so to speak. You will see:

var express = require('express');
 var path = require('path');
 var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');

var index = require('./routes/index');
 var users = require('./routes/users');

var app = express();

// view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
 app.use('/users', users);

// catch 404 and forward to error handler
 app.use(function(req, res, next) {
 var err = new Error('Not Found');
 err.status = 404;
 next(err);
 });

// error handler
 app.use(function(err, req, res, next) {
 // set locals, only providing error in development
 res.locals.message = err.message;
 res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page
 res.status(err.status || 500);
 res.render('error');
 });

module.exports = app;

And as you can see the middleware parser Body Parser and Logger Morgan are included. You can also see basic routes, error handling and what elements will be parsed:

  • json
  • urlencode
  • cookie parser

MongoDB Database

To set up a MongoDB database we go to mLab and create and account and a MongoDB database. You can create a free sandbox one with Amazon, Google Cloud Platform or Azure.

mLab MongoDB Database

As Azure and Amazon were doing maintenance we had to wait for a status update and could not remove the database either.

MongoDB Database Created

There we made a new database using the Google Cloud Platform:

GCP Database

It stated we can connect to the database using:

#mongo shell:
 mongo ds147872.mlab.com:47872/vue-store-gcp -u  -p 
#To connect using a driver via the standard MongoDB URI:
mongodb://:@ds147872.mlab.com:47872/vue-store-gcp

We only needed to create a database user and password which we did as well using the mLab interface.

Database Credentials Configuration

Next we need to add the database details in app.js. When we ran

express --view=ejs express-api

it did not create a line mentioning add database details here as Chris mentioned in his tutorial. Nor was Mongoose imported using a const or import. so we added the import

const mongoose = require('mongoose');

and the line to register the database:

mongoose.connect(`mongodb://${process.env.DB_USER}:${process.env.DB_PASSWORD}@${process.env.DB_URL}`);

That way – using .env – we are making things more secure.

CORS

To deal with Cross Origin Request Sharing issues as we tend to have with AJAX call we have a Node solution for this using:

app.all('/*', function(req, res, next) {
  // CORS headers
  res.header("Access-Control-Allow-Origin", "*"); // restrict it to the required domain
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  // Set custom headers for CORS
  res.header('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key');
  if (req.method == 'OPTIONS') {
    res.status(200).end();
  } else {
    next();
  }
});

 

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top