React + WP-API

Headless WordPress.

This React boilerplate based on create-react-app and React Bootstrap helps you to create Single Page Applications powered by the WordPress API (WP-API).

What's included?

• React Bootstrap Framework
• React Router
• WP REST API client
• 1 menu
• Parse content from API
• Blog pagination: Load more posts dynamically
• Autocomplete component
• Easy setup via a JSON configuration

Setup

The version needs to be rebuilt after making changes to the code.

1. Prerequisites: Node.js (NPM) needs to be installed on your system. Furthermore a local web server http://localhost needs to be up and running.
2. You need to have access to a WordPress website which supports the WP-API and where you've published some pages and posts
   • e.g. http://localhost/wordpress/wp-json
   • Pretty permalinks need to be enabled: https://wordpress.org/support/article/using-permalinks/#choosing-your-permalink-structure
3. Download the source code of this repository to a new directory on your local webserver
   • e.g. http://localhost/wp-react-app/
4. Install all required dependencies
   • $ npm install
5. Modify homepage in package.json to match the url of the build version (this is the full path to the directory where the app gets built!)
   • e.g. http://localhost/wp-react-app/build
   • Router-Config: https://stackoverflow.com/a/48943753
6. Modify /src/_setup.json
   • basename needs to match the website base (If the website has no base simply add "/")
   • slug_home needs to match the Homepage slug of the WordPress website
   • slug_posts needs to match the Posts page slug of the WordPress website
   • Make sure that all pages defined in menu have been published and are accessible. path needs to match the according page slug of the published page.
7. Style your app
   • /src/App.scss
   • React Bootstrap documentation: https://react-bootstrap.github.io
8. Create a build version
   • $ npm run build
9. Test your app
   • e.g. http://localhost/wp-react-app/
10. Going live
    • Don't forget to edit /public/favicon.json and /public/manifest.json and rebuild the version before publishing the app on a live system.

Technology

• React, MIT license
• React Bootstrap, MIT license
• Bootstrap, MIT license
• WordPress Block Library, GPLv2+ license
• sass, MIT license
• node-wpapi, MIT license

Copyright & License

Code and Documentation © them.es

Code released under GPLv2+