import { MdxImage } from "@/components/MdxImage";

export const metadata = {
  title: "Formbricks Open Source Contribution Guide: How to Enhance yourself and Contribute to Formbricks",
  description:
    "Join the Formbricks community and learn how to effectively contribute. From raising issues and feature requests to creating PRs, discover the best practices and communicate with our responsive team on Discord",
};

#### Contributing

# Get started

We are so happy that you are interested in contributing to Formbricks 🤗 There are many ways to contribute to Formbricks like writing issues, fixing bugs, building new features or updating the docs.

- **Issues**: Spotted a bug? Has deployment gone wrong? Do you have user feedback? [Raise an issue](https://github.com/formbricks/formbricks/issues/new/choose) for the fastest response.
- **Feature requests**: Raise an issue for these and tag it as an Enhancement. We love every idea. Please [open a feature request](https://github.com/formbricks/formbricks/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.yml&title=%5BFEATURE%5D) clearly describing the problem you want to solve.
- **How we Code at Formbricks**: [View this Notion document](https://formbricks.notion.site/How-we-code-at-Formbricks-8bcaa0304a20445db4871831149c0cf5?pvs=4) and understand the coding practises we follow so that you can adhere to them for uniformity.
- **Creating a PR**: Please fork the repository, make your changes and create a new pull request if you want to make an update.
- **E2E Tests**: [Understand how we write E2E tests](https://formbricks.notion.site/Formbricks-End-to-End-Tests-06dc830d71604deaa8da24714540f7ab?pvs=4) and make sure to consider writing a test whenever you ship a feature.
- **New Question Types**:[Follow this guide](https://formbricks.notion.site/Guidelines-for-Implementing-a-New-Question-Type-9ac0d1c362714addb24b9abeb326d1c1?pvs=4) to keep everything in mind when you want to add a new question type.
- **How to create a service**: [Read this document to understand how we use services](https://formbricks.notion.site/How-to-create-a-service-8e0c035704bb40cb9ea5e5beeeeabd67?pvs=4). This is particulalry important when you need to write a new one.

## Talk to us first

We highly recommend connecting with us on [Discord server](https://formbricks.com/discord) before you ship a contribution. This will increase the likelihood of your PR being merged. And it will decrease the likelihood of you wasting your time :)

## Contributor License Agreement (CLA)

To be able to keep working on Formbricks over the coming years, we need to collect a CLA from all relevant contributors.

Once you open a PR, you will get a message from the CLA bot to fill out the form. Please note that we can only get your contribution merged when we have a CLA signed by you.

## Setup Dev Environment

We currently officially support the below methods to set up your development environment for Formbricks:

- [Gitpod](/docs/developer-docs/contributing/gitpod)
- [GitHub Codespaces](/docs/developer-docs/contributing/codespaces)
- [Local Machine Setup](#local-machine-setup)

Both Gitpod and GitHub Codespaces have a **generous free tier** to explore and develop. For junior developers we suggest using either of these, because you can dive into coding within minutes, not hours.

## Local Machine Setup

<Note>
The below only works for **Mac**, **Linux** & **WSL2** on Windows (not on pure Windows)!

This method is recommended **only for advanced users** & we won't be able to provide official support for this.

</Note>

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

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

1. Clone the project & move into the directory:

<Col>
   <CodeGroup title="Git clone Formbricks monorepo">

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

   </CodeGroup>
</Col>

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

<Col>
   <CodeGroup title="Install dependencies via pnpm">

```bash
pnpm install
```

   </CodeGroup>
</Col>

3. Create a `.env` file based on `.env.example`. It's already preset to work with the local development setup but you can also change values if needed.

<Col>
   <CodeGroup title="Define environment variables">

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

   </CodeGroup>
</Col>

4. Generate & set some secret values mandatory for the `ENCRYPTION_KEY`, `NEXTAUTH_SECRET` and `CRON_SECRET` in the .env file. You can use the following command to generate the random string of required length:

- For Linux

<Col>
   <CodeGroup title="For Linux">

```bash
sed -i '/^ENCRYPTION_KEY=/c\ENCRYPTION_KEY='$(openssl rand -hex 32) .env
sed -i '/^NEXTAUTH_SECRET=/c\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env
sed -i '/^CRON_SECRET=/c\CRON_SECRET='$(openssl rand -hex 32) .env
```

   </CodeGroup>
</Col>

- For Mac

<Col>
   <CodeGroup title="For Mac">

```bash
sed -i '' '/^ENCRYPTION_KEY=/s|.*|ENCRYPTION_KEY='$(openssl rand -hex 32)'|' .env
sed -i '' '/^NEXTAUTH_SECRET=/s|.*|NEXTAUTH_SECRET='$(openssl rand -hex 32)'|' .env
sed -i '' '/^CRON_SECRET=/s|.*|CRON_SECRET='$(openssl rand -hex 32)'|' .env
```

   </CodeGroup>
</Col>

5. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the Formbricks dev setup:

<Col>
   <CodeGroup title="Start Formbricks Dev Setup">

```bash
pnpm go
```

   </CodeGroup>
</Col>
   This starts the Formbricks main app (plus all its dependencies) as well as the following services using Docker:

- A `postgres` container for hosting your database,
- 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`)
- Demo App at [http://localhost:3002](http://localhost:3002)
- Landing Page at [http://localhost:3001](http://localhost:3001)

<Note>
  **WSL2 users**: If you encounter connection issues with Prisma, ensure your WSL2 instance's PostgreSQL
  service is stopped before running `pnpm go`. Use the command `sudo systemctl stop postgresql` to stop the
  service.
</Note>

**You can now access the Formbricks 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.

{" "}

<Note>
  A fresh setup does not have a default account. Please create a new account and proceed accordingly.
</Note>

For viewing the emails sent by the system, 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:

<Col>
<CodeGroup title="Build Formbricks stack">

```bash
pnpm build
```

</CodeGroup>
</Col>