> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blockscout.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Separate Frontend

<Tip>
  This option is preferred if you want to modify the UI and/or have more control over the frontend.
</Tip>

<Info>
  You will use the [`external-frontend.yml`](https://github.com/blockscout/blockscout/blob/master/docker-compose/external-frontend.yml) file.
</Info>

## Prerequisites

* Docker v20.10+
* Docker-compose 2.x.x+
* Running Ethereum JSON RPC client

Please see [https://github.com/blockscout/blockscout/tree/master/docker-compose](https://github.com/blockscout/blockscout/tree/master/docker-compose) for additional information

## Migration

### 1) Install frontend separately

Configure the app by passing the necessary environment variables when starting the Docker container.[Information about ENVs is available here](/setup/env-variables/frontend-common-envs).

```sh theme={null}
docker run -p 3000:3000 --env-file <path-to-your-env-file> ghcr.io/blockscout/frontend:latest
```

Alternatively, you can build your own docker image and run your app using that container. Please follow this [guide](https://github.com/blockscout/frontend/blob/main/docs/CUSTOM_BUILD.md).

### 2) Pull changes from the Blockscout master branch

We assume Blockscout is already deployed in your environment.

```sh theme={null}
git pull origin master
```

### 3) Navigate to the docker compose folder

```sh theme={null}
cd docker-compose
```

### 4) Adjust backend envs for your instance

Replace the example environment variables in the `external-frontend.yml` file.

```sh theme={null}
cat external-frontend.yml
```

By default, ENV variables are set to testing settings (anvil) in the `environment:` list. Replace with env vars from your existing backend. The only one you **NEED to keep** is `API_V2_ENABLED='true'` . Any values added here will override existing variables in your instance when you start the container.

```sh theme={null}
environment:
        ETHEREUM_JSONRPC_VARIANT: 'anvil'
        ETHEREUM_JSONRPC_HTTP_URL: http://host.docker.internal:8545/
        ETHEREUM_JSONRPC_WS_URL: ws://host.docker.internal:8545/
        INDEXER_DISABLE_INTERNAL_TRANSACTIONS_FETCHER: 'true'
        INDEXER_DISABLE_PENDING_TRANSACTIONS_FETCHER: 'true'
        DATABASE_URL: postgresql://postgres:@host.docker.internal:7432/blockscout?ssl=false
        ECTO_SSL_MODE: 'disable'
        SECRET_KEY_BASE: '56NtB48ear7+wMSf0IQuWDAAazhpb31qyc7GiyspBP2vh7t5zlCsF5QDv76chXeN'
        CHAIN_ID: '1337'
        API_V2_ENABLED: 'true'
        MIX_ENV: 'prod'
```

### 5) Run docker compose with FRONT\_PROXY\_PASS variable.

You will pass in the frontend proxy url when running docker compose. The standard configuration for the frontend is `http://host.docker.internal:3000` but if you've made any changes pass in your url.

Run all containers (up) and run processes in the background (-d).

```javascript theme={null}
FRONT_PROXY_PASS=http://host.docker.internal:3000 docker compose -f external-frontend.yml up -d
```

Check progress and view containers:

```sh theme={null}
Docker ps
```

You should see the following containers:

<Frame caption="">
  <img src="https://mintcdn.com/blockscout/9uuzTGHWzjbW9Lu3/images/622be7a0-image.jpeg?fit=max&auto=format&n=9uuzTGHWzjbW9Lu3&q=85&s=946b482fc7db7b73ed822589b46f3d5d" width="2304" height="316" data-path="images/622be7a0-image.jpeg" />
</Frame>

### 6) Check the proxy configuration

```sh theme={null}
cd proxy
Cat default.conf.template
```

Unless you overrode the default configs (or did not provide the `FRONT_PROXY_PASS` variable) , you will see the default port for the backend default is 4000, and 3000 for the frontend.

However, with the proxy setup the whole application will default to port 80 (which is just localhost). Your instance should now be served on localhost. [More details about the recommended proxy setup](/setup/deployment/frontend-migration/proxy-setup).

<Info>
  It may take several minutes for the frontend to propagate during this process.
</Info>

### 7) Adjust frontend ENVs if needed

There are several required ENVs for the frontend. If required variables are missing or invalid the frontend will show in error message and will not run the app.

* The common list of [frontend ENVs and descriptions](/setup/env-variables/frontend-common-envs).
* A detailed list with all available ENVs is in the [frontend repo folder.](https://github.com/blockscout/frontend/blob/main/docs/ENVS.md)

To adjust, stop the frontend container, update the env file (or pass variables directly), and restart the container.

### 8) Check Microservice ENVs

Typically the default values will provide what you need for the [`common-visualizer.env`](https://github.com/blockscout/blockscout/blob/master/docker-compose/envs/common-visualizer.env), [`common-stats.env`](https://github.com/blockscout/blockscout/blob/master/docker-compose/envs/common-stats.env), and [`common-smart-contract-verifier.env`](https://github.com/blockscout/blockscout/blob/master/docker-compose/envs/common-smart-contract-verifier.env) files.

Note that in the `smart-contract-verifier.envs` the `SMART_CONTRACT_VERIFIER__SOLIDITY__FETCHER__LIST__LIST_URL` variable is different depending on your OS. The default is Linux, if you are running macOS or Windows be sure to comment out the appropriate variables.