WP Decoupled β‘
This is a React theme boilerplate for WordPress, built with Next JS, Webpack, Babel, Node, Express.
Live demo site.
Demo π₯
Getting Started π
These instructions will get you a copy of the project up and running on your local machine for development purposes.
Installing π§
- Clone this repo in
git@github.com:rtCamp/wp-decoupled.git
cd wp-decoupled
nvm use
npm install
Configure Backend( WordPress site ) π§
1. Add GraphQl support on WordPress
-
Clone and activate the following plugins, in your WordPress plugin directory:
- wp-graphql Exposes graphql for WordPress
- wp-graphql-jwt-authentication This plugin extends the wp-graphql plugin to provide authentication using JWT.
- wp-graphiql Provides GraphiQL IDE (playground) to the WP-Admin
- wp-graphql-woocommerce Adds Woocommerce functionality to a WPGraphQL schema( Tested upto v0.7.0 of wp-graphql-woocommerce)
-
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
2. For Authentication π
a. You can use any secret token of your choice, however it would be best if you generate one using WordPress Salt generator (https://api.wordpress.org/secret-key/1.1/salt/) to generate a Secret. And just pick up any one of the token and add it in place of 'your-secret-token' below:
Define a Secret in wp-config.php
of your WordPress directory:
define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-token' );
b. Depending on your particular environment, you may have to research how to enable these headers, but in Apache, you can do the following in your .htaccess
:
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
Configure Front End π§
- Rename
.env.example
to.env
and update your details
SITE_URL=http://localhost:3000
NEXT_PUBLIC_WOO_SITE_URL=http://yourwocommercesite.com
WOO_CONSUMER_KEY=xxxxx
WOO_SECRET=xxxxx
Commands π»
npm run dev
Runs the node server in development modenpm run dev:inspect
Runs the dev server with Inspectornpm run server
Runs the NEXT produciton servernpm run lint
Runs the linternpm run format
Runs the formatternpm run build
Creates the NEXT build
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 π±
- master Main React WooCommerce theme
- develop For testing
- wp-docoupled-boilerplate Boilerplate to start a new React theme project with PWA implementation ( Work in Progress )
Author
Contributors π€
License π
This project is licensed under the MIT License - see the LICENSE.md file for details