- Web component version of Raspberry Pi Code Editor, built with React and a custom (ejected CRA) webpack setup.
- Primary entry is the web component bundle served by the dev server at
http://localhost:3011.
src/: application code, redux, web component entrypoints.public/: static assets, Python/Skulpt libraries and shims.cypress/: end-to-end tests and fixtures.config/: webpack/jest config and build helpers..github/workflows/: CI/CD and deploy pipelines.
yarn install
cp .env.example .env
yarn start
- Node.js: use the version pinned in
.tool-versions. - CI currently runs on Node 16, so avoid using Node APIs or syntax that are not supported in Node 16 until CI is updated or aligned.
- Yarn 4 is required (
packageManagerinpackage.json). If you don't have the right Yarn version available, runcorepack enable.npm installcan fail - useyarn installinstead. - Dev server:
yarn start(webpack dev server onhttp://localhost:3011). - Env vars live in
.env(see.env.examplefor defaults). - Build output goes to
build/(gitignored).
- CI config:
.github/workflows/ci-cd.yml. - CI commands:
yarn install --immutable
yarn lint
yarn run test --coverage --maxWorkers=4 --workerThreads=true \
--reporters=default --reporters=jest-junit --reporters=jest-github-actions-reporter
- Cypress in CI starts the app with
yarn startand runs againsthttp://localhost:3011withREACT_APP_API_ENDPOINT,PUBLIC_URL,ASSETS_URLenv vars set. - Local e2e:
yarn exec cypress run
# or
yarn exec cypress open
- Do not update
CHANGELOG.md; use GitHub Releases as the source of truth for release notes. - Stylelint exists (
yarn stylelint) but is not enabled in CI.
- EditorConfig: 2-space indent, LF, max line length 80, trim trailing whitespace.
- ESLint + Prettier (via ESLint) governs JS/JSX formatting.
- SCSS linting via Stylelint (
stylelint-use-logicalenabled). - Web component uses Shadow DOM: new internal styles must be imported in
src/assets/stylesheets/InternalStyles.scss(and external libs inExternalStyles.scss); avoidrem, preferemand--scale-factor.
- Only update
public/translations/en.jsonwhen adding or changing translation keys. - Do not add or edit keys in other locale files under
public/translations/; Crowdin sync overwrites them. - Missing keys in non-en locales are intentional until Crowdin syncs; the app falls back to
en. Do not suggest adding a new key to other locale files when it appears only inen.json.
- Write descriptive commit messages that explain why a change was made.
- When applicable, include alternatives considered and why they were not chosen.
- Never commit secrets or real credentials;
.env,.env.webcomponent, and their*.localvariants are gitignored. - Never commit generated output:
build/,coverage/,cypress/screenshots,cypress/videos. - Never edit
yarn.lockby hand; use Yarn 4 to update deps. If a containerized update is required, usescripts/with-builder.sh. - Never run deployment steps locally; deploys happen in GitHub Actions with AWS/Cloudflare secrets.
- Add feature: update
src/components/hooks/redux and any affected assets; do not updateCHANGELOG.md. - Add test: unit tests live under
src/as*.test.js; e2e tests live incypress/e2e; runyarn testoryarn exec cypress run. - Refactor: keep Shadow DOM styling constraints in mind; re-run
yarn lintandyarn testafter moving files or changing imports. - Release/deploy: follow the release steps in
README.md(bumppackage.jsonversion, PR, tag release); do not updateCHANGELOG.md. Deploys are driven by.github/workflows/deploy.yml.
- Unit tests:
CI=true yarn test(withoutCI=true, Jest enters interactive watch mode which hangs). - Lint:
yarn lint(runs ESLint onsrc/andcypress/). - Cypress e2e requires the dev server to be running first (
yarn start).
README.mddocs/WebComponent.mddocs/HTML.mddocs/PythonDependencies.mddocs/Deployment.md.github/workflows/ci-cd.yml
This is a single-service frontend application (no backend, database, or Docker required).
The only service is the webpack dev server on port 3011, started with yarn start.
The editor's Python runtime (Pyodide) requires external CDN access
(cdn.jsdelivr.net). In network-restricted cloud environments, Python code
execution will silently fail (no output). HTML/CSS/JS projects work fully
offline. This does not affect unit tests or linting.
yarn start takes ~15 seconds to compile. Wait for the
webpack compiled successfully message before curling or browsing port 3011.
The test page is served at port 3011 under path /web-component.html.