Skip to content
Next.js app with WPGraphQL and WordPress at the backend.
JavaScript CSS
Branch: master
Clone or download
imranhsayed Merge pull request #13 from rtCamp/feature/register-and-login
Add a User Registration Login and Logout : Feature/register and login
Latest commit 043014e Nov 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components Add error handling for register Sep 28, 2019
pages Add css to the form Oct 16, 2019
static
styles Add css to the form Oct 16, 2019
utils Remove empty space Oct 16, 2019
validator Add register validation and sanitization function Oct 16, 2019
.env.example Update readme Jun 4, 2019
.gitignore
.nowignore
LICENCE.md
README.md
client-config-example.js Add postCode locale setting Jun 18, 2019
demo.gif
next.config.js
now.json Fix configuration for now Jun 14, 2019
package-lock.json
package.json Add dompurify package Sep 28, 2019
server.js Remove console logs Jul 11, 2019
service-worker.js
yarn.lock Bump mixin-deep from 1.3.1 to 1.3.2 Nov 5, 2019

README.md

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 git@github.com:rtCamp/wp-decoupled.git
  2. cd wp-decoupled
  3. npm install

Configure Backend( WordPress site ) 🔧

1. Add GraphQl support on WordPress

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

  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

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 client-config-example.js to client-config.js and update your React Site URL
const config = {
	siteUrl: 'http://localhost:3000',
	graphqlUrl: 'http://wordpressSiteUrl/graphql',
	postCodeLocale: 'IN',
	authTokenName: 'wp-decoupled/AUTH_TOKEN' ,
};
  • Rename .env.example to .env and update your WooCommerce config keys
WOO_SITE_URL=http://yourwocommercesite.com
WOO_CONSUMER_KEY=xxxxx
WOO_SECRET=xxxxx

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 )

Author

Contributor 👤

License 📃

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

Does this interest you?

Join us at rtCamp, we specialize in providing high performance enterprise WordPress solutions

You can’t perform that action at this time.