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

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

Gridsome <- GraphQL <- Hasura <- Postgres

Gridsome is a Vue.js framework that allows you to build modern JAMStack websites and PWAs. 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.

In this article, you will learn how to build and deploy a Vue.js Static Site with the following technologies:

Gridsome
GraphQL
Hasura
Postgres

Deploy Hasura Instance

Hasura is an open-source GraphQL engine that gives you real-time GraphQL APIs on new or existing Postgres databases. It comes with built-in support for stitching custom GraphQL APIs, and it also allows you to trigger webhooks on database changes.

For this tutorial, you will need to deploy a Hasura instance. You can do it by clicking on this button:

After creating the instance, follow the instructions from this README to create the required tables for the application.

Clone and Run Application

The demo app walks you through building a simple blog application. The application lists all authors on the homepage and all articles on the articles page.

You can clone and run the demo app as follows:

$ git clone [email protected]: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 cloning the app, you will have to configure the app to use the GraphQL endpoint that you got in the previous step.

Open gridsome.config.js and configure the url to point to your Hasura app GraphQL endpoint. The fieldName is configured to be hasura at the root level to avoid conflicts 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}`,
        },
      },
    }]
}

Save the file and run the app:

yarn start

Visit localhost:8080 to see the homepage:

If you added authors and articles as mentioned in the README, you should see the data templated on the UI if you navigate to /articles.

GraphQL Data Fetching

For this app, you fetch data from the Postgres database and template it on a Vue component.

The GraphQL query for fetching all authors is as follows:

query {
  hasura {
    author {
      id
      name
    }
  }
}

The query for fetching all articles and the author related to the article:

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

The above query makes use of relationships to fetch the articles and the author for each article.

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 the HTML and JavaScript bundles.

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

One way to deploy the application is to do it with 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 a great choice. With custom data source support and schema stitching with different GraphQL sources, it gives a powerful and flexible way to build modern static sites.

There is a boilerplate and a short tutorial to help you get started quickly! Check it out on G ithub.

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.