FRONTEND_DEV_GUIDE.md

Frontend Dev Guide

The app is built with NextJS 14, Typescript and TailwindCSS as our web app framework.

We also use shadcn/ui as our underlying UI library.

Commands

Run the following to install all the dependencies:

npm ci

NextJS Commands

To run development server:

npm run dev

To create the production app:

npm run build

To start the standalone production app after building:

npm run start

Note that the public or .next/static folders are not copied to the standalone build folder during building based on NextJS's default output after build. Do copy them manually into standalone/public and standalone/.next/static if necessary.

Formatting/Checking Commands

To run Type check:

npm run check-types

To run Prettier format check:

npm run check-format

To run Prettier format:

npm run format

To run ESLint:

npm run check-lint

To run all checks:

npm run test-all

Do note that Flowforge repository implemented pre-commit hooks to run all these checks with Husky.

Environment Variables

We utilize the following environment variables for the Flowforge app. Please create an .env.local in development to store these variables:

NEXT_PUBLIC_APP_ENV=dev
# Add your own Auth0 Domain
NEXT_PUBLIC_AUTH0_DOMAIN=
# Add your own Auth0 Client ID
NEXT_PUBLIC_AUTH0_CLIENT_ID=
# Add your own Auth0 Client Secret
NEXT_PUBLIC_AUTH0_CLIENT_SECRET=
NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000
NEXT_PUBLIC_AUTH0_AUDIENCE=https://flowforge.com

Credits

Here are the libraries that the frontend uses:

• NextJS 14
• Radix UI
• react-jsonschema-form
• TanStack Query
• TanStack Table
• Axios
• react-hook-form
• Zod