day-02

Day 02

Challenge description

Integrate NodeJS + PNPM Workspace + React + TypeScript + Vite + Vitest with Bazel

• NodeJS (+ nvmrc)
• PNPM Workspace
• Vite
• Vitest
• React
• TypeScript

TODO

• Husky
• Workspace Linters (ESLint, Prettier, Commitlint, LintStaged, etc)

Getting Started

Use PNPM to install dependencies

pnpm install

Use PNPM to develop

pnpm --filter day-02 dev

Use Bazel to build and test

bazel build //challenges/day-02:build
bazel test //challenges/day-02:ut_test

Notices

NodeJS Workspace

We use aspect/rules-js#npm_translate_lock, which imitates behaviours of PNPM Workspace, to integrate NodeJS Workspace with Bazel, and it requires some manual steps to make it work:

Every time when a new package is added to or removed from the workspace:

1. Update npm_translate_lock's data properties in WORKSPACE.bazel

npm_translate_lock(
    # ...
    data = [
        "@//:challenges/day-02/package.json",
        "@//:package.json",
        "@//:pnpm-workspace.yaml",
    ],
    # ...
)

2. Update .bazelignore to ignore node_modules (See)

node_modules
challenges/day-02/node_modules
# ...

3. Update pnpm-workspace.yaml

packages:
  - 'challenges/day-02'

References

• Issue: Support yarn/npm7 workspaces
• Doc: aspect-build/rules_js
• Example: sourcegraph/sourcegraph
• Example: nikmmd/bazel-polyglot-mono