Spoke & Chain is a fictitious bicycle shop custom-built to demonstrate Craft CMS and Craft Commerce. This repository houses the source code for our demo, which you can spin up for yourself by visiting craftcms.com/demo.
We’ve also included instructions below for setting up the demo in a local development environment with DDEV.
Spoke & Chain shows core Craft CMS features and a fully-configured Craft Commerce store:
If you’d like to get Spoke & Chain running in a local environment, we recommend using DDEV:
git clone git@github.com:craftcms/spoke-and-chain.git spokeandchain && cd spokeandchain
ddev config --project-type=craftcms --project-name=spokeandchain --docroot=web && ddev start
ddev composer install
.env
file:
cp .env.example .env
ddev craft setup/keys
curl -L https://github.com/craftcms/spoke-and-chain/raw/stable/seed.sql -o seed.sql && ddev import-db --src seed.sql
ddev craft demos/seed
⚠️ The Craft site is offline by default, and the seeder turns it on when it’s finished. If you skip this step, you’ll need to manually bring the site online by navigating to Settings → General Settings and switching System Status to “Online”.
ddev craft users/create --admin
💡 If you’re using a different local environment, see Craft’s Server Requirements and Installation Instructions.
Run npm ci
with node 12. (If you’ve installed nvm run nvm use
, then npm ci
.)
If you’ve chosen a different environment setup, make sure your .env
is configured for it. These environment variables are specifically used by webpack-dev-server
:
DEVSERVER_PUBLIC
DEVSERVER_PORT
DEVSERVER_HOST
TWIGPACK_MANIFEST_PATH
TWIGPACK_PUBLIC_PATH
You can then run any of the development scripts found in package.json
:
npm run serve
to build and automatically run webpack with hot module reloading for local developmentnpm run build
to build front end assets for production💡 When using
npm run serve
, switch your site’s URL fromhttps://
tohttp://
.
This project uses PurgeCSS to automatically remove redundant or unused styles generated by Tailwind CSS.
PurgeCSS is disabled by default for the serve
script, meaning your site will be loaded with every available CSS class. It also means you’ll need to check the site after running build
to be sure important classes aren’t inadvertently stripped away.
Classes actively being used should be detected automatically, but you can encourage them to be recognized by making sure full class names appear in your template, stylesheet, and JavaScript files.
❌ For example, don’t dynamically combine text-red-
with a variable for this loop:
{% set classes = ['100', '500', '900'] %}
{% for class in classes %}
<div class="text-red-{{ class }}"></div>
{% endfor %}
✅ Loop through complete class names like so they each appear in full:
{% set classes = ['text-red-100', 'text-red-500', 'text-red-900'] %}
{% for class in classes %}
<div class="{{ class }}"></div>
{% endfor %}
If you can’t avoid programmatic concatenation, use Tailwind’s safelist option in tailwind.config.js
.
Cypress tests cover multiple parts of the website:
Set the environment variables Cypress needs to run by copying cypress.example.json
to cypress.json
and adjusting it:
cp cypress.config.example.js cypress.config.js
Open the Cypress Test Runner from the project root:
npx cypress open
Run accessibility tests only:
npx cypress run --spec "cypress/e2e/front/a11y/*.cy.js"
The source code of this project is licensed under the BSD Zero Clause License unless stated otherwise.
The imagery used by this project is the property of Marin Bikes, and used with permission. You are not free to use it for your own projects.