Build an Online Shop with Vue

Prelude

Our example app would have still worked if we just had some static array of data somewhere. This is a practical approach to building apps with Vue. Therefore, we are going to create an API to supply us this data. After all, that's what you would expect in a real life situation.

Our backend will be responsible for providing information to our Vue frontend via an API. APIs are a way for apps to talk to each other. Major companies like Facebook, Google, Twitter, and GitHub all have APIs that we are able to use.

We'll be building our own for this course though!

You could build this with any common backend tech stack, but we will use:

  • Node: JavaScript on the server/backend. That's basically what it is, but more powerful.
  • Express: Routing framework for Node
  • MongoDB: JSON database

This stack was not chosen with a biased mind, but with the intention that it would be easier to work with considering that we have been writing JavaScript for this course.

Other supporting libraries like the following are necessary to improve productivity:

  • Body Parser: Middleware to expose body of request via req.body
  • Morgan: Logger middleware
  • Mongoose: Utility library to enhance interaction with Mongo DB.

Let's setup these tools in the next title.