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:
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:
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.
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:
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:
We have set up the frontend part of our boilerplate, in the next part, we will be adding the backend part.
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.