✨ Your new, shiny Nx workspace is ready ✨.
A packing list application with comprehensive authentication flows and local Supabase development setup.
- Node.js & pnpm
- Docker Desktop or Podman
- No global installs required (Supabase CLI is included locally)
-
Install dependencies
pnpm install
-
Set up local Supabase
pnpm setup:supabase
-
Start the application
pnpm nx serve frontend
-
Run e2e tests
pnpm nx e2e frontend-e2e
The app includes comprehensive authentication flows with test users for e2e testing:
- Regular User:
e2e-test@example.com/testpassword123 - Admin User:
e2e-admin@example.com/adminpassword123 - Google OAuth:
e2e-google@example.com(mocked for testing)
See Supabase Local Setup Guide for detailed authentication testing documentation.
- Authentication Setup - Authentication implementation details
- Supabase Local Development - Complete local setup guide
- Contributing - Development workflow and guidelines
pnpm nx serve frontend # Start frontend dev server
pnpm nx test auth # Run auth package tests
pnpm nx test auth-state # Run auth state tests
pnpm nx lint # Lint all projects
pnpm nx build # Build all projectscd packages/supabase
supabase start # Start local Supabase
supabase stop # Stop local Supabase
supabase status # Check service status
supabase db reset # Reset database with seed data
supabase studio # Open Supabase Studiopnpm nx e2e frontend-e2e # Run all e2e tests
pnpm nx e2e frontend-e2e --grep "auth" # Run auth e2e tests
pnpm nx run-many -t test # Run all unit tests
pnpm nx run-many -t lint,test,build # Run CI checksThis workspace includes:
- Frontend (
packages/frontend) - Vike + React application - Auth (
packages/auth) - Authentication service with Supabase - Auth State (
packages/auth-state) - Redux-based auth state management - Shared Components (
packages/shared-components) - Reusable React components - Supabase (
packages/supabase) - Local Supabase configuration and seeds - E2E Tests (
e2e/frontend-e2e) - Comprehensive end-to-end testing
Learn more about this workspace setup and its capabilities or run npx nx graph to visually explore what was created.
npx nx g @nx/js:lib packages/pkg1 --publishable --importPath=@my-org/pkg1To build the library use:
npx nx build pkg1To run any task with Nx use:
npx nx <target> <project-name>These targets are either inferred automatically or defined in the project.json or package.json files.
More about running tasks in the docs »
To version and release the library use
npx nx release
Pass --dry-run to see what would happen without actually releasing the library.
Nx automatically updates TypeScript project references in tsconfig.json files to ensure they remain accurate based on your project dependencies (import or require statements). This sync is automatically done when running tasks such as build or typecheck, which require updated references to function correctly.
To manually trigger the process to sync the project graph dependencies information to the TypeScript project references, run the following command:
npx nx syncYou can enforce that the TypeScript project references are always in the correct state when running in CI by adding a step to your CI job configuration that runs the following command:
npx nx sync:checkTo connect to Nx Cloud, run the following command:
npx nx connectConnecting to Nx Cloud ensures a fast and scalable CI pipeline. It includes features such as:
- Remote caching
- Task distribution across multiple machines
- Automated e2e test splitting
- Task flakiness detection and rerunning
Use the following command to configure a CI workflow for your workspace:
npx nx g ci-workflowNx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
Learn more:
- Learn more about this workspace setup
- Learn about Nx on CI
- Releasing Packages with Nx release
- What are Nx plugins?
And join the Nx community: