{"id":13605742,"url":"https://github.com/trouble/react-wp-rest","last_synced_at":"2025-04-12T05:34:31.507Z","repository":{"id":46705720,"uuid":"126071705","full_name":"trouble/react-wp-rest","owner":"trouble","description":"A boilerplate for pairing the WP Rest API with a server-rendered React app","archived":false,"fork":false,"pushed_at":"2021-09-29T12:49:52.000Z","size":10946,"stargazers_count":169,"open_issues_count":1,"forks_count":27,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-08-02T19:38:21.790Z","etag":null,"topics":["acf","boilerplate","docker","express","headless-cms","headless-wp","nodejs","react","react-router-v4","redux","ssr","wordpress","wp-rest-api"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trouble.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-20T19:29:39.000Z","updated_at":"2024-07-01T18:01:25.000Z","dependencies_parsed_at":"2022-07-22T01:02:14.427Z","dependency_job_id":null,"html_url":"https://github.com/trouble/react-wp-rest","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trouble%2Freact-wp-rest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trouble%2Freact-wp-rest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trouble%2Freact-wp-rest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trouble%2Freact-wp-rest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trouble","download_url":"https://codeload.github.com/trouble/react-wp-rest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223498027,"owners_count":17155243,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acf","boilerplate","docker","express","headless-cms","headless-wp","nodejs","react","react-router-v4","redux","ssr","wordpress","wp-rest-api"],"created_at":"2024-08-01T19:01:02.240Z","updated_at":"2024-11-07T10:31:10.180Z","avatar_url":"https://github.com/trouble.png","language":"PHP","funding_links":[],"categories":["PHP"],"sub_categories":[],"readme":"# Server Side Rendered / Code Split React + Wordpress REST API - built by Keen (WIP)\nThis repo provides a boilerplate for pairing the WP Rest API with a server-side rendered and code split React client, built by [Keen](https://keen-studio.com).\n\nWordpress, MySQL, PHP and PHPMyAdmin are all provided by Docker which makes it easy to spin up new instances of WP sites both for local development and for production on hosts like DigitalOcean.\n\n## Getting Started\nClone this repository locally and `cd` to the `client` folder and type `npm install`.\n\n### Set Up Environment\nThe React app relies on a `.env` file to configure itself to its environment, and this repo ships with an example that you can copy and rename.  To do so, make sure you're still in the `/client` directory, and then duplicate / rename `.env.example` by running `cp .env.example .env`.  The example `.env` file comes preloaded with the URL to the default Docker installation of Wordpress.\n\n### Docker\nFirst, make sure you have Docker installed locally.  Once you do, `cd` to `/api` to duplicate and rename `docker-compose.yml.example` by running `cp docker-compose.yml.example docker-compose.yml`.  Now we need to edit `api/docker-compose.yml` to link your local filesystem with Docker's Wordpress files.  To do so, open up our newly duplicated `docker-compose.yml` and change the following to match your local install directory.  \n\n**NOTE:** You only need to change the path located _before_ the colon. In this case, replace `~/www/react-wp-rest` with your install directory.\n\n````\n  volumes:\n    - ~/www/react-wp-rest/api:/var/www/html\n````\n\nYou may want to also swap all `ex_` prefixes for your project's abbreviation to avoid using the same container across multiple projects.\n\nFeel free to make any other changes you'd like to the default user and database configurations but there's no real need locally. Just don't use defaults in production.\n\nNext, fire up Docker if it isn't already. Once this is done, ensure you're still in the `api` directory and type `docker-compose up -d`.  You can now reach your WP instance via `http://localhost:8080`.\n\n### Wordpress Configuration\nAfter you're up and running, we need to navigate to `http://localhost:8080/wp-admin` and perform the following steps to Wordpress:\n\n1. Activate the REST API theme\n2. Activate plugins ACF PRO and ACF to REST API\n3. Import boilerplate ACF custom fields by navigating to `Custom Fields -\u003e Tools`, and uploading `api/acf/acf-meta.data.json`.  This will add meta fields to each Page and Post by default, avoiding the need for Yoast SEO or similar plugins.  Extend and add to other post types as you need\n4. Add a new page called `Home`, set it to use the `Home` page template, and then set it as your front page in the `Settings -\u003e Reading -\u003e Your homepage displays` section\n5. Change Permalinks to the 'Custom Structure' option and enter `/post/%postname%/`\n6. Update your Site Address within `Settings -\u003e General` to your SSR app (default: http://localhost:1337)\n\n*Note:* It's important that the Site Address update is performed last in the order above.\n\n### Booting up the SSR app\n\nThe server-side rendering configuration in place serves the `/client/build` folder on port `1337`.  The `/build` folder contains the results of `create-react-app`'s `npm run build` command - so before attempting to test SSR, make sure you first run `npm run build`. After that, run `npm run serve` while still in the `/client` directory to fire up the server.\n\n### Getting to Work\n\nAt this point, you can get to work. For a development workflow, we've included `create-react-app` so we can rely on all the goodness that comes with it. `cd` into `/client` and run `npm start` to get to work.\n\n## Sass\n\nThis repo comes preconfigured to support Sass.  As you can see, at Keen, we generally split out components to include their own Sass files - but you can structure your project however you'd like.\n\n## Caching API responses on the server side\n\nWe use Redux both on the server and the client to cache the site content provided by Wordpress in memory.  This is a very simple approach but it works quite well in practice.  The first time a client requests a server-rendered copy of a page, Node serves the contents of the `build` folder, without waiting for the asynchronous calls to the WP REST API.  But, this first call populates the in-memory Redux store - therefore any consecutive requests by clients to the same server rendered page will automatically pull from the Redux store - and will automatically populate the data from WP.\n\n## Template Usage\n\nKeen relies on Wordpress page templates to assign ACF custom fields to pages as needed.  For example, a Homepage will generally require different custom fields than a typical About page.  By creating empty templates in the `/api/wp-content/themes/rest-api` folder, we can assign them to pages we create within Wordpress.  We then can write ACF logic to apply custom field groups to pages that use specific page templates, and then we can mirror the same template structure on the client side, but built with React components.\n\n## Credits\n\nTo build this repo, we've relied heavily on a few very helpful Medium posts from Andrei Duca:\n\nhttps://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a\nhttps://medium.com/bucharestjs/adding-state-management-with-redux-in-a-cra-srr-project-9798d74dbb3b\n\nAlso, we've taken inspiration from Postlight's Next.JS + Wordpress setup:\n\nhttps://github.com/postlight/headless-wp-starter\n\n## Questions?\n\n[Email us](mailto:info@keen-studio.com) or drop by our website at [keen-studio.com](https://keen-studio.com) and say hi through our live chat + live webcam.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrouble%2Freact-wp-rest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrouble%2Freact-wp-rest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrouble%2Freact-wp-rest/lists"}