Skip to content
Next.js app with WPGraphQL and WordPress at the backend.
JavaScript CSS
Branch: master
Clone or download
Latest commit 3ad7eaa Jul 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
components Update doc comments Jul 12, 2019
pages Update doc comments Jul 12, 2019
static Add NProgress to show loading indicator Jul 11, 2019
styles Merge pull request #9 from rtCamp/now Jul 12, 2019
utils Add function doc comments Jul 12, 2019
validator Add function doc comments Jul 12, 2019
.env.example Update readme Jun 4, 2019
.gitignore Remove client-config.js and add exmample file for it Jun 4, 2019
.nowignore Add .nowignore Jun 11, 2019 Add licence file Jun 11, 2019
client-config-example.js Add postCode locale setting Jun 18, 2019
demo.gif Update demo gif, live demo link and develop branch info Jun 16, 2019
next.config.js Fix configuration for now Jun 14, 2019
package-lock.json setCart fix, className correction Jul 12, 2019
package.json setCart fix, className correction Jul 12, 2019
service-worker.js Remove console logs Jul 11, 2019

WP Decoupled ⚡️

This is a React theme boilerplate for WordPress, built with Next JS, Webpack, Babel, Node, Express.

Demo 🎥

Getting Started 🏄

These instructions will get you a copy of the project up and running on your local machine for development purposes.

Installing 🔧

  1. Clone this repo in
  2. cd wp-decoupled
  3. npm install

Add GraphQl support on WordPress

  1. Clone and activate the following plugins , in your WordPress plugin directory:

    • wp-graphql Exposes graphql for WordPress
    • wp-graphiql Provides GraphiQL IDE (playground) to the WP-Admin
  2. You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don't have any products in your WordPress install ) WP Dashboard > Tools > WooCommerce products(CSV) : The WooCommerce default products csv file is available at wp-content/plugins/woocommerce/sample-data/sample_products.csv

Configure 🔧

  • Rename client-config-example.js to client-config.js and update your React Site URL
const config = {
	siteUrl: 'http://localhost:3000',
	graphqlUrl: 'http://wordpressSiteUrl/graphql'
  • Rename .env.example to .env and update your WooCommerce config keys

Commands 💻

  • dev Runs the node server in development mode

Using PWA on mobile

  • Open the site in Chrome on your mobile and then click on add to home screen.
  • It will be downloaded and saved as a Progressive Web App on your mobile.
  • Once added Look WP Decoupled app on your mobile.
  • This PWA will work even when you are offline.

Branches Information: 🌱

  1. master Main React WooCommerce theme
  2. develop For testing
  3. wp-docoupled-boilerplate Boilerplate to start a new React theme project with PWA implementation ( Work in Progress )


Contributor 👤

License 📃

This project is licensed under the MIT License - see the file for details

You can’t perform that action at this time.