Skip to main content

Development

Introduction​

Thanks for contributing — you rock! 🤘

Before getting started, please view the wiki and read the following documentation.

Table of Contents ​

Submitting Issues and Feature Requests​

Before submitting an issue or making a feature request, please search for existing issues or look at our Github Discussions.

If you do file an issue, be sure to fill out the report completely!

Development​

Environments and Primary Branches​

There are several environments when working with Headless WordPress, both for the Frontend and the Backend.

Next.js (Frontend)​

  • Vercel Prod - main branch - Auto deploy
  • Vercel Develop - develop branch - Auto deploy
  • Vercel Preview - Auto generated with each branch and PR.

WordPress (Backend)​

Note: The WordPress install has a seperate Github Repo.

Git Workflow​

  1. Create a feature branch off main
  2. Work locally adhering to coding standards
  3. Merge your feature into develop to test on WPE Dev environment
  4. When your feature has been tested on WPE Dev, open a Pull Request (PR) and fill out the PR template
  5. Your PR must pass assertions and both Vercel and Chromatic need to complete a preview deployment successfully
  6. After peer review, the PR will be merged back into main
  7. Repeat ♻️

PR Preview Deployments​

Vercel and Chromatic are connected to this Github repository and will automatically build and deploy a unique URL for each Pull Request.

Learn more about Vercel + Github and Chromatic + Github integrations.

Code Linting​

This project has several rulesets and uses ESLint, Prettier, and Stylelint to enforce standards.

In addition to real-time linting, you could run the following commands in your terminal.

These commands are also used in a pre-commit hook.

Lint JavaScript:

npm run lint:js

Lint CSS:

npm run lint:css

Format your code:

npm run format

Tips to help your PR get approved​

  1. Make sure your code editor supports real-time linting and has the recommended extensions installed
  2. JSDocs are required for all JavaScript functions
  3. Run npm run build && npm run start before submitting your PR, to ensure a successful build
  4. Be courteous in your communications

Storybook​

To work with Storybook on your Local, run the following command:

npm run storybook

Stories are written in .mdx and should be placed next to the component.

Learn how to write stories for this starter.