Build and Deploy Vue.js Static Sites using Gridsome and GraphQL

TL;DR: Source data from your existing postgres database for your Gridsome static site. Instant setup. Tutorial/boilerplate 👉 gridsome-postgres-graphql

Gridsome makes it easy to build modern JAMStack websites and PWAs with the power of Vue.js. It is fast and accepts custom data sources such as GraphQL. If you are familiar with React, the equivalent framework to build static sites would be Gatsby.

Deploy Hasura

Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.

Follow the instructions in the readme to deploy Hasura and create the tables author and article required for the app. Note the Heroku URL for GraphQL Endpoint. You will be configuring this in the app.

Clone and Run app

The demo app walks you through to build a simple blog app, listing all authors in the homepage and all articles in the articles page. You can clone and run the app for the demo.

$ git clone git@github.com:hasura/graphql-engine.git
$ cd graphql-engine/community/sample-apps/gridsome-postgres-graphql
$ yarn install

Note: This app was created using gridsome-cli which generates a boilerplate hello world app.

After installation, you will have to configure the GraphQL endpoint that you got above from Heroku.

Open gridsome.config.js and configure the url to point to the heroku app graphql endpoint. The fieldName is configured to be hasura at the root level to avoid conflict with other data sources.

module.exports = {
  siteName: 'Gridsome',
  plugins: [{
      use: '@gridsome/source-graphql',
      options: {
        url: 'http://localhost:8080/v1/graphql',
        fieldName: 'hasura',
        headers: {
          // Authorization: `Bearer ${process.env.AUTH_TOKEN}`,
        },
      },
    }]
}

Now run the app:

yarn start

You should be seeing the Gridsome app homepage looking like:

If you had added sample data to authors and articles as mentioned in the readme, you can navigate to /articles and see the data templated on the UI.

GraphQL Data Fetching

Now that you have looked at the demo app, let's look at what is happening behind the scenes. For this app, we need to fetch data from Postgres and template it on a Vue component. The data to be fetched is simple; list of articles and authors.

The GraphQL query for fetching all authors would look something like

query {
  hasura {
    author {
      id
      name
    }
  }
}

and the query for fetching all articles and the author related to the article would look something like this:

query {
  hasura {
    article {
      id
      title
      author {
        name
      }
    }
  }
}

The above query makes use of relationships to fetch related data of article (author in this case).

The routes are auto-generated based on the files in the pages directory.

Production Build

The static site can be generated using the gridsome build which generates html and javascript bundle.

Run the following command to build the assets:

yarn build

This will generate html, js and css bundles for all static pages of the app in the dist directory.

Now to serve the production app, use the command

gridsome serve

This will serve the production build at port 8080.

Deployment

The static app can be deployed to Netlify for free. Click on New site from git and choose the following settings for this app.

• Build Command: gridsome build
• Publish directory: dist

Final Thoughts

If you are into Vue and looking to build static sites, Gridsome is the way to go. With custom data source support and schema stitching with different GraphQL sources, it gives a powerful and flexible way to build modern static sites.

I have put together a boilerplate and tutorial so that you can get started quickly!

Check it out on github.

Read more about JAMStack for benefits of a static site in front a CDN.

Take the demo for a spin and let us know what you think. If you have any questions or run into any trouble, feel free to reach out to us on twitter, github or on our discord server.