Im trying to use the azure environment variables with my react build. So far I have an appsettings.json file that I load into react with:
import settings from './appsettings.json';
I then have webpack copy the json into build folder which goes to azure. However I think after build the app isnt actually loading the file as I can see some of my variables embedded in the "chunk.js" so its not actually reaching out the the json file in root anymore? Am I importing the file in the wrong way?
C
Two possible solutions:
var json = require('./data.json'); //with path
change your settings.json to settings.js and use module.exports = {} in it.
I believe azure would accept different forms of setting files, not limited to json.
Related
I've just started using Nx and I'm moving my existing project over to a Monorepo environment.
The problem I have is with the NestJs app. For some reason the configuration file never gets read. I've tried moving it to different locations but I can't find where to put the config file. It doesn't ever seem to get read?
Are configs supported?
Do you have any ideas of where I should put the file?
Looks like you need to use the env files directly now.
import { environment } from './environments/environment';
...
environment.settingName
In my project I'm using the Microsoft React Redux Template (Microsoft React) with typescript. My problem is I need to keep set of frontend configurations like API base URL ect. I've used a Config.Json file. But when the project is build, every javascript file that referenced the Config.Json file get referenced and copied the content of the .Json file, at the minifying process. So I have to manually go through the each minified .js file and change the configurations when moving from Dev to QA or QA to Prod.
I tried to keep the configurations in a JS file, but still same problem occurs.
Is there a way to stop referencing the Config.Json file at JS minifying process. So that when I change the Config.Json file, the changes of the configurations will get applied.
Maybe you need to use environment variables.
npm i dotenv -D
import configTest from 'config.test.json';
import configProd from 'config.prod.json';
const config = process.env.BUILD_TARGET === 'prod' ? configProd : configTest;
I'm currently using Webpack to manage configuration for my React JS app.
I have a config.development.json file that is loaded by my development build script. It contains
{
"primary1Color": "pink"
}
It's loaded in the Webpack script as follows
externals: {
configuration: JSON.stringify(require("./config.development.json"))
}
There's a similar set up for production builds.
I reference the config parameters in my app as follows
import configuration from "configuration";
const mainColor = configuration.primary1Color;
This is all working.
However, I'd like to allow the settings to be configured post-deployment---i.e. have the app read the config file when it runs. Then, if customers wish to change the color scheme, they can do so without me having to rebuild the app.
How can I get the app to dynamically load my JSON config file?
You don't have to bundle it with webpack. You can use normal ajax call to load the json or use script.js.
https://github.com/ded/script.js
However if you really want to use webpack loader, you can try external-loader.
https://github.com/sheerun/external-loader
More discussion here:
"Require external (unmanaged) file"
I think the best approach would be to create an API endpoint that react interacts with to load them.
I am trying to load a utility file called as apiclient which is present in
app/stores/util
My distribution folder has a file cfile.js which is calling this file using the following code :
var api = require('../util/apiclient');
I am able to load the component files etc which are present in the app/components folder via a similar code and they work without any issue. But when i try to load the API client i just keep getting this error.
Uncaught Error: Cannot find module '../util/apiclient'
This is how my files and directories are present http://prntscr.com/7qkovs
Could someone help me out over here ?
Thanks
Well your structure is like this:
clinical-notes
app
stores
util
apiclient.js
dist
cfile.js
So when going from cfile.js to apiclient.js the correct require path would be ../app/stores/util/apiclient.js.
But this is neither a reactjs nor flux problem ;)
Like most js web apps we have a config.js file that contains global config information about the app, base api urls and such. These values are often different in local development than in production.
I've looked at answers like: Development mode for AngularJS using GruntJS, and also things like grunt-replace for creating an on-the-fly config file.
My issue is that the "development" part varies from developer to developer, we all need a version of the API setup so the base api urls will be different. I'd like to allow each developer to override specific variables in the config in a way that doesn't require them to commit that info to the git repo (I agree that this isn't best practice, everything should be in the repo, but as this is only 1/2 variables for this project I can overlook it)
Any ideas on how to achieve this setup?
You can use grunt-preprocess. I would have production (and dev-server, etc) values in a file, say env.json. You could use grunt to look for an optional file, say overrides.json or developer.json, which would extend/overwrite the values from env.json.
var envFile = require('./env.json');
You can create command line options to grunt with grunt.option, e.g. var env = grunt.option('env') || undefined;, which could be used to turn off overriding.
You can get data from the optional file using fs.existsSync:
var fs = require('fs');
var developerFile;
if (fs.existsSync('./developer.json')) {
developerFile = require('./developer.json');
}
The simplest way to define the grunt-preprocess context would be to use the developer.json file if present, or the env.json file if not:
context: developerFile ? developerFile : envFile;
This requires the developer file to be complete. An alternative is to extend the envFile with options from developerFile if it's present.
In my project, we use different config files (which are basically files with JS object). So every developer has his app/configs/developer/config.js file, which is not comited in the source control, so every developer has his own setup. Project uses link to app/scripts/config.js by default and this file is just a soft link to developers config file. However, there are also app/configs/staging/config.js and app/configs/production/config.js files, which are replaced when using gruntjj to build project. Those configs are just copied to build solution instead of soft linked file.
I hope that makes sense..