Gatsby

Navigation

• Install Gatsby on local environment
• Setting up different environments
• Creating new patterns in WP and Gatsby (Guide)
• Deploy to staging
• Specific info for clients

Install Gatsby on local environment

Before using Gatsby, install yarn globally*: npm install -g yarn

Install Gatsby Cli: npm install -g gatsby-cli

Clone the Gatsby app repo: git clone https://donedusted@bitbucket.org/dusted/htb-gatsby.git

Create the development environment file: touch .env.development

Set the WORDPRESS_URL to your UAT**: WORDPRESS_URL=https://wp-uat-www-htb.dusted.digital

Start the local development server: yarn clean && yarn develop

Build for production***: yarn clean && yarn production

* Ensure that yarn is installed: yarn -h

** This is the endpoint URL for WordPress, that your application uses to generate it's static files.

*** Clear the cache and generates a new public directory in the root folder.

Notes on environment files

It's possible to create .env files to use specifically use with different environments (staging, production).

Note: All env files should be ignored from git.

The environment used for Gatsby Develop: .env.development

The environment used for Gatsby Build: .env.production

Creating new patterns in WP and Gatsby (Guide)

Wordpress

• Create new post types and fields: htb-wordpress/htbcontent/themes/htb-personal/assets/includes/core
• Create a new includes pattern: htb-wordpress/htbcontent/themes/htb-personal/assets/includes
• Add the new pattern to layouts: htb-wordpress/htbcontent/themes/htb-personal/page-all-layouts.php
• Add the SASS: htb-wordpress/htbcontent/themes/htb-personal/assets/css/pages/
• Import the CSS in _site.scss: htb-wordpress/htbcontent/themes/htb-personal/assets/css/pages/site.scss

Gatsby

• Duplicate an existing layout folder: htb-gatsby/src/layouts/
• Add the new layout: htb-gatsby/src/components/AllLayouts.js

Deploy to Staging (current setup 29/09/2022)

Gatsby

• Have the version of the htb-gatsby-staging repo locally: https://bitbucket.org/dusted/htb-gatsby-staging/src/master/ (opens new window)
• Make sure you have the latest changes (git pull), and are also on the master branch.
• In htb-gatsby), run a build to production yarn clean && yarn production https://bitbucket.org/dusted/htb-gatsby/ (opens new window)
• Copy the files inside of the public directory, and paste into the root of the htb-gatsby-staging folder.
• Push to the server. It should automatically deploy via a webhook.
• Check the changes: https://htb-wordpress.dusted.digital (opens new window)

Client Specific

For HTB, note that the client has no way of previewing changes for the Gatsby app before going live.