{"id":13394412,"url":"https://github.com/postlight/headless-wp-starter","last_synced_at":"2025-04-12T01:53:22.093Z","repository":{"id":25097356,"uuid":"98932536","full_name":"postlight/headless-wp-starter","owner":"postlight","description":"🔪 WordPress + React Starter Kit: Spin up a WordPress-powered React app in one step","archived":false,"fork":false,"pushed_at":"2023-03-14T18:16:51.000Z","size":11880,"stargazers_count":4510,"open_issues_count":54,"forks_count":657,"subscribers_count":146,"default_branch":"master","last_synced_at":"2025-04-12T01:53:21.634Z","etag":null,"topics":["graphql-api","headless-cms","headless-wp","labs","nextjs","react","rest-api","starter-kit","wordpress","wordpress-development"],"latest_commit_sha":null,"homepage":"https://archive.postlight.com/labs/wordpress-react-starter-kit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/postlight.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,"governance":null}},"created_at":"2017-07-31T21:44:54.000Z","updated_at":"2025-04-04T21:14:34.000Z","dependencies_parsed_at":"2023-02-17T09:16:09.381Z","dependency_job_id":"5cf38ef0-13ed-45f2-837d-91eb61b23c37","html_url":"https://github.com/postlight/headless-wp-starter","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Fheadless-wp-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Fheadless-wp-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Fheadless-wp-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postlight%2Fheadless-wp-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postlight","download_url":"https://codeload.github.com/postlight/headless-wp-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505873,"owners_count":21115354,"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":["graphql-api","headless-cms","headless-wp","labs","nextjs","react","rest-api","starter-kit","wordpress","wordpress-development"],"created_at":"2024-07-30T17:01:18.510Z","updated_at":"2025-04-12T01:53:22.068Z","avatar_url":"https://github.com/postlight.png","language":"JavaScript","readme":"![WordPress + React Starter Kit](frontend/static/images/wordpress-plus-react-header.png)\n\n[![Build status](https://travis-ci.org/postlight/headless-wp-starter.svg)](https://travis-ci.org/postlight/headless-wp-starter)\n\n[Postlight](https://postlight.com)'s Headless WordPress + React Starter Kit is an automated toolset that will spin up three things:\n\n1.  A WordPress backend that serves its data via the [WP REST API](https://developer.wordpress.org/rest-api/) and [GraphQL](http://graphql.org/).\n2.  A sample React frontend powered by the [WP GraphQL API](https://www.wpgraphql.com/), which supports posts, pages, categories, menus, search, and user sign-in.\n3.  Another sample server-side rendered React frontend using [Next.js](https://github.com/zeit/next.js/) powered by the WP REST API.\n\nYou can read all about it in [this handy introduction](https://postlight.com/trackchanges/introducing-postlights-wordpress-react-starter-kit).\n\n**What's inside:**\n\n- An automated installer which bootstraps a core WordPress installation that provides an established, stable REST API.\n- A plugin which exposes a newer, in-progress [GraphQL API for WordPress](https://wpgraphql.com/).\n- The WordPress plugins you need to set up custom post types and custom fields ([Advanced Custom Fields](https://www.advancedcustomfields.com/) and [Custom Post Type UI](https://wordpress.org/plugins/custom-post-type-ui/)).\n- Plugins which expose those custom fields and WordPress menus in the [WP REST API](https://developer.wordpress.org/rest-api/) ([ACF to WP API](https://wordpress.org/plugins/acf-to-wp-api/) and [WP-REST-API V2 Menus](https://wordpress.org/plugins/wp-rest-api-v2-menus/)).\n- JWT authentication plugins: [JWT WP REST](https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/) and [JWT WP GraphQL](https://github.com/wp-graphql/wp-graphql-jwt-authentication).\n- All the starter WordPress theme code and settings headless requires, including pretty permalinks, CORS `Allow-Origin` headers, and useful logging functions for easy debugging.\n- A mechanism for easily importing data from an existing WordPress installation anywhere on the web using [WP Migrate DB Pro](https://deliciousbrains.com/wp-migrate-db-pro/) and its accompanying plugins (license required).\n- A sample, starter frontend React app powered by [GraphQL](http://graphql.org/).\n- Another sample, starter frontend React app, server-side rendered via [Next.js](https://learnnextjs.com/), powered by the WP REST API.\n- [Docker](https://www.docker.com/) containers and scripts to manage them, for easily running the frontend React apps and backend locally or deploying it to any hosting provider with Docker support.\n\nLet's get started.\n\n## Install\n\n_Prerequisite:_ Before you begin, you need [Docker](https://www.docker.com) installed. On Linux, you might need to install [docker-compose](https://docs.docker.com/compose/install/#install-compose) separately.\n\nDocker Compose builds and starts four containers by default: `db-headless`, `wp-headless`, `frontend` \u0026 `frontend-graphql`:\n\n    docker-compose up -d\n\n**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.\n\nYou can follow the Docker output to see build progress and logs:\n\n    docker-compose logs -f\n\nAlternatively, you can use some useful Docker tools like Kitematic and/or VSCode Docker plugin to follow logs, start / stop / remove containers and images.\n\n_Optional:_ you can run the frontend locally while WordPress still runs on Docker:\n\n    docker-compose up -d wp-headless\n    cd frontend \u0026\u0026 yarn \u0026\u0026 yarn start\n\nOnce the containers are running, you can visit the React frontends and backend WordPress admin in your browser.\n\n## Frontend\n\nThis starter kit provides two frontend containers:\n\n- `frontend` container powered by the WP REST API is server-side rendered using Next.js, and exposed on port `3000`: [http://localhost:3000](http://localhost:3000)\n- `frontend-graphql` container powered by GraphQL, exposed on port `3001`: [http://localhost:3001](http://localhost:3001)\n\nHere's what the frontend looks like:\n\n![Frontend Screencast](/wordpress-react-starter-kit-fe.gif)\n\nYou can follow the `yarn start` output by running docker-compose `logs` command followed by the container name. For example:\n\n    docker-compose logs -f frontend\n\nIf you need to restart that process, restart the container:\n\n    docker-compose restart frontend\n\n**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.\n\n## Backend\n\nThe `wp-headless` container exposes Apache on host port `8080`:\n\n- Dashboard: [http://localhost:8080/wp-admin](http://localhost:8080/wp-admin) (default credentials `postlight`/`postlight`)\n- REST API: [http://localhost:8080/wp-json](http://localhost:8080/wp-json)\n- GraphQL API: [http://localhost:8080/graphql](http://localhost:8080/graphql)\n\nThis container includes some development tools:\n\n    docker exec wp-headless composer --help\n    docker exec wp-headless phpcbf --help\n    docker exec wp-headless phpcs --help\n    docker exec wp-headless phpunit --help\n    docker exec wp-headless wp --info\n\nApache/PHP logs are available via `docker-compose logs -f wp-headless`.\n\n## Database\n\nThe `db-headless` container exposes MySQL on host port `3307`:\n\n    mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless\n\nYou can also run a mysql shell on the container:\n\n    docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless\n\n## Reinstall/Import\n\nTo reinstall WordPress from scratch, run:\n\n    docker exec wp-headless wp db reset --yes \u0026\u0026 docker exec wp-headless install_wordpress\n\nTo import data from a mysqldump with `mysql`, run:\n\n    docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless \u003c example.sql\n    docker exec wp-headless wp search-replace https://example.com http://localhost:8080\n\n## Import Data from Another WordPress Installation\n\nYou can use a plugin called [WP Migrate DB Pro](https://deliciousbrains.com/wp-migrate-db-pro/) to connect to another WordPress installation and import data from it. (A Pro license will be required.)\n\nTo do so, first set `MIGRATEDB_LICENSE` \u0026 `MIGRATEDB_FROM` in `.env` and recreate containers to enact the changes.\n\n    docker-compose up -d\n\nThen run the import script:\n\n    docker exec wp-headless migratedb_import\n\nIf you need more advanced functionality check out the available WP-CLI commands:\n\n    docker exec wp-headless wp help migratedb\n\n## Extend the REST and GraphQL APIs\n\nAt this point you can start setting up custom fields in the WordPress admin, and if necessary, creating [custom REST API endpoints](https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/) in the Postlight Headless WordPress Starter theme.\n\nThe primary theme code is located in `wordpress/wp-content/themes/postlight-headless-wp`.\n\nYou can also [modify and extend the GraphQL API](https://wpgraphql.com/docs/getting-started/about), An example of creating a Custom Type and registering a Resolver is located in: `wordpress/wp-content/themes/postlight-headless-wp/inc/graphql`.\n\n## REST \u0026 GraphQL JWT Authentication\n\nTo give WordPress users the ability to sign in via the frontend app, use something like the [WordPress Salt generator](https://api.wordpress.org/secret-key/1.1/salt/) to generate a secret for JWT, then define it in `wp-config.php`\n\nFor the REST API:\n\n    define('JWT_AUTH_SECRET_KEY', 'your-secret-here');\n\nFor the GraphQL API:\n\n    define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');\n\nMake sure to read the [JWT REST](https://github.com/Tmeister/wp-api-jwt-auth) and [JWT GraphQL](https://github.com/wp-graphql/wp-graphql-jwt-authentication) documentation for more info.\n\n## Linting\n\nRemember to lint your code as you go.\n\nTo lint WordPress theme modifications, you can use [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer) like this:\n\n    docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .\n\nYou may also attempt to autofix PHPCS errors:\n\n    docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .\n\nTo lint and format the JavaScript apps, both [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) configuration files are included.\n\n## Hosting\n\nMost 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.\n\nThat'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](https://zeit.co/now).\n\n## Troubleshooting Common Errors\n\n**Breaking Change Alert - Docker**\n\nIf 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.\nYou will need to also migrate MySQL data to the new MySQL db container.\n\n**Docker Caching**\n\nIn some cases, you need to delete the `wp-headless` image (not only the container) and rebuild it.\n\n**CORS errors**\n\nIf 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.\n\nSee anything else you'd like to add here? Please send a pull request!\n\n---\n\n🔬 A Labs project from your friends at [Postlight](https://postlight.com). Happy coding!\n","funding_links":[],"categories":["JavaScript","前端开发框架及项目","Learning Resources"],"sub_categories":["其他_文本生成、文本对话"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostlight%2Fheadless-wp-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostlight%2Fheadless-wp-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostlight%2Fheadless-wp-starter/lists"}