# Frontend: setup and run · Build with zero-knowledge proofs on Chromia · Learn Chromia

> The last step is to configure and launch the front end.

Source: https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-setup-run/

Build with zero-knowledge proofs on ChromiaLesson 17 of 19

1. [01Introduction to the course](https://chromia.com/learn/zero-knowledge-proof/introduction/)
2. [02Zero-knowledge proof](https://chromia.com/learn/zero-knowledge-proof/zero-knowledge-proof/)
3. [03Project setup](https://chromia.com/learn/zero-knowledge-proof/setup/)
4. [04Architecture overview](https://chromia.com/learn/zero-knowledge-proof/architecture-overview/)

Module 1: Writing Circom circuits

1. [05Overview](https://chromia.com/learn/zero-knowledge-proof/circom-circuits/)
2. [06Circom circuits: introduction](https://chromia.com/learn/zero-knowledge-proof/circom-circuits/circom-circuits-introduction/)
3. [07Circom files overview](https://chromia.com/learn/zero-knowledge-proof/circom-circuits/circom-circuits-project/)
4. [08Circom circuits: compile](https://chromia.com/learn/zero-knowledge-proof/circom-circuits/circom-circuits-compile/)

Module 2 – Dapp

1. [09Overview](https://chromia.com/learn/zero-knowledge-proof/dapp/)
2. [10Dapp: setup and run](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-setup-run/)
3. [11Dapp overview](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-overview/)
4. [12Dapp entities](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-entities/)
5. [13PLONK verification](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-verification/)
6. [14Dapp operations overview](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-operations/)
7. [15Dapp queries overview](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-queries/)

Module 3 – Frontend

1. [16Overview](https://chromia.com/learn/zero-knowledge-proof/frontend/)
2. [17Frontend: setup and run](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-setup-run/)
3. [18Frontend architecture](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-explore/)
4. [19Frontend: test](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-test/)

[Learn](https://chromia.com/learn/)[Build with zero-knowledge proofs on Chromia](https://chromia.com/learn/zero-knowledge-proof/)

17 / 19Module 3 – FrontendAdvanced

# Frontend: setup and run

## Start the client application

The last step is to configure and launch the front end.

bash

```nolines
cd client
```

bash

```nolines
npm install
```

Create a `.env` file by copying `.env_example`.

bash

```nolines
cp .env.example .env
```

Edit the configuration values.

.env

```nolines
NEXT_PUBLIC_BLOCKCHAIN_RID=<DAPP_BRID> // the brid from the deploy the dapp step
NEXT_PUBLIC_NODE_API_URL=http://localhost:7740
```

`DAPP_BRID` - set this to the brid you got when you deployed the dapp.

Run the development server:

bash

```nolines
npm run dev
```

## Access the application

With the server running, open the application in a browser:

1. Go to http://localhost:3000.
2. Connect your MetaMask wallet.
3. Log in, or register a new account.
4. Set a wallet password, which is used to encrypt your private key.
5. You can now make private transfers.

The following sections walk through each part of the application in more depth.

Written for this site from Chromia’s public course. Code samples are the course’s own.

[← Previous**Module 3 – Frontend**](https://chromia.com/learn/zero-knowledge-proof/frontend/)[Next →**Frontend architecture**](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-explore/)

On this page

* [Start the client application](#start-the-client-application)
* [Access the application](#access-the-application)