Frontend application for Blockscout blockchain explorer
App is distributed as a docker image. Info about the package and its recent releases you can find here.
You can configure your app by passing necessary environment variables when stating a container. See full list of envs and their description here.
Core technologies what used in the project are
- yarn as package manager
- React as UI library
- Next.js as application framework
- Chakra as component library; our theme customization could be found in
/themefolder - jest as JavaScript testing framework
- playwright as a tool for components visual testing
And of course our premier language is Typescript
Pre-requisites You should have installed Node.js v16. The best way to manage your local Node.js version is nvm
For local development please follow next steps:
- clone repo
- install dependencies with
yarn - clone
.env.exampleintoconfigs/envs/.env.secretsand fill it with necessary secret values (see description below) - to spin up local dev server
- for predefined networks configs (see full available list in
package.json) you can just runyarn dev:<app_name> - for custom network setup create
.env.localfile with all required environment variables from the list and runyarn dev
- for predefined networks configs (see full available list in
- navigate to the host from logs output
We use playwright experimental components testing for visual (screenshots) CI check. Test renders a single component in headless browser in docker, generates screenshots and then compares this screenshot with a reference one.
To perform testing locally you need to install docker and run yarn test:pw:docker
For building a docker image simply run yarn build:docker or alternatively run docker build and pass your own args.
For running app container from freshly built image with your local env config at ./.end.local use yarn start:docker:local command or run docker run manually.
Disclaimer Do no try to generate production build of the app on your local machine (outside the docker), it will fail.