Zentrace is a comprehensive block explorer and analytics platform tailored for the Zenchain blockchain. Originating as a fork from Blockscout, Zentrace has undergone significant enhancements to improve functionality and ease of deployment across various operating systems.
The Zentrace ecosystem consists of the following components:
- Zentrace Backend https://github.com/zenchain-protocol/zentrace-backend
- Zentrace Frontend (the current repository)
- Zentrace Rust Services https://github.com/zenchain-protocol/zentrace-rs
The process of setting up the development environment for Zentrace Frontend, which is built using the Next.js, differs depending on the operating system in use. This tutorial is designed to guide you through the preparation of your development environment, tailored to each of these operating systems.
To successfully compile your code, it's essential to first install the required dependencies, with the installation process varying depending on your operating system.
Git is needed to get code from repositories.
Follow the instructions based on your Linux distribution (WSL by default installs Ubuntu) https://git-scm.com/download/linux
Install Homebrew https://brew.sh and execute the following command:
brew install gitDownload and execute the installer based on your architecture https://git-scm.com/download/win
Node.js is essential for managing Frontend dependencies and compiling the application.
Execute the following commands (Ubuntu as reference, for updates please check https://nodejs.org/en/download/package-manager):
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
after installation restart the shell.
Download and execute the installer (for updates please check https://nodejs.org/en/download) https://nodejs.org/dist/v20.12.2/node-v20.12.2-x64.msi
It's the package manager used by Zentrace Frontend.
Execute the following command:
npm install --global yarn
after installation restart the shell.
Create a new folder, open it in the terminal and execute:
git clone https://github.com/zenchain-protocol/zentrace-frontend
authenticate to GitHub, after confirmation, git starts cloning the repository.
Open zentrace-frontend folder and execute:
yarnAll supported environment variables are detailed in the docs folder. Create a .env file starting from .env.example, edit variables as needed.
To start the application without errors, beside already defined, it's mandatory to set few environment variables like NEXT_PUBLIC_SENTRY_DSN and NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID.
You can also build and run the frontend within Docker directly.
docker compose up -dstarts a container using the zentrace/frontend built image and starts listening using the port 3000 (NEXT_PUBLIC_APP_PORT).
You can start the application locally for development:
Execute the following command:
yarn dev
once compiled, starts listening using the port 3000 (NEXT_PUBLIC_APP_PORT).
Only if you already built assets and envs scripts at least once.
Execute the following command:
yarn run dev:p
then starts listening using the port 3000 (NEXT_PUBLIC_APP_PORT).
When you're ready for deployment, we recommend using the Zentrace Backend https://github.com/zenchain-protocol/zentrace-backend through Docker containers. The provided Docker Compose file will automatically download and compile this repository.
Please ensure that you configure the frontend-related environment variables located at https://github.com/zenchain-protocol/zentrace-backend/blob/master/docker-compose/envs/common-frontend.env before proceeding with deployment.