Strapi with Gatsby Video Tutorial Series

This REPO contains the latest example code from the Gatsby / Strapi Video Tutorial Series. You can review the code directly, within the following directories.

NOTE: This is the BETA version of Strapi, ALPHA is not being maintained.

• Code examples for the folder "cms". Path: ./tutorial/cms <- Strapi Project

• Code examples for the folder "blog". Path: ./tutorial/blog. <- Gatsby Project

Instructions for cloning and using this repo locally

Create a folder, e.g. ./my-project and git clone this repo.

cd my-project
git clone https://github.com/strapi/strapi-heroku-cms-demo.git

Install this Strapi & Gatsby Project locally

From your command line, issue the following commands in order to install this Strapi and Gatsby project:

Path: ./my-project/

Install the Strapi part of the Project

git clone [email protected]:strapi/strapi-heroku-cms-demo.git
cd strapi-heroku-cms-demo
cd cms
npm install
strapi build

Once installed, you will need to do a few steps to replicate the final production environment (this steps are done also when you first upload and install to Heroku or other production environment):

• Create a User: Under CONTENT TYPES -> Users - add a user.
• Set WYIWYG to Visible: Under PLUGINS -> Content Manager -> Article -> [Tab] Edit View(Settings) -> Click on content -> Scroll down and toggle Display as WYSIWYG to ON.
• Allow API Access: Under PLUGINS -> Roles & Permissions -> Public -> Article (check find and findone), User (check find and findone)
• Enter your Cloudinary Credentials: Under PLUGINS -> FILES UPLOAD - COGWHEEL
• Add Content: Under CONTENT TYPES -> Articles -> add content.

Test you local API routes

Upload to Heroku

You will need to have a Heroku account, and the Heroku CLI installed. Heroku install instructions

Do these steps to upload your Strapi project to Heroku:

• Login to Heroku: heroku login
• Initilize Git:

git init
git add .
git commit -am "Initial Commit"

• Create a Heroku project (with a unique name for the URL)

heroku create my-uniquely-named-strapi-project

• setup database configuration (DO NOT CUT AND PASTE - USE OWN SETTINGS)

heroku addons:create heroku-postgresql:hobby-dev
heroku config
heroku config:set DATABASE_USERNAME=example
heroku config:set DATABASE_PASSWORD=example
heroku config:set DATABASE_HOST=example.compute-2.amazonaws.com
heroku config:set DATABASE_PORT=5432
heroku config:set DATABASE_NAME=example

• Push project to Heroku.

git push heroku master

• Open your app project, and redo these steps to match your Development Environment:

• Create a User: Under CONTENT TYPES -> Users - add a user.

• Set WYIWYG to Visible: Under PLUGINS -> Content Manager -> Article -> [Tab] Edit View(Settings) -> Click on content -> Scroll down and toggle Display as WYSIWYG to ON.

• Allow API Access: Under PLUGINS -> Roles & Permissions -> Public -> Article (check find and findone), User (check find and findone)

• Enter your Cloudinary Credentials: Under PLUGINS -> FILES UPLOAD - COGWHEEL

• Add Content: Under CONTENT TYPES -> Articles -> add content.

After you add content, you can go ahead and follow the next steps to create the Gatsby part of the project.

Install the Gatsby part of the Project

Open a new tab in your command line, and navigate to ./strapi-heroku-cms-demo/blog/:

Path: ./strapi-heroku-cms-demo/blog

npm install
gatsby develop

You can now check to see if Gatsby is running http://localhost:8000.

Push the Gatsby Project to a separate GitHub repo

You will need to create a separate repo to push just the Gatsby part of the project and which will link to Netlify.

git init
git add .
git commit -m "first commit"
git remote add origin [email protected]:YOUR-NAME/YOUR-NEW-EMPTY-REPO.git
git push -u origin master

Modify the Gatsby-Config file

Locate this code and replace the URL to match the URL from your Heroku install:

Path: ./blog/gatsby-config.js

    {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL: process.env.DEPLOY_URL
          ? "https://YOUR-APP-URL.herokuapp.com"
          : "http://localhost:1337",
        contentTypes: [`article`, `user`],
        queryLimit: 1000,
      },
    },

Configure Netlfiy

• Login to Netlify with netlify login.

You will need to link netlify to this repo. Use the netlify init to do so.

netlify init

After configuring Netlify (see tutorial), you need to commit all the changes:

Commit these changes:

git add .
git commit -m "git commit -m "netlify config settings files"
git push
netlify open

Set-up the Netlify WebHook URL

The last step is to set-up the Netlify Webhook URL so it updates:

• From your App, go to: Settings -> Build & deploy -> Continuous deployment -> Build hooks

  • Click Add build hook
  • Give your app a build hook name, e.g. strapiUpdate
  • Save it and then copy the issued URL to the clipboard

• Change the staticWebsiteBuildURL variable found in custom.json.

These changes occur on your Strapi Project.

Path: ./cms/config/environments/production/custom.json

Replace the link with your link for the staticWebsiteBuildURL

Commit these changes:

git add .
git commit -m "Add webhook support"
git push heroku master

You are now ready to test and play with this installation. You can build or change this.

NOTE: You have NOT created a Repo for the Strapi part of the project, but this is highly recommended.