explorer_frontend

The frontend for the =nil; block explorer and the Playground.

Table of contents

Overview

This project contains the front-end component for the =nil; block explorer. It is a React app that uses the Styletron-react library for styling. State management is done using the Effectorjs library. The app is built using Vite.

Installation

Clone the repository:

git clone https://github.com/NilFoundation/nil.git
cd ./nil/explorer_frontend

Install dependencies:

npm install

Development

Fill the required config variables in the runtime-config.toml file stored in ./public. Presently, only API_URL is required to be set.

To override the default values, create the runtime-config.local.toml file in ./public and set API_URL to the desired value.

To start the development server:

npm run dev

This will start the development server on port 5173.

A different port can be set by specifying the PORT environment variable.

Install the biome extension for VS Code for the smoothest possible development experience. It will enable code formatting on save and paste.

Production

To build the app for production:

npm run build

This will create a dist directory with the built app.

Testing

Explorer frontend used cypress for end-to-end testing. To run the tests initialize the http server and run:

export PORT=3000 # cypress expects the app on port 3000 by default
npm run dev # initializes the server in development mode which is suitable for real-time testing

or

npm run build
npm run serve # initializes the server in production mode which is suitable for testing the production build

In this mode, it is also necessary to disable API requests batching in the runtime-config.toml file by setting API_REQUESTS_ENABLE_BATCHING to false.

Then, in a separate terminal, run:

npm run test:e2e

This will open the cypress test runner where it should be possible to select the test file to run.

To run tests in headless mode:

npm run test:e2e:ci