bcgov / bcgov/entity

Edit UI: get data from env instead of session storage

Open
#15,670 0 comments 0 reactions 0 assignees View on GitHub
ENTITY - DO NOT USE good first issue techdebt
Dominant language
JavaScript
Stars
23
Forks
62
Avg merge
24m
Merged PRs (30d)
1

Description

## TODO
- [ ] See #10865
- [ ] Once @pwei1018 has finished his conversion, remove references to `SessionStorage.getItem()`
- [ ] Research clean way to get from process.env without every component reaching into .env

## What is the problem?
At present, the front-end application all use axios to call a local configuration.json file. Like this:

```javascript
// fetch config from API
// eg, http://localhost:8080/basePath/config/configuration.json
// eg, https://business-create-dev.pathfinder.gov.bc.ca/businesses/edit/config/configuration.json
const url = `${origin}/${processEnvVueAppPath}/config/configuration.json`
const headers = {
'Accept': 'application/json',
'ResponseType': 'application/json',
'Cache-Control': 'no-cache'
}

const response = await axios.get(url, { headers }).catch(() => {
return Promise.reject(new Error('Could not fetch configuration.json'))
})

const authWebUrl: string = response.data['AUTH_WEB_URL']
sessionStorage.setItem('AUTH_WEB_URL', authWebUrl)
console.info('Set Auth Web URL to: ' + authWebUrl)

// many other environment variables are saved to session storage
```

## What is the impact?
While this works, it's not the typical way that configuration is loaded into a Vue application. Using non-standard approaches increases the learning curve for new team members and will make it more difficult for developers assigned to maintain the application in the future.

## Proposed solution
Use .env files instead. Like this:

```
VUE_APP_PATH=/namerequest

#vaults web-url
VUE_APP_REGISTRY_HOME_URL=https://dev.bcros.ca/
VUE_APP_AUTH_WEB_URL=https://dev.bcregistry.ca/business/auth/
VUE_APP_BUSINESSES_URL=https://dev.bcregistry.ca/business/auth/
VUE_APP_DASHBOARD_URL=https://dev.bcregistry.ca/business/
VUE_APP_ENTITY_SELECTOR_URL=https://entity-selection-dev.apps.silver.devops.gov.bc.ca/
VUE_APP_PAYMENT_PORTAL_URL=https://dev.bcregistry.ca/business/auth/makepayment/
VUE_APP_SITEMINDER_LOGOUT_URL=https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi
```

Using .env files has the benefit of being easy to override for local development. Just copy the .env to .env.local and modify as needed. The .env.local has already been added to the .gitignore file (thanks Vue team) so there's no risk of local values will be accidentally committed.

Also, referencing .env files is super easy. Instead of having to be set and get from local session storage, they can be referenced like this from any file: `process.env.VUE_APP_BUSINESSES_URL`

See sample: https://github.com/bcgov/namerequest/blob/main/.env.example

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.