Build a Vue, GraphQL, and MongoDB Boilerplate: Part 2

By Amenallah Hsoumi - Created on March 11, 2019

This is part two of creating a Vue, GraphQL, and MongoDB boilerplate. In the previous part, we built the frontend, in this one, we will be building the backend using Node.js and ES6 modules.

The series so far:

  1. Frontend set up
  2. Backend set up
  3. Building an example app

And the code for this tutorial is available in Github.

Project Setup – Backend

In this section we will setup the back-end part of our boilerplate.

Setting up Node with ES6

Now that our frontend is set up, letโ€™s do the same thing for the backend. We will be using Node with ES6 modules, and we will store our server-side code inside a folder called “server”.

In order to use ES6 modules, we need to set up Babel. First of all, let’s install the required dependencies:

> yarn add @babel/cli @babel/core @babel/node @babel/preset-env @babel/register @babel/polyfill nodemon cross-env --dev

Babel will use a babel.config.js file which was already generated by Vue CLI for the Vue app, However, since the preset used is for Vue, it will cause a conflict with our node app.

Thus, we will be using an environment variable that we will set only when we’re running the backend, and we’ll make a small test in the Babel config file against it to return the preset we want:

Then, We will use Nodemon to automatically restart our server on file change. We will create the nodemon.json config file that will run our app using babel-node. We will be setting the Babel environment variable using cross-env:

Here we have specified that we will watch changes for files that have .js or .graphql extensions. Furthermore, we have specified that the command to execute is babel-node, which is defined in the docs as a:

CLI that works exactly the same as the Node.js CLI, with the added benefit of compiling with Babel presets and plugins before running it.

Finally, let’s update our package.json scripts:

 Setting up Apollo-Server

Since we have used Vue-apollo in the frontend, which is built on top of apollo-client, we will be using apollo-server in the server-side. First, let’s install the required dependencies:

 > yarn add graphql mongoose apollo-server merge-graphql-schemas

Let’s go through their purpose:

Then, lets set up our main server files. The setup will:

Let’s create the schema folder, and then create a query.graphql file inside it:

This will just allow us to query for a message, and the returned value will be a string. Then, We will create the query resolver inside server/resolvers/index.js:

This will return ‘hello’ for the message query. Now, we need to provide the schema and resolver to apollo-server, we will do that in the server/index.js file:

Here, we have used merge-graphql-schemas package to merge all the .graphql files’ content inside the schema folder, into a single string. Then, we used that string as a parameter to the gql function to build the schema object. Finally, we launched Apollo-Server with the required options.

As a result, if you run:

> yarn server:dev

and go to localhost:4000, you should see the GraphQL Playground, where we can execute the message query and see the result:

vue graphql boilerplate

Connecting to MongoDB

Since we’re going to use MongoDB as our database, and Mongoose as our ODM, we need to configure them as well.

First of all, you have to run a MongoDB server on your local machine or use a remote one like the ones provided by mlab. Then, we will set up Mongoose to connect to the database:

We have restructured our code in a way that our Apollo Server will only start if we successfully connect to MongoDB.

As you may have noticed also, we have used environment variables for the MongoDB URI and also for the Apollo Server port. let’s configure those in the next section.

Environment variables

let’s use environment variables to specify the Apollo Server port and the MongoDB URI. To use .env files with node we need a package called dotenv. It will load all the variables we specify inside similar process.env to what we did with the front-end in part 1. First, let’s install the package:

 > yarn add dotenv

Then, to use it we simply require it in our main file and call the config method:

And inside the .env file we will specify the variables we have used:

GraphQL Subscriptions and PubSub

We have set up queries and resolvers, however, GraphQL also supports subscriptions, which are a way to push messages from the server to the clients. To implement it, we will use the PubSub class provided by Apollo Server. First, let’s create a file called pubsub.js in the server folder, where we will make an instance of the class and export it:

Other folders

We will create an API folder and a models folder. The API folder will hold the business logic for our backend, and it will be used by our resolvers. The models folder will host our MongoDB models. We will be using these folders in the next part. Our backend setup is done ๐Ÿ˜ƒ.

The server folder structure should look like this:

Conclusion

Who said making a boilerplate is easy ๐Ÿ˜…, thank you for reaching the end with me. I will be using this in the next part to create a small example app.

Share via