Getting Started with CloudKit and ReactJS (using Gatsby)

Hey friends,

I'm currenly building the next version of a Mac desktop app (NotePlan) and wanted to have a web version in future as well. So last weekend I planned to build the proof-of-concept version to get started and see what my users think about it (this is a great strategy to test the waters of a feature before actually building (much) of it).

I was building my landing page with Gatsby (ReactJS) already, and used the same tech for this mini-project.

1. You need to get the cloudkit.js file loaded. With Gatsby is not as easy as adding it to your index.html unfortunately, but you can use a plugin for that. I have used gatsby-plugin-load-script and added it to the gatsby-config.js.

I want to share my working results here, because it was tough to figure it out. All the tutorials on the web are for v1 of the cloudkit library and don't work. Then React/Gatsby makes it a little harder as well.

Here is how that looks like:

Inside gatsby-config.js under plugins

{
   resolve: 'gatsby-plugin-load-script',
   options: {
        src: 'https://cdn.apple-cloudkit.com/ck/2/cloudkit.js'
   },
},

1. In your index.js you need to configure CloudKit, provide signup divs and start using it:

import React from "react"

window.CloudKit.configure({
  containers: [{
    containerIdentifier: 'YOUR_CONTAINER',
    apiTokenAuth: {
      apiToken: 'YOUR_TOKEN',
      persist: true
    },
    environment: 'development'
  }]
});

const container = window.CloudKit.getDefaultContainer()

class IndexPage extends React.Component {
  constructor() {
        super();
      this.state = {
        userInfo: null,
      }
    }

    onAuthenticated() {
      // Load your data here
    }

    componentDidMount() {
      container
        .setUpAuth()
            .then(userInfo => {
            if(userInfo) {
              this.onAuthenticated()
                this.setState({userInfo: userInfo});
              return;
            }
            container
              .whenUserSignsIn()
                .then(userInfo => {
                  this.onAuthenticated()
                    this.setState({userInfo: userInfo})
              })
      })
    }

  render() {
    return <div>

      <div id="apple-sign-in-button"></div>
      <div id="apple-sign-out-button"></div>
    </div>
  }
}

export default IndexPage