|Repos Using This
|Packages Using This
|Most Recent Commit
|Headless Wp Starter
|a year ago
|🔪 WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step
|Wp Starter Kit
|9 years ago
|Easy to use starter-kit for rapidly building WordPress plugins.
|3 days ago
|📦 A starter template for WordPress websites
|Wp Plugin Starter
|2 years ago
|A starter kit for building WordPress plugins.
|a year ago
|A modern Nuxt + WordPress starter kit, with support for SPA, Universal and Generated sites.
|7 years ago
|February 10, 2017
|Generic project structure for WordPress website industrialisation.
|Wordpress Starter Kit
|5 years ago
|A starter kit to develop bespoke WordPress websites using a child theme.
|4 years ago
|August 14, 2020
|WordPress Project Template is a skeleton best for rapidly creating projects with modern development tools, easier configuration, and an improved folder structure.
|Wordpress Next Starter
|3 years ago
|Starter kit for using WordPress as a headless CMS with Next.js
|Decoupled Kit Js
|2 days ago
Postlight's Headless WordPress + React Starter Kit is an automated toolset that will spin up three things:
You can read all about it in this handy introduction.
Allow-Origin headers, and useful logging functions for easy debugging.
Let's get started.
Docker Compose builds and starts four containers by default:
docker-compose up -d
Wait a few minutes for Docker to build the services for the first time. After the initial build, startup should only take a few seconds.
You can follow the Docker output to see build progress and logs:
docker-compose logs -f
Alternatively, you can use some useful Docker tools like Kitematic and/or VSCode Docker plugin to follow logs, start / stop / remove containers and images.
Optional: you can run the frontend locally while WordPress still runs on Docker:
docker-compose up -d wp-headless
cd frontend && yarn && yarn start
Once the containers are running, you can visit the React frontends and backend WordPress admin in your browser.
This starter kit provides two frontend containers:
frontend container powered by the WP REST API is server-side rendered using Next.js, and exposed on port
frontend-graphql container powered by GraphQL, exposed on port
Here's what the frontend looks like:
You can follow the
yarn start output by running docker-compose
logs command followed by the container name. For example:
docker-compose logs -f frontend
If you need to restart that process, restart the container:
docker-compose restart frontend
PS: Browsing the Next.js frontend in development mode is relatively slow due to the fact that pages are being built on demand. In a production environment, there would be a significant improvement in page load.
wp-headless container exposes Apache on host port
This container includes some development tools:
docker exec wp-headless composer --help
docker exec wp-headless phpcbf --help
docker exec wp-headless phpcs --help
docker exec wp-headless phpunit --help
docker exec wp-headless wp --info
Apache/PHP logs are available via
docker-compose logs -f wp-headless.
db-headless container exposes MySQL on host port
mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless
You can also run a mysql shell on the container:
docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless
To reinstall WordPress from scratch, run:
docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress
To import data from a mysqldump with
docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless < example.sql
docker exec wp-headless wp search-replace https://example.com http://localhost:8080
You can use a plugin called WP Migrate DB Pro to connect to another WordPress installation and import data from it. (A Pro license will be required.)
To do so, first set
.env and recreate containers to enact the changes.
docker-compose up -d
Then run the import script:
docker exec wp-headless migratedb_import
If you need more advanced functionality check out the available WP-CLI commands:
docker exec wp-headless wp help migratedb
At this point you can start setting up custom fields in the WordPress admin, and if necessary, creating custom REST API endpoints in the Postlight Headless WordPress Starter theme.
The primary theme code is located in
You can also modify and extend the GraphQL API, An example of creating a Custom Type and registering a Resolver is located in:
To give WordPress users the ability to sign in via the frontend app, use something like the WordPress Salt generator to generate a secret for JWT, then define it in
For the REST API:
For the GraphQL API:
define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');
Remember to lint your code as you go.
To lint WordPress theme modifications, you can use PHP_CodeSniffer like this:
docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .
You may also attempt to autofix PHPCS errors:
docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .
Most WordPress hosts don't also host Node applications, so when it's time to go live, you will need to find a hosting service for the frontend.
That's why we've packaged the frontend app in a Docker container, which can be deployed to a hosting provider with Docker support like Amazon Web Services or Google Cloud Platform. For a fast, easier alternative, check out Now.
Breaking Change Alert - Docker
If you had the project already setup and then updated to a commit newer than
99b4d7b, you will need to go through the installation process again because the project was migrated to Docker.
You will need to also migrate MySQL data to the new MySQL db container.
In some cases, you need to delete the
wp-headless image (not only the container) and rebuild it.
If you have deployed your WordPress install and are having CORS issues be sure to update
/wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php with your frontend origin URL.
See anything else you'd like to add here? Please send a pull request!
🔬 A Labs project from your friends at Postlight. Happy coding!