import { Layout } from "@/components/docs/Layout";
import { Fence } from "@/components/shared/Fence";
import { Callout } from "@/components/shared/Callout";

export const meta = {
  title: "Setup Dev Environment",
  description: "Setup a development environment for Formbricks.",
};

To get the project running locally on your machine you need to have the following development tools installed:

- Node.JS (we recommend v18)
- [pnpm](https://pnpm.io/)
- [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)

1. Clone the project:

   ```bash
   git clone https://github.com/formbricks/formbricks
   ```

   and move into the directory

   ```bash
   cd formbricks
   ```

1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)

   ```bash
   pnpm install
   ```

1. To make the process of installing a dev dependencies easier, we offer a [`docker-compose.yml`](https://docs.docker.com/compose/) with the following servers:

   - a `postgres` container and environment variables preset to reach it,
   - a `mailhog` container that acts as a mock SMTP server and shows received mails in a web UI (forwarded to your host's `localhost:8025`)

   ```bash
   docker-compose -f docker-compose.dev.yml up -d
   ```

1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.

   ```bash
   cp .env.example .env
   ```

1. Make sure your Docker containers are running. Then let prisma set up the database for you:

   ```bash
   pnpm db:migrate:dev
   ```

1. Start the development server of the app:

   ```bash
   pnpm dev --filter=web...
   ```

   This only starts the Formbricks main app plus all its dependencies to save memory. If you want to start all apps at once, run `pnpm dev` instead.

   **You can now access the app on [http://localhost:3000](http://localhost:3000)**. You will be automatically redirected to the login. To use your local installation of formbricks, create a new account.

   For viewing the confirmation email and other emails the system sends you, you can access mailhog at [http://localhost:8025](http://localhost:8025)

### Build

To build all apps and packages and check for build errors, run the following command:

```bash
pnpm build
```

export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
