Developing a react-app
After generating
Section titled “After generating”Generation copied .env.example to .env, ran yarn install, formatted the
code and made the first commit.
-
Run the API (a nest-api on
http://localhost:5000, the defaultVITE_APP_API_URL). Its trusted origins must includehttp://localhost:3000. -
Start the app:
Terminal window yarn dev # http://localhost:3000 -
Sign in. Opening the app redirects to
/login. Sign up, verify the email (the API sends it through SMTP, or logs it in development, depending on its mail settings), and you land back in the app.
Scripts
Section titled “Scripts”| Script | Does |
|---|---|
yarn dev |
Vite dev server (strict port: a port in use makes it exit rather than move) |
yarn build |
Typecheck the app and the build config, then build to dist/ |
yarn preview |
Serve the built dist/ |
yarn typecheck, yarn lint, yarn format:check |
What CI runs |
yarn gen |
Regenerate API types (below) |
yarn secrets [-e prod] |
Pull .env from Infisical |
API types
Section titled “API types”yarn gen downloads the API’s OpenAPI document from API_DOC_URL (default
http://localhost:5000/openapi-json) with the basic-auth credentials in
API_DOC_USER and API_DOC_PASSWORD (the API’s BASIC_AUTH_USER and
BASIC_AUTH_PASS), then writes types and Zod schemas to
src/shared/types/api/. Run it whenever the API changes, and commit the
result: it’s the contract the app compiles against. A fresh project ships
empty placeholders, so it typechecks before the API exists.
Adding a page
Section titled “Adding a page”- Add the route to
src/app/router.tsx(lazy-load anything that isn’t the first screen). - Add it to
NAV_ITEMSinsrc/app/nav.tsxif it belongs in the sidebar: the shell builds the sidebar from that list, not from the router, so a route in one and not the other is unreachable or dead. - Put its data calls in
src/features/<name>/api.tswithbaseApi.injectEndpoints.
Reaching the dev server by another hostname
Section titled “Reaching the dev server by another hostname”Vite only answers localhost by default. Through a tunnel or a wildcard DNS
name, list the hostnames in VITE_APP_ALLOWED_HOSTS (comma-separated), and add
that origin to the API’s trusted origins.