Skip to main content

Getting started with A11ystack

This is a guide on how to get started with local development of A11ystack.

Workspace​

It is recommended that you set up a local pnpm workspace for package and project development. There is a boilerplate repo for that here, with instructions on how to set it up: https://github.com/whitespace-se/pnpm-workspace

Make sure you have PNPM installed.

WSUI​

WSUI is Whitespace’s component library. It is built with React and Emotion. Add it to your workspace so that you can use it in your projects without having to install it from npm. Instruction on how to use and contribute to it can be found here: https://github.com/whitespace-se/wsui

Update your pnp-workspace.yaml file with this:

packages:
  - "wsui"
  - "wsui/storybook"
  - "wsui/packages/*"

Gatsby packages​

We have a number of Gatsby packages that we use in our projects. They are devided into three monorepos:

All our projects are currently Headless Municipio projects so you should add the first two to your local workspace. The recommended folder names for those repos are whitespace_gatsby-packages and municipio_gatsby-packages.

Update your pnp-workspace.yaml file with this:

packages:
  - "whitespace_gatsby-packages/packages/*"
  - "municipio_gatsby-packages/packages/*"

Client projects​

Gatsby​

You can add any number of client projects to your workspace as well. Having them in the same workspace as WSUI and the Gatsby packages allows for hot module reloading (HMR) and not having to install them from npm.

Add this to the .env.local.toml file in the project if you want to use the source files for WSUI for faster development:

WSUI_USE_SOURCE = true

Wordpress​

The CMS is always in a separate repo. You do not have to add these to the workspace since they do not use any of the other packages, but you can if you want to.

Node.js backend​

If the project has a Node.js backend you can add it to the workspace as well.