Reading JSON file at runtime

[royderegt]

Hi all,

I'm running a single Quasar build in multiple containers. Depending on the environment, I want certain variables to differ from one another. I tried doing this by adding a data.json file to the containers and reading the data using import DATA from data.json. I've noticed this data is only read once at build time, where I want my application to read this file at runtime. Is there any way to get read this data at runtime?

Thanks!

[Hashen110]

try lazy-loading or process.env

[yusufkandemir]

Imports are processed on build-time, so you won't be able to properly change the values on runtime. You can use the fs module to read/write files. To properly construct the file paths, see Electron Accessing Files | Quasar Docs.

Knowing all these, you can store your data.json file in /public, then read it like this:

// electron-main or electron-preload
import fs from 'fs'
import path from 'path'

const publicFolder = path.resolve(__dirname, process.env.QUASAR_PUBLIC_FOLDER)
const dataFilePath = path.resolve(publicFolder, './data.json')
const dataContents = fs.readFileSync(dataFilePath, 'utf-8')
const data = JSON.parse(dataContents)

[Davdup]

Thanks for this answer!
I guess this will only work in an Electron environment. But then how can I use this "data" from one of my Quasar .vue files? Sorry if that sounds stupid...

[yusufkandemir]

The category for this question is CLI - Electron mode, so the answer is targeted towards that.
You can use contextBridge.exposeInMainWorld to expose the data, or a function to load/reload the data, to your application(e.g. Vue files).

Something like this should work:
/src-electron/electron-preload.[js|ts]:

const { contextBridge } = require('electron')

let config = {}

contextBridge.exposeInMainWorld('runtimeConfig', {
  load: () => {
    const publicFolder = path.resolve(__dirname, process.env.QUASAR_PUBLIC_FOLDER)
    const dataFilePath = path.resolve(publicFolder, './data.json')
    const dataContents = fs.readFileSync(dataFilePath, 'utf-8')
    config = JSON.parse(dataContents)
  },
  get: () => config
})

/src/pages/Index.vue(or pretty much any js,ts,vue,etc. file in /src):

// You can also move this to a boot file, or just get rid of load(), and just use get
// if you want the data to be loaded once per application load
window.runtimeConfig.load()

const config = window.runtimeConfig.get()
console.log(config.whatever)

For web-based modes, you would just put data.json to your public folder, then use fetch to load the data. If you build for multiple platforms, I would recommend creating a helper function that checks for the platform, and uses fetch or window.runtimeConfig.* according to the platform. So, your application code would be simpler, you would just call a function called maybe getConfig, and it would handle everything under the hood.

[Davdup]

Ok thank you very much for these details, I begin to understand the philosophy behind this.
I'm running a Quasar v1.18 App, so the file are a little bit different as far as I understood. I created the /src-electron/main-process/electron-preload.js file as indicated here.
I edited the /src-electron/main-process/electron-main.js as indicated also, and added the piece of code you provided in one of my vue file, but I get the following error message:
Unable to load preload script Error: contextBridge API can only be used when contextIsolation is enabled and my App is starting but as soon as I want to reach the page where I use your code I get:
TypeError: Cannot read property 'load' of undefined which is normal as the preload script did not load...
If I enable contextIsolation in the electron-mai.js file I get the following error:
Uncaught ReferenceError: require is not defined at startup
I'm stuck... again... :(