| | |
|---|
| | | |
|---|
| | | ### Run by source code |
|---|
| | | |
|---|
| | | Before starting the web frontend service, please make sure the following environment is ready. |
|---|
| | | - [Node.js](https://nodejs.org) >= v22.11.x |
|---|
| | | - [pnpm](https://pnpm.io) v10.x |
|---|
| | | To start the web frontend service, you will need [Node.js v18.x (LTS)](https://nodejs.org/en) and [NPM version 8.x.x](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/). |
|---|
| | | |
|---|
| | | First, install the dependencies: |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | pnpm install |
|---|
| | | npm install |
|---|
| | | # or |
|---|
| | | yarn install --frozen-lockfile |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | Then, configure the environment variables. Create a file named `.env.local` in the current directory and copy the contents from `.env.example`. Modify the values of these environment variables according to your requirements: |
|---|
| | |
|---|
| | | # different from api or web app domain. |
|---|
| | | # example: http://cloud.dify.ai/console/api |
|---|
| | | NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api |
|---|
| | | NEXT_PUBLIC_WEB_PREFIX=http://localhost:3000 |
|---|
| | | # The URL for Web APP, refers to the Web App base URL of WEB service if web app domain is different from |
|---|
| | | # console or api domain. |
|---|
| | | # example: http://udify.app/api |
|---|
| | | NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api |
|---|
| | | NEXT_PUBLIC_PUBLIC_WEB_PREFIX=http://localhost:3000 |
|---|
| | | |
|---|
| | | # SENTRY |
|---|
| | | NEXT_PUBLIC_SENTRY_DSN= |
|---|
| | |
|---|
| | | Finally, run the development server: |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | pnpm run dev |
|---|
| | | npm run dev |
|---|
| | | # or |
|---|
| | | yarn dev |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
|---|
| | |
|---|
| | | First, build the app for production: |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | pnpm run build |
|---|
| | | npm run build |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | Then, start the server: |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | pnpm run start |
|---|
| | | npm run start |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | If you want to customize the host and port: |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | pnpm run start --port=3001 --host=0.0.0.0 |
|---|
| | | npm run start --port=3001 --host=0.0.0.0 |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | If you want to customize the number of instances launched by PM2, you can configure `PM2_INSTANCES` in `docker-compose.yaml` or `Dockerfile`. |
|---|
| | | |
|---|
| | | ## Storybook |
|---|
| | | |
|---|
| | |
|---|
| | | To start the storybook server, run: |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | pnpm storybook |
|---|
| | | yarn storybook |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | Open [http://localhost:6006](http://localhost:6006) with your browser to see the result. |
|---|
| | |
|---|
| | | Run test: |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | pnpm run test |
|---|
| | | npm run test |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | If you are not familiar with writing tests, here is some code to refer to: |
|---|
