To get started with the Next Wordpress Starter, use our
create-pantheon-decoupled-kit
, or the "CLI". Full documentation for this npm
package based on npm init can
be found
here on
our docs site.
For a quick start, follow the instructions below:
- In your terminal, run the following command:
npm init pantheon-decoupled-kit -- next-wp
- Follow the prompts in your terminal to complete the setup.
The Pantheon @pantheon-systems/wordpress-kit is included as a dependency in this project. This allows developers to make use of utility functions to simplify the process of building and maintaining a Front-End site on Pantheon.
The tailwindcssPlugin
is included in this project and is used to map WordPress
Block Editor styles to Tailwind styles.
Full documentation can be found at: https://github.com/pantheon-systems/decoupled-kit-js/tree/canary/web/docs/Packages/wordpress-kit
Tests are written with vitest
. All new functionality
should have unit tests or snapshot tests where applicable. Snapshot tests are
using
@testing-library/react
.
The @pantheon-systems/decoupled-kit-health-check
will run before your build
and ensure the backend is setup for success. Helpful instructions will guide you
in case anything in the health check fails. To disable the health check, see
Disabling the Decoupled Kit Health Check.
This section assumes the package manager in use is npm
. If you are not using
npm
, replace npm
with the name of your package manager.
To run the tests:
npm test
To run the tests in watch mode:
npm run test:watch
Snapshots should be updated when presentational changes are made. If a new page route is added, create a new snapshot test for it, and include any data needed to run that test successfully. Please commit the updated snapshots along with your changes.
To update a snapshot:
Run the following helper command:
npm run update-snapshots
Or, run the test for a single profile in watch mode (see above), then in the terminal press the u key. This will update the snapshot for the running profile Be sure to update the snapshot for both profiles.
This starter uses GET
for GraphQL requests by default. Editing this
configuration to use POST
requests can be done in /lib/WordPressClient.js
.
To achieve this, set each GraphQLClientFactory
constructors method
parameter
to equal POST
.
export const client = new GraphQLClientFactory(process.env.backendUrl, {
method: 'POST',
}).create();