Welcome to the guide that will help you navigate the intricate world of server-side rendered (SSR) React applications integrated with the WordPress REST API. This boilerplate created by Keen is perfect for developers looking to pair the robust capabilities of React with the flexibility of WordPress. Let’s embark on this adventure step-by-step!

Getting Started

To begin, you need to clone the provided repository to your local machine. Follow these initial steps:

• Clone the repository: git clone
• Change directory to the client folder: cd client
• Install dependencies: npm install

Set Up Environment

The React app requires a .env file for configuration. You can easily create this by duplicating the example file:

cp .env.example .env

Ensure you are in the client directory, and the example .env file automatically includes the URL for the default Docker installation of WordPress.

Setting Up Docker

Docker is essential for running the WordPress API. Follow these steps to set it up:

• First, ensure Docker is installed and running on your machine.
• Navigate to the API folder: cd api
• Duplicate and rename the Docker configuration file:

cp docker-compose.yml.example docker-compose.yml

• Edit the docker-compose.yml file in your favorite text editor:
• Change the local install directory in the volumes section:

volumes:
  - ~wwwreact-wp-restapi:varwwwhtml

• Fire up Docker with: docker-compose up -d
• Access your WordPress instance via http://localhost:8080.

WordPress Configuration Steps

Now that your Docker instance is up, complete these configurations in WordPress:

1. Activate the REST API theme.
2. Activate the plugins: ACF PRO and ACF to REST API.
3. Import boilerplate custom fields from apiacf/acf-meta.data.json via the Custom Fields – Tools section.
4. Create a new page named “Home,” set it to the Home page template, and configure it as your homepage in Settings – Reading.
5. Change Permalinks to Custom Structure and enter /post%postname%.
6. Update your Site Address in Settings – General to your SSR app address (default: http://localhost:1337).

Note: Make sure to update the Site Address last!

Booting Up the SSR App

To test the server-side rendering, follow these steps:

• First, build the app with: npm run build
• Run the server: npm run serve

Working on Your Project

Now that everything is set up, you can start developing your application. For development, simply run:

cd client
npm start

Sass Support

This project comes preconfigured to use Sass for styling. You can organize your components and styles in a manner that suits your workflow.

Caching API Responses with Redux

We utilize Redux for caching responses both server-side and client-side. This means the first request serves the initial content, while subsequent requests utilize the cached data, enhancing responsiveness.

Template Usage

Utilizing WordPress page templates helps match ACF custom fields to different pages as required. By creating templates, we can easily manage custom fields for each page directly from WordPress.

Troubleshooting

If you run into issues, consider the following:

• Ensure Docker is running correctly and the configuration file is properly set up.
• Double-check your environment variables in the .env file.
• Make sure your ports (8080, 1337) are not in use by other applications.
• If encountering issues with API calls, verify that WordPress has the REST API enabled.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.