plaitse / vuejs-graphql-app

vuesjs-graphql-app

Full-stack JavaScript app using:

• VueJS
• Vuetify
• GraphQL
• Apollo
• Mongoose
• MongoDB Atlas

Available at this URL: https://vuejs-graphql.paulrblt.now.sh

GraphQL

• typeDefs are the definition of our schema of what we can expect from queries and mutations.
• resolvers define the functions and behaviors of how should the queries and mutations would work.
• queries are the “gets” that we want to read from the server.
• mutations are the requests that are going to affect any data that we have on our own server.

Heroku and Now settings

On Heroku's website, go to your project, click on the "Settings" tab and then on "Config Vars" and provide the content of variables.env.

On the project, go to the client folder:

• Edit the main.js file by providing the Heroku app URL https://vuejs-graphql.herokuapp.com/ with /graphql at the end. Then, comment the line import "@babel/polyfill";.
• Install the following npm packages graphql-tag graphql to prevent errors occuring during deployment.
• Add a now.json file to deploy the VueJS app as a set of static files with the following content:

{
  "version": 2,
  "name": "vue-share",
  "builds": [{ "src": "package.json", "use": "@now/static-build" }],
  "routes": [
    { "src": "^/js/(.*)", "dest": "/js/$1" },
    { "src": "^/css/(.*)", "dest": "/css/$1" },
    { "src": "^/img/(.*)", "dest": "/img/$1" },
    { "src": ".*", "dest": "/index.html" }
  ]
}

• Add the following script to the package.json: "now-build": "npm run build".
• Install the now package globally: sudo npm i -g --unsafe-perm now.
• Run now login after you've set up your account on zeit.co.
• To deploy the app run now and copy the given URL at the end of the process https://vuejs-graphql.paulrblt.now.sh.

To run each steps

Create a variables.env file at the root folder with the following content:

MONGO_URI=mongodb+srv://useradmin:[e-mail]/test?retryWrites=true
SECRET=12323JHDBZHD92NSD9JSDNJKD

The /test after mongodb.net refers to the database named "test".