Next.js config and setup
pnpm run dev
command from a terminal within the web
directory. Alternatively, you can run the entire application by running pnpm run dev
from the root directory.
Item | Description |
---|---|
globals.css | Tailwind global config. Uses a generated theme from ShadCN UI themes |
layout.tsx | App layout |
page.tsx | Landing page |
Item | Description |
---|---|
layouts | The dashboard layout is stored which wraps the application {children} in root/app/layout.tsx |
theme | The ThemeProvider component(s) that wrap the application. |
ui | Where ShadCN components are stored upon being generated. Configured by the components.json located in the frontend root |
*.tsx | Components used within the application |
Item | Description |
---|---|
api | The output generated by the openapi npm package. Configured in the package.json task named generate-client |
config | Stores site config. Currently contains the setup for sidebar navigation |
twConfig.ts | Tailwind colour config exported to an accessible Object. Used for assigning theme-aware colours in charts |
utils.ts | ShadCN utils |
Type hinting from the generated API client
Configure and run generate-client task
package.json
:generate-client
task is set to run off the production OpenAPI schema.generate-client:dev
task is set to use the localhost OpenAPI schema. This is useful for development, as it will use the latest schema from the backend.Ensure your production API URL is configured, or that your local API URL is correct, and then run the relevant task.Update your root layout
OpenAPI.ts
which is generated in the lib/api/client/core
directory. This file has the main configuration for the API connection as below:layout.tsx
file:components/search-users.tsx
file, as part of the form’s onSubmit function:
UserSearchResults
type which is used to set the state of the search results:
api/client/core/OpenAPI.ts
) and have it persist, do this outside of the generated files. You can see this in action in the root/app/layout.tsx
file.