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:
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:
- graphql is needed for apollo-server,
- We will use mongoose as our ODM,
- merge-graphql-schema to merge schema files into a single string.
Then, lets set up our main server files. The setup will:
- Load .graphql files from a dedicated folder called schema
- Import resolvers from a dedicated folder called resolvers
- Launch apollo-server with the required config.
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
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
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:
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.
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:
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:
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.
I write code to solve real-world problems and build business applications as a Full-Stack developer. I enjoy being challenged and develop projects that require me to work outside my comfort and knowledge set. I’m interested in engineering, design, entrepreneurship, and startups. When driven by passion, making stuff is just fun.