Skip to content
A ReactJS Bootstrap boilerplate using the WP-API
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitattributes
.gitignore
.htaccess
LICENSE
README.md
package-lock.json
package.json

README.md

React + WP-API

Headless WordPress.

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

What's included?

  • Bootstrap Framework
  • 1 menu
  • React Router
  • WP REST API client
  • 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
  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!)
  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
  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

Copyright & License

Code and Documentation © them.es

Code released under GPLv2+

You can’t perform that action at this time.