soramitsu / iroha2-block-explorer-web Goto Github PK

View Code? Open in Web Editor NEW

Designing a Better World Through Decentralized Technologies

JavaScript 0.84% HTML 0.32% Vue 66.39% SCSS 11.72% TypeScript 20.23% Dockerfile 0.08% CSS 0.43%

iroha2-block-explorer-web's Introduction

iroha2-block-explorer-web

This repository is managed by Terraform!

Build

Node v20+ with Corepack is required.

corepack enable
pnpm i
pnpm build

Build artifacts will be located at dist dir.

Docker

Dockerfile with nginx.conf are also provided. Based on Deployment > Docker (nginx).

Development

Setting up the `.env` file

You need a file with environment variables to configure Vite for the frontend to properly request either mock data or interact with the backend.

To enable the mocks, write:

VITE_FAKE_API_ENABLED=TRUE

To interact with the backend, assuming you'll add an API proxy as described below, write:

VITE_API_URL=http://localhost:5173/api-proxy

Connecting to a BCE backend

One may want to see to see how the backend responds in the real time, but pointing the API endpoint directly in the VITE_API_URL property of an .env file would lead to a lot of errors like this one:

Access to fetch at 'http://localhost:port_A/...' from origin 'http://localhost:port_B' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Vite can be configured to proxy the responses.

So, we first return to the .env file and configure VITE_API_URL property as http://localhost:5173/api-proxy, if our dev shows the port as 5173.

Then we go to the Vite configuration in vite.config.js and add a new part in our defineConfig section, where our target points to the host and the port of our BCE backend instance.

export default defineConfig({
    server: {
        proxy: {
            '/api-proxy': {
                target: 'http://127.0.0.1:4000',
                changeOrigin: true,
                secure: false,
                ws: false,
                rewrite: (path) => '/api/v1' + path.replace(/api-proxy\//, ''),
            },
        },
    }
})

iroha2-block-explorer-web's People