Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/them-es/wordpress-react-boilerplate

Headless WordPress boilerplate powered by React Bootstrap.
https://github.com/them-es/wordpress-react-boilerplate

bootstrap headless-cms headless-wordpress reactjs wordpress wp-api

Last synced: 5 days ago
JSON representation

Headless WordPress boilerplate powered by React Bootstrap.

Awesome Lists containing this project

README 

        
# 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](https://nodejs.org) (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](https://github.com/facebook/react), [MIT license](https://github.com/facebook/react/blob/master/LICENSE)

* [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [MIT license](https://github.com/react-bootstrap/react-bootstrap/blob/master/LICENSE)

* [Bootstrap](https://github.com/twbs/bootstrap), [MIT license](https://github.com/twbs/bootstrap/blob/main/LICENSE)

* [WordPress Block Library](https://github.com/WordPress/gutenberg/tree/master/packages/block-library), [GPLv2+ license](https://github.com/WordPress/gutenberg/blob/master/LICENSE.md)

* [sass](https://github.com/sass/sass), [MIT license](https://github.com/sass/dart-sass/blob/main/LICENSE)

* [node-wpapi](https://github.com/wp-api/node-wpapi), [MIT license](https://github.com/WP-API/node-wpapi/blob/master/LICENSE)



## Copyright & License



Code and Documentation © [them.es](https://them.es)



Code released under [GPLv2+](https://www.gnu.org/licenses/gpl-2.0.html)