Skip to content

Developing a react-app

Generation copied .env.example to .env, ran yarn install, formatted the code and made the first commit.

  1. Run the API (a nest-api on http://localhost:5000, the default VITE_APP_API_URL). Its trusted origins must include http://localhost:3000.

  2. Start the app:

    Terminal window
    yarn dev # http://localhost:3000
  3. 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.

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

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.

  1. Add the route to src/app/router.tsx (lazy-load anything that isn’t the first screen).
  2. Add it to NAV_ITEMS in src/app/nav.tsx if 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.
  3. Put its data calls in src/features/<name>/api.ts with baseApi.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.