New PWA Gatsby WordPress Theme – in React using ACF and wp-graphql

In this blog, you will know about a new Gatsby WordPress Theme, that uses a decoupled WordPress architecture . You can publish post pages, set up menus , widgets from WordPress backend and this react theme will serve the WordPress content in the front end as a Single Page Application ( SPA ) . Now If you are wondering why we should build front end theme in React ? , there are many benefits:

• No Page refresh ( SPA )
• Fast performance so better user engagement.
• Better developer experience, using HMR ( Hot module Replacement ), GraphQL

This theme works offline so you have better user engagement and they can have this app on their mobile, without you hiring another developer to build a mobile app.

Check out the demo here:

Features:

• A Gatsby theme for WordPress, using Decoupled Architecture.
• Front end in React
• Backend in WordPress.

1. Uses React with Gatsby ( Blazing Fast )
2. PWA ( Works Offline )
3. Image Optimization ( blur effect )
4. ACF
5. GraphQL ( with wp-graphql on WordPress )
6. Blog Page with Pagination
7. Offline Search Feature
8. Categories, Archive Page, Custom Home Page
9. Custom Widgets, Menus

🌐 Live Demo

• Demo on Netlify
• Demo on Vercel

🚀 Set Up

Gatsby Setup

• Rename .env-example file to .env and add your WordPress SITE_URL in site directory : SITE_URL=https://example.com

WordPress Setup

1. Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.

OR,

a. Clone the WordPress plugin Headless CMS in your WordPress plugin directory and activate it.

b. Clone and activate wp-graphql -test on ( v0.8.3 ) in WordPress plugin directory. c. Clone and activate wp-graphiql in WordPress plugin directory. d. Clone and activate wp-graphql-acf in WordPress plugin directory. e. Install and activate the ACF WordPress plugin in WordPress.

2. • Set Header menu as HCMS Header Menu
   • Set Footer menu as HCMS Footer Menu 
3. You can also set text widgets in #HCMS Footer #1 and #HCMS Footer #2 under Appearance > Widgets in WordPress.
4. Import all the ACF data from wordpress/acf-data json file of this repo, into WordPress by going to WordPress Dashboard > Custom Fields > Tools > Import
5. Create a Home Page ( if there isn’t one already )and make sure you have a home page and Location rule is set to Home page. 
6. Add the ACF required data on the Home page from the WordPress Dashboard.
7. If it isn’t already set your site title, description and logo from WordPress customizer.

Open the source code and start editing!

npm run dev

Your site is now running at http://localhost:8000!

Note: You’ll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

🚀 Development

• Navigate into site’s directory.

yarn install      # Run this for the first time.
npm run dev      # During development.
npm run build    # When ready for production.

Useful Links

1. Setting workspaces with yarn for theme development
2. Installing a gatsby theme and set it up.

Deployment

With vercel

• Signup on vercel.com
• Click on Import Project and then add the configurations. 
• On vercel, make sure you add these from settings of the project: 

From CLI:

• npm i -g vercel
• Now in the project root run vercel
• Add the following configurations

• build command: npm run build
• output directory: site/public
• development command: npm run dev
• root directory: /

Theme on npm

gatsby-wordpress-theme-phoenix