Vue, GraphQL, and MongoDB Boilerplate Step by Step: Frontend Setup

By Amenallah Hsoumi - Created on March 7, 2019

In this tutorial, we will be building a Vue, GraphQL, and MongoDB boilerplate. The boilerplate should be an easy way to jumpstart a new project.

Though I don’t believe we will use it for big projects, however, it can be a good starting point for side projects, MVPs, or for learning purposes. Anyway, let’s get started!

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 – Frontend

In this we will be setting up the front-end part of our part.

Setting up the Vue app

To set up our Vue project, we will use Vue CLI v3. First of all, open your terminal and then run this command to install it:

 > npm i -g vue-cli

Consequently, we have a new command-line tool that we can use to create projects. We can create a new project by running:

 > vue create magv-boilerplate

It will ask for some configuration options, make sure they are similar to this:

vue graphql boilerplate

As a result, we will have a folder containing our app. Now, to start it we will run:

 > yarn serve

Or, if you have chosen NPM then you can run:

 > npm run serve

Finally, if we visit localhost:8080 we should see the generated example app.

Adding Vue-apollo

We will be using vue-apollo in order to consume our GraphQL backend. To set it up, we will just follow the official library guide.

First, we will run a command to add it as a module to our generated Vue CLI app:

 > vue add apollo

This will prompt us with the configuration for the library, make sure it’s similar to this:

vue graphql boilerplate
vue graphql boilerplate

As a result, a new file will be generated for us that contains the configuration of the library, alongside some code added to the main.js file to utilize it.

We will only modify the config file and specifically the URLs that connect to our backend. So inside src, let’s open vue-apollo.js and make the changes:

We have used environment variables to get the URLs we require. For that to work, we have to create a .env file in the root of our project that will contain our configuration.

vue-cli-service will recognize this file and assign its content as attributes to process.env. However, the variable names must be prefixed with VUE_APP_ to be recognized as part of the Vue app configuration. You can read more about this in the official docs.

We will also create a file called .env.example. This file will be pushed to git and anyone who clones the project can use it to create his own .env file, while the .env file will be ignored, for some security reasons:

Then, let’s update our .gitignore file accordingly:

Finally, We will prepare some folders for the future. We will be storing our GraphQL queries, mutations and subscriptions in a folder called gql, each in its own separate subfolder, exactly like this:

And change the npm script names like so:

Conclusion

We have set up the frontend part of our boilerplate, in the next part, we will be adding the backend part.

Share via
Copy link
Powered by Social Snap