TypeScript + Vue: Loading static json configuration when opening index.html

Question

I'm working on an app that requires an API key to be inserted into the config.

Since I'm using npm run build to generate a static page (dist folder with index.html that loads app.js and appropriate chunks and styles) - the config file gets read only once and then embedded into generated app.js.

Due to how it works, whenever I change values in the non-embedded config (available in the dist/public/ folder - the values don't refresh in app.js as they should.

Is there any way to import config dynamically whenever index.html along with attached app.js reload?

Here's what I tried:

import * as config from '../public/finnhub.config.json';

const stockProvider = reactive(new FinnhubStockProvider(config));

It does load the config - but only during the build, meaning it's constant.

tony19 · Accepted Answer · 2021-03-29 03:15:11Z

3

Importing the config file would cause it to be bundled. If you want the config file to be read on demand instead, you could fetch it:

import { onMounted, ref } from 'vue'

export default {
  setup() {
    const config = ref({})

    const fetchData = async () => {
      const resp = await fetch('/finnhub.config.json')
      config.value = await resp.json()
    }

    onMounted(() => {
      fetchData()
    })
  }
}

answered Mar 29, 2021 at 3:15

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JTinkers Over a year ago

Yes, just a point of note: this only works when you host the static files and not run index.html in your browser as a file. (double click index.html).

Kalnode Over a year ago

For that wouldn't you just need to run the same func on document load, no?

Collectives™ on Stack Overflow

TypeScript + Vue: Loading static json configuration when opening index.html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related