Aquasar
  • Home
  • Portfolio
  • Articles
  • Pricing
  • About
  • Contact
WEB DEVELOPMENT |SEO |DIGITAL ADS

Gatsby with Strapi Starter

Aug 16th, 2019

Alex Quasar

strapigatsby

1. Installing Strapi

npm i strapi@alpha -g

2. Starting a new project

strapi new <Strapi Directory Name> --quickstart

quick start will install a SQL lite database and everything automatically.

2. a ) ( optional ) starting up strapi again if needed

-

cd cms
-
strapi start
- open up localhost:1337/admin

3. Set up Strapi in browser

Go to localhost: 1337

Now set up your api on the ui interface

4. Go to vs code and in the root directory do

gatsby new <front end directory to create>

5. Inside the front end folder to start up gatsby in dev you can run:

gatsby develop

Should have two terminals in vs code running a backend and a frontend

6. Install Strapi Source Plugin and add to the Gatsby config file review documentation under Gatsby plugins. Installing the Gatsby source Strapi plugin makes the data from Strapi available in the graphQL data layer inside Gatsby. The Strapi data will now be available inside this data object.

npm i --save gatsby-source-strapi

7. Inside the Gatsby config file paste the code from the documentation. Content Types should be made public in the array otherwise 403 error. There is also the possibility to login with a Strapi user when the content types are not publicly available. To do so specify the username and password when creating the Strapi app.

Deploying to Heroku

As of this writing, you need to make sure your node version is 10.x rather than 12 which is the current node version Heroku uses. In the cms directory, modify this part of your package.json file:

 "engines": {
    "node": "10.x",
    "npm": ">= 6.0.0"
  }

8. Installing Heroku

- Have Heroku installed. Go to website and install Heroku on system, add Heroku as path of system environment variable ie. C:\Program Files\heroku\bin. Restart VS Code and check install complete using in cmd line using

heroku --version

9. Login to heroku

heroku --login

10. Update .gitignore inside cms directory by adding package-lock.json


11. Initialize repo in cms directory and create a heroku instance

git init
git add .
git commit -am 'first commit'
heroku create <your project name>

12. We can no longer use SQLITE when deploying to Heroku as that is meant to be a small demo database. Lets connect to a POSTGRES Database by running. This is the hobby-dev version of the postgresql database add on that Heroku provides.

heroku addons:create heroku-postgresql:hobby-dev

13. The next step is to set the environment variables for our project.

13. a ) In the terminal, run the following command to get the environment variables for you project

heroku config

13. b) Step a) Should provide a url like

postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b
Use the Heroku config to set these environment variables:

heroku config:set DATABASE_USERNAME=ebitxebvixeeqd
heroku config:set DATABASE_PASSWORD=dc59b16dedb3a1eef84d4999a0be041bd419c474cd4a0973efc7c9339afb4baf
heroku config:set DATABASE_HOST=ec2-50-37-231-192.compute-2.amazonaws.com
heroku config:set DATABASE_PORT=5432
heroku config:set DATABASE_NAME=d516fp1u21ph7b

14 Replace the `./config/environments/production/database.json` file with the following

{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "strapi-hook-bookshelf",
      "settings": {
        "client": "postgres",
        "host": "${process.env.DATABASE_HOST}",
        "port": "${process.env.DATABASE_PORT}",
        "database": "${process.env.DATABASE_NAME}",
        "username": "${process.env.DATABASE_USERNAME}",
        "password": "${process.env.DATABASE_PASSWORD}",
        "ssl": true
      },
      "options": {}
    }
  }
} 

15 Install non-blocking PostgreSQL client for Node.js

npm i pg --save

16 push changes to heroku master

git add .
git commit -m 'database.json modified'
git push heroku master

17 Verify Strapi CMS is added to heroku.

You should see a welcome page. Navigate to admin and create a new user. https://gatsby-with-strapi-demo-100.herokuapp.com/admin/plugins/users-permissions/auth/register

18. Add new user to production environment using the Strapi UI.

19. Add new content to content models.

20. Update roles and permissions to find, findone for user and other content models

Cloudinary and Strapi

21. Go to cd plugins/upload and npm i --save strapi-provider-upload-cloudinary

22. Inside plugin folder: git add . git commit -m 'added cloudinary' git push heroku master

23. Inside your production version of Strapi UI , got to plugins -> File Uploads -> Cloudinary and put in your API details Make sure you doing this inside your herokuapp ie. https://gatsby-with-strapi-demo-100.herokuapp.com/admin/plugins/upload/configurations/production

24. Delete images in `File Uploads` and re upload it in your content. These images will now be uploaded to Cloudinary. We can check this with an api call ie.

Netlify Deploy

25. Inside blog directory (Gatsby directory) create new repo

git init
git add README.md
git add .
git commit -m 'First Commit'
git remote add origin <repo name>
git push -u origin master

26. Once we have added and the front end of the app onto github with the correct env variables and the backend (CMS) push to heroku only we can then set up the front end with Netlify.

On the blog (front end side)

// gatsby-config.js 

  {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL: process.env.DEPLOY_URL
          ? "https://gatsby-with-strapi-demo-100.herokuapp.com"
          : "http://localhost:1337",
        queryLimit: 1000, // Default to 100
        contentTypes: [`article`, `user`],
        // Possibility to login with a strapi user, when content types are not publically available (optional).
        loginData: {
          identifier: process.env.STRAPI_USERNAME,
          password: process.env.STRAPI_PASSWORD,
        },
      },
    },

Make sure to also add in the following at the top so we can see the process.env environment variables.

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

The next steps can be done also through the front end of Netlify by adding your blog repo to Netlify and deploying it

27. Install Netlify CLI globally (optional if already done)

npm i netlify-cli -g

28. Set up Netlify and give site url name and select choose new site.

netlify init
29.