Gatsby.js with Cloud CMS

Generate static sites with Cloud CMS





Building a static site with Cloud CMS content is simple with Gatsby JS. Below you will find tools and examples for how to get started.

Connecting to Cloud CMS with Gatsby

You can connect directly to the Cloud CMS API or indirectly via our app server. We offer GraphQL endpoints on each of these that can be accessed using Gatsby's gatsby-source-graphql plugin.

In your gatsby-config.js file, add one of the following configurations:

  • Connecting to the app server:
    {
        resolve: `gatsby-source-graphql`,
        options: {
            typeName: "CLOUDCMS",
            fieldName: "cloudcms",
            url: appServerUrl + "/graphql"
        }
    }
                    
  • Connecting to the API:
    const Gitana = require('gitana');
    const apolloLink = require('apollo-link-http');
    const fetch = require('node-fetch');
    const gitanaConfig = require("./gitana.json");
    
    ...
    
    {
        resolve: `gatsby-source-graphql`,
        options: {
            typeName: "CLOUDCMS",
            fieldName: "cloudcms",
            clientKey: gitanaConfig.clientKey,
            clientSecret: gitanaConfig.clientSecret,
            username: gitanaConfig.username,
            password: gitanaConfig.password,
            baseURL: gitanaConfig.baseURL,
            application: gitanaConfig.application,
            createLink: function(pluginOptions) {
                return new Promise(function(resolve, reject) {
                    Gitana.connect({
                        "clientKey": pluginOptions.clientKey,
                        "clientSecret": pluginOptions.clientSecret,
                        "username": pluginOptions.username,
                        "password": pluginOptions.password,
                        "baseURL": pluginOptions.baseURL,
                        "application": pluginOptions.application
                    }, function(err) {
                        if (err) {
                        reject(err);
                        }
                    
                        const repository = this.datastore("content")._doc;
                        const branch = "master";
                    
                        const headers = this.getDriver().getHttpHeaders();
                        
                        resolve(apolloLink.createHttpLink({
                            uri: pluginOptions.baseURL + "/repositories/" + repository + "/branches/" + branch "/graphql",
                            headers: headers,
                            fetch
                        }));
                    });
                });
            }
        }
    }
                    

Bookstore Example Site

The example site is a simple bookstore website, built using the Cloud CMS Sample Project and using Gatsby JS as a generator. It is intended for Gatsby developers to get a general sense of how Cloud CMS content might be used in their application, but is not intended for production use.

To setup the sample project:

  1. Log in to your Cloud CMS tenant at https://<yourdomain>.cloudcms.net
  2. Create a project, and select Sample Project as the project type
Bookstore Example

API Keys

Every mobile app or web site that you build will need to have a set of API Keys that it will use to connect to your Cloud CMS platform on behalf of your code. These API keys consist of client and user key/secret pairs.

  1. Log in to your Cloud CMS tenant at https://<yourdomain>.cloudcms.net
  2. From Manage Platform -> API Keys

You will now see your API Keys for all of your platform's Application instances.
You can create as many Application instances as you'd like and each will have their own set of API Keys.
Download the gitana.json file, as you will need this to provide authentication for the example applications.

For more information, visit Configuring your API Keys.

Source Code and Setup

The code for this example is available as part of the Cloud CMS SDK, which contains usages of Cloud CMS with many different languages and frameworks.

  1. To download, run git clone https://github.com/gitana/sdk.git
  2. Navigate to the gatsbyjs/sample directory
  3. Paste your gitana.json file here
  4. Run npm install
  5. Run npm install gatsby-cli -g
  6. In a separate terminal, run node appServer to run the app server
  7. Run gatsby build to build the static site
  8. Run gatsby serve
  9. The example will be hosted at http://localhost:9000