Build and Deploy Vue.js Static Sites using Gridsome and GraphQL
Tags: gridsome, vue, graphql, staticsites
Published: 2019-12-05 11:07:46

---
title: Build and Deploy Vue.js Static Sites using Gridsome and GraphQL
published: true
date: 2019-06-10 13:29:01 UTC
tags: gridsome, vuejs, graphql, static sites
canonical_url: https://blog.hasura.io/build-deploy-vuejs-static-sites-gridsome-graphql/
---

 **TL;DR:** Source data from your existing postgres database for your Gridsome static site. Instant setup. Tutorial/boilerplate 👉 [gridsome-postgres-graphql](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/gridsome-postgres-graphql)

![](https://blog.hasura.io/content/images/2019/06/Gridsome_blog_1.png)<figcaption>Gridsome &lt;- GraphQL &lt;- Hasura &lt;- Postgres</figcaption>

[Gridsome](https://github.com/gridsome/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](https://hasura.io/) is an [open-source](https://github.com/hasura/graphql-engine) 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](https://github.com/hasura/graphql-engine/blob/master/community/sample-apps/gridsome-postgres-graphql/README.md) 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](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/gridsome-postgres-graphql) 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:

![](https://blog.hasura.io/content/images/2019/06/gridsome-homepage.png)<figcaption>Gridsome sample app with GraphQL</figcaption>

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](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/gridsome-postgres-graphql).

Read more about [JAMStack](https://jamstack.org) 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](https://twitter.com/hasurahq), [github](https://github.com/hasura/graphql-engine) or on our [discord server](https://discord.gg/vBPpJkS).