Gatsby Cloud Docs

Getting started with Gatsby Cloud and Flotiq

Learn how to connect Gatsby Cloud with Flotiq

Table of Contents

What are Gatsby Cloud and Flotiq, and why use them together?

Flotiq is a headless CMS that content editors can use to edit and publish content. Gatsby Cloud allows you to integrate your site with Flotiq in order to run performant builds and preview content changes made in the CMS before publishing.

Setting up a Flotiq and Gatsby site

First, you’ll need a Gatsby site with a gatsby-source-flotiq source plugin pulling data from Flotiq. If you haven’t set that up yet, you can quickly create a new project by using on of their various starters (blog, event calendar, e-commerce, recipies, portfolio) and signing up for an account at flotiq.com.

Signing in to Gatsby Cloud

Select Sign in with GitHub. You’ll be asked to authorize the Gatsby Cloud app with your GitHub account. If you need to request access to one or more repositories, you can click “request access” here or later, when creating an instance.

Once signed in, configuring Gatsby Cloud with Flotiq requires several steps that are walked through below.

Creating an instance

Once you’ve authenticated with Cloud and GitHub, you can create an instance from the “Create a new Gatsby Cloud site” page.

Use the “I already have a Gatsby site” flow to manually integrate your site.

Add my own site

Pick your Gatsby site from the list of GitHub repositories. You can use the search input to narrow down the list.

Gatsby Cloud Add an instance page

If you don’t see your site, it might be because it belongs to a GitHub organization, rather than your personal account. You can connect a new GitHub Organization.

Note: Repositories must contain one Gatsby project configured at their root to be enabled. Gatsby Cloud works best with Gatsby version 2.20.16 and higher.

Select branch and publish directory

You’ll need to select a branch and then indicate the publish directory where the gatsby-config.js lives. If you leave the field blank, it defaults to the root of the site.

Select branch and directory

Once the branch and base directory are correct, select “Next.”

Create the instance

Integration Step - automatic or manual

Manual Integration

First, click “Skip this step” to configure Flotiq manually.

Gatsby Cloud will automatically try and detect environment variables necessary in your gatsby-config.js. However — consider adding any additional variables that automatic detection may have missed. See “Setting up Environment Variables” for more info.

Note that you will be able to add, delete, or update these later on in “Site Settings”.

Once you’ve added the necessary environment variables, you can press “Create site” which will create your instance in Gatsby Cloud!

Site is Created

After following the “Automatic Integration” or “Manual Integration” flow you now have an instance of Gatsby Cloud configured with environment variables and a provided Gatsby Preview instance you can share with your team. Woo-hoo!

Setting up Environment Variables

An environment variable references a value that can affect how running processes will behave on a computer, for example in staging and production environments. You must save environment variables in Gatsby Cloud to authorize your instance to pull source data from Flotiq.

The essential 2 environment variables needed for every project are GATSBY_FLOTIQ_API_KEY and GATSBY_FLOTIQ_BASE_URL. In some cases you will provide additional env variables for your application to work.

For example, if you’re using the Gatsby and Snipcart starter you will also provide the Snipcart API key.

Environment variables configuration in Gatsby

To obtain the Flotiq API key - in your Flotiq account click your profile icon in the sidebar and go to API keys:

Access Flotiq API keys

You can either select the application-wide read-only key:

Use global read-only

or as a safer option, create a scoped read-only API key that will only be used for the purpose of Gatsby Cloud, read more about Flotiq API access.

Copy the Read-Only key and paste it in Gatsby Cloud settings as GATSBY_FLOTIQ_API_KEY. For the GATSBY_FLOTIQ_BASE_URL put https://api.flotiq.com.

Click Save once you’ve entered you’re variables

Select Create Site and wait for the first preview instance to be created.

Note: Flotiq doesn’t enforce any particular way of selecting drafts or non-public versions of your pages. The Read-Only key you copied will give you access to all your content. If you’d like to setup draft and public versions of your pages - you can do so by adding an extra field to your content types and querying for it in you GraphQL queries.

Webhooks: Configuring your Flotiq site to work with Gatsby Cloud

Installing the Gatsby plugin on Flotiq

Open up your profile menu and select Plugins.

Flotiq plugins

On the next screen click on the Add to your plugins button next to Gatsby Preview.

Adding Gatsby Preview plugin to Flotiq

Next - fill in the details from your Gatsby Cloud instance and click Save changes to finish your Gatsby Preview setup.

Setting up Gatsby Preview in Flotiq

Configuring Gatsby Preview plugin

The 2 elements you will need to copy from Gatsby Cloud is the Preview instance URL:

Gatsby Preview Instance URL

and the Preview Webhook URL:

Gatsby Preview Webhook URL you will paste both of them in Flotiq Gatsby Preview plugin settings, don’t forget to click the Save changes button.

That’s it!

You’re done. All your content will now automatically stay in sync with your Gatsby Cloud preview instance and you will see the preview button in the Flotiq content editor.

Gatsby preview button in Flotiq editor

The Gatsby Newsletter

Keep up with the latest things Gatsby!
Loading...

Product

Why Gatsby?How It WorksIntegrationsDocumentationPricingStatus

How It Works

Bring Data From AnywhereWrite Modern AppsUnreal PerformanceOne-Click DeploymentAll Guides
Terms of UsePrivacy Policy
© 2020 Gatsby, Inc.