From b9efa340dee8d0679c400cedd28bcf93a9d517e8 Mon Sep 17 00:00:00 2001 From: Daniel da Silva Date: Mon, 21 Oct 2024 16:15:37 +0100 Subject: [PATCH] Allow for some config values to be set after build --- webapp/README.md | 33 ++++++++++++++++++++-- webapp/app/components/aois/index.tsx | 11 ++++---- webapp/app/components/aois/point-stats.tsx | 8 ++++-- webapp/app/components/home/index.tsx | 5 ++-- webapp/app/index.html | 1 + webapp/app/utils/config.ts | 8 ++++++ webapp/app/utils/loaders.ts | 7 +++-- webapp/package.json | 3 +- webapp/static/app_config.js | 1 + 9 files changed, 62 insertions(+), 15 deletions(-) create mode 100644 webapp/app/utils/config.ts create mode 100644 webapp/static/app_config.js diff --git a/webapp/README.md b/webapp/README.md index f8be376..7294676 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -33,9 +33,38 @@ These files are used to simplify the configuration of the app and should not con Run the project locally by copying the `.env` to `.env.local` and setting the following environment variables: +| | | +| ----------------- | --------------------------------------- | +| `APP_TITLE` | Application title (For meta tags) | +| `APP_DESCRIPTION` | Application description (For meta tags) | +| `PUBLIC_URL` | Full url for the app | +| `MAPBOX_TOKEN` | Mapbox token | +| `STAC_API` | STAC API endpoint | +| `TILER_API` | TILER API endpoint | + +### Runtime configuration +It is possible to change some configuration after the app is built by providing the configuration via the `app_config.js` file. + +The file should be placed in the root of the `dist` directory and should contain a single object: + +```js +window.__APP_CONFIG__ = { + {{VARIABLE}}: {{value}} +}; +``` +A JSON object can also be used but needs to be converted to an object. + +```js +window.__APP_CONFIG__ = JSON.parse('{{JSON_STRING}}'); +``` + +The following variables can be changed at runtime, while the other ones are needed during the build process: +| | | +| -------------- | ------------------ | +| `MAPBOX_TOKEN` | Mapbox token | +| `STAC_API` | STAC API endpoint | +| `TILER_API` | TILER API endpoint | -| --- | --- | -| `{{VARIABLE}}` | {{description}} | ### Starting the app diff --git a/webapp/app/components/aois/index.tsx b/webapp/app/components/aois/index.tsx index ac12fc0..a749458 100644 --- a/webapp/app/components/aois/index.tsx +++ b/webapp/app/components/aois/index.tsx @@ -32,11 +32,12 @@ import { DataIndicator, IndicatorLegend } from './data-indicator'; import { PointStats } from './point-stats'; import { ShareOptions } from './share-options'; -import { AreaTitle } from '$components/common/area-title'; +import config from '$utils/config'; import { IndicatorProperties, FeatureProperties } from '$utils/loaders'; +import { AreaTitle } from '$components/common/area-title'; import { FloatBox } from '$components/common/shared'; import { Timeline } from '$components/common/timeline'; import { DatePicker } from '$components/common/calendar'; @@ -173,7 +174,7 @@ function LakesSingle(props: LakesLoaderData) { daysToRequest.forEach((day) => { dataFetcher.fetchData({ key: ['lakes', lake.properties.idhidro, day.toISOString()], - url: `${process.env.STAC_API}/collections/whis-lakes-labelec-scenes-c2rcc/items/${lake.properties.idhidro}_${format(day, 'yyyyMMdd')}` + url: `${config.STAC_API}/collections/whis-lakes-labelec-scenes-c2rcc/items/${lake.properties.idhidro}_${format(day, 'yyyyMMdd')}` }); }); }, 500), @@ -258,7 +259,7 @@ function LakesSingle(props: LakesLoaderData) { [lake] ); - const lakeIndicatorTileUrl = `${process.env.TILER_API}/collections/whis-lakes-labelec-scenes-c2rcc/items/${itemId}/tiles/{z}/{x}/{y}?assets=${activeIndicator.id}&rescale=${[valueMin, valueMax].join(',')}&colormap_name=${colorName}`; + const lakeIndicatorTileUrl = `${config.TILER_API}/collections/whis-lakes-labelec-scenes-c2rcc/items/${itemId}/tiles/{z}/{x}/{y}?assets=${activeIndicator.id}&rescale=${[valueMin, valueMax].join(',')}&colormap_name=${colorName}`; return ( <> @@ -295,7 +296,7 @@ function LakesSingle(props: LakesLoaderData) { onOptionChange={onMapOptionChange} /> logotype + diff --git a/webapp/app/utils/config.ts b/webapp/app/utils/config.ts new file mode 100644 index 0000000..ac51a26 --- /dev/null +++ b/webapp/app/utils/config.ts @@ -0,0 +1,8 @@ +export default { + MAPBOX_TOKEN: process.env.MAPBOX_TOKEN, + STAC_API: process.env.STAC_API, + TILER_API: process.env.TILER_API, + + /* @ts-expect-error __APP_CONFIG__ is the global config injected data */ + ...window.__APP_CONFIG__ +}; diff --git a/webapp/app/utils/loaders.ts b/webapp/app/utils/loaders.ts index 2db15cb..7d6a069 100644 --- a/webapp/app/utils/loaders.ts +++ b/webapp/app/utils/loaders.ts @@ -1,8 +1,11 @@ import axios from 'axios'; import { Feature, FeatureCollection, MultiPolygon } from 'geojson'; import { defer } from 'react-router-dom'; + import { round } from './format'; +import config from '$utils/config'; + interface StacSearchResponse extends FeatureCollection { context: { @@ -69,7 +72,7 @@ export interface IndicatorProperties { export async function requestLakes() { const dataPromise = async () => { const data = await axios.get( - `${process.env.STAC_API}/collections/whis-lakes-labelec-features-c2rcc/items?limit=100` + `${config.STAC_API}/collections/whis-lakes-labelec-features-c2rcc/items?limit=100` ); return data.data; @@ -88,7 +91,7 @@ export async function requestSingleLake({ const dataPromise = async () => { try { const { data: lakeData } = await axios.get( - `${process.env.STAC_API}/collections/whis-lakes-labelec-features-c2rcc/items/${params.id}`, + `${config.STAC_API}/collections/whis-lakes-labelec-features-c2rcc/items/${params.id}`, { signal: request.signal } diff --git a/webapp/package.json b/webapp/package.json index 4b622c4..5c34542 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -100,7 +100,8 @@ "use-pan-and-zoom": "^0.6.5" }, "parcelIgnore": [ - ".*/meta/" + ".*/meta/", + ".*/app_config.js" ], "alias": { "$components": "~/app/components", diff --git a/webapp/static/app_config.js b/webapp/static/app_config.js new file mode 100644 index 0000000..f0c7eb3 --- /dev/null +++ b/webapp/static/app_config.js @@ -0,0 +1 @@ +window.__APP_CONFIG__ = {}; \ No newline at end of file