In my last post in this series I added some global state via a vuex store and got the conditional admin settings set up. In this post we’re going to add a simple Express.js server to store our todos and admin options. Express.js is a lightweight web framework that supports a wide variety of plugins, and is an ideal candidate for making a quick and dirty REST API to deliver our data back and forth from client to server. It would also be useful to move away from the webpack dev server so that we can use a setup like this in a production environment. To do that, we’ll need to:

  1. Create an express server with API routes.
  2. Serve our static files compiled by webpack with Express
  3. Edit our NPM scripts to allow for a good development workflow

We’re also going to be doing some housekeeping around our package manager. Yarn is a faster alternative to NPM that caches packages locally so we don’t have to download common packages more than once. This makes Yarn faster to install dependencies than NPM. Thankfully, Yarn can read a normal NPM generated package.json file and install all the dependencies necessary for our app with no changes to the application. I’m on windows so installing yarn is as easy as installing chocolatey package manager and typing cinst yarn -y to install Yarn itself. Then I just change the directory to my project and type yarn install . This will create a yarn.lock file instead of an NPM generated package.lock file. After that we can just delete the NPM lock file, or keep it if your team uses both NPM and Yarn.

Now onto our Express server. Here’s our app.js file:

I originally had all the routes for our express server in the same app.js file, but I broke it out into it’s own separate “controller” so that I could make changes to the “/api” route in a single file. Here’s what that controller looks like:

Most of these routes just send the data that’s already in memory back to the client. In a future post, I’m going to remove the in memory data structures from this file and move them to MongoDB for persistence. For now we’ll just leave the data in memory, but we need some way to get this data to the client application. To do this, we’ll use our vuex store we created in part 2 in conjunction with a plugin for rest apis called vuex-rest-api. Go ahead and run yarn add vuex-rest-api axios -S to install the plugin we need and one of its dependencies, axios. Axios is a promise based http request module to make writing AJAX requests a little easier. I install it explicitly so that I can import and create an instance for use in our vuex-rest-api plugin. Now, in our store.js file we’ll add an import and start creating methods to get data:

In the code above, we create a ‘Vapi’ instance and append different http method functions to it to get the functionality we want. If we want to get data into our vuex store, all we have to do is invoke this.$store.dispatch(‘functionName’); in any vue component that has our store loaded. See the code below.

In the code above we call the dispatch functions to get our vuex store data when the component is mounted. This allows us to avoid getting unhandled exceptions in the rendering function for the todos. The next post will be about MongoDB and setting up persistence with mongoose ORM.