justask.dev

Community powered answers to your dev questions

Setup a Gatsby theme

posted: 2020 January 17th

category: gatsby

Edit this post on GitHub.

Back

This will guide you through how to get a base setup up and running for developing a gatsby theme

1mkdir gatsby-theme-boop
2
3cd gatsby-theme-boop
4
5yarn init -y
6
7mkdir packages

Then i usually replace the content of the package.json with the following

1{
2 "private": true,
3 "workspaces": [
4 "packages/*"
5 ]
6 }

Then i create the folder structure and add the base packages to each project

1cd packages
2
3mkdir gatsby-theme-boop
4mkdir demo
5
6cd gatsby-theme-boop
7yarn init -y
8yarn add react react-dom gatsby
9
10cd demo
11yarn init -y
12yarn add react react-dom gatsby

Go into your gatsby-theme-boop package.json and copy the dependancies to a peerDependancies

1....
2 "dependencies": {
3 "gatsby": "^2.18.24",
4 "react": "^16.12.0",
5 "react-dom": "^16.12.0",
6 },
7 "peerDependencies": {
8 "gatsby": "^2.18.24",
9 "react": "^16.12.0",
10 "react-dom": "^16.12.0",
11 },

Then we want to create our internal folder structure

1cd gatsby-theme-boop
2
3touch src/pages
4touch src/components
5touch src/pages/index.js
6
7cd demo
8touch src/pages
9touch src/components
10touch src/pages/index.js

Because we are using yarn workspaces we want to link the theme to the demo. Create a gatsby-config.js in our demo root and add our theme as a plugin. We also want to add it to our demos package.json, accepting any version.

1module.exports = {
2 plugins: [
3 'gatsby-theme-boop'
4 ]
5 }
1....
2 "dependencies": {
3 "gatsby": "^2.18.24",
4 "react": "^16.12.0",
5 "react-dom": "^16.12.0",
6 "gatsby-theme-boop": "*"
7 },
8 "peerDependencies": {
9 "gatsby": "^2.18.24",
10 "react": "^16.12.0",
11 "react-dom": "^16.12.0",
12 },

Then we run yarn from the root of our project to link it all up and we can then check if its all cool

1yarn
2yarn workspaces info

This should show us the following

1yarn workspaces v1.21.1
2{
3 "demo": {
4 "location": "packages/demo",
5 "workspaceDependencies": [
6 "gatsby-theme-boop"
7 ],
8 "mismatchedWorkspaceDependencies": []
9 },
10 "gatsby-theme-massage": {
11 "location": "packages/gatsby-theme-boop",
12 "workspaceDependencies": [],
13 "mismatchedWorkspaceDependencies": []
14 }
15}
16Done in 0.06s.

Author: Rich Haines