diff --git a/README.md b/README.md index bfa011c..87d3a7b 100644 --- a/README.md +++ b/README.md @@ -17,3 +17,50 @@ Build artifacts will be located at `dist` dir. `Dockerfile` with `nginx.conf` are also provided. Based on [Deployment > Docker (nginx)](https://cli.vuejs.org/guide/deployment.html#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 +VITE_FAKE_API_ENABLED=FALSE +``` + +### 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. + +```js + 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\//, ''), + }, + }, + }, +``` \ No newline at end of file diff --git a/src/app/App.vue b/src/app/App.vue index d449cb2..fccafb6 100644 --- a/src/app/App.vue +++ b/src/app/App.vue @@ -90,6 +90,7 @@ hr { .cell { padding: 0 size(2); + align-self: center; } .nowrap { diff --git a/src/entities/asset/AssetIcon.vue b/src/entities/asset/AssetIcon.vue new file mode 100644 index 0000000..1c90d5c --- /dev/null +++ b/src/entities/asset/AssetIcon.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/src/pages/AssetsList.vue b/src/pages/AssetsList.vue index c9db1b4..84f6888 100644 --- a/src/pages/AssetsList.vue +++ b/src/pages/AssetsList.vue @@ -12,6 +12,7 @@ >