This option is preferred if you want to modify the UI and/or have more control over the frontend.
You will use the
external-frontend.yml
file.Prerequisites
- Docker v20.10+
- Docker-compose 2.x.x+
- Running Ethereum JSON RPC client
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.2) Pull changes from the Blockscout master branch
We assume Blockscout is already deployed in your environment.3) Navigate to the docker compose folder
4) Adjust backend envs for your instance
Replace the example environment variables in theexternal-frontend.yml
file.
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.
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 ishttp://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).

6) Check the proxy configuration
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.
It may take several minutes for the frontend to propagate during this process.
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.
- A detailed list with all available ENVs is in the frontend repo folder.
8) Check Microservice ENVs
Typically the default values will provide what you need for thecommon-visualizer.env
, common-stats.env
, and 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.