Using create-react-app I have an application that runs within a .war which is deployed on tomcat. My question is as follows,
http://ip_addr:port/my_application_context/
I need to be able to set the ip_addr:port/my_application_context, variable to whatever I want, at runtime, in production because all of our customers use different paths.
Right now I can use a .env.production properties file to change it and it works fine the but is I need to change it then build the app. Which isn't going to work in a production environment.
Is there any way to do this using an external properties file?
You can consider to have a Configuration API which is invoked before mount of app component and get the details of environment settings you want.
In general env variable file are meant to be changed before any build. If your settings are changing frequently then it should be part of Configuration API response.
Related
I have a project and we use Angular web components to include the functionality in another
non-angular project. Fine this works well.
I would like to use a web worker. Again, this is fine, and works when used in a regular angular app.
When I build the app to use it as a component, the worker file is outputted to separate file called 33.js (will this always be names 33.js? I suspect not, though thus far it has always been).
This name is resolved in the complied js.
I use an npm script to concatenate the output files to one file, for easy distribution.
When i run my component, in the non-angular project page, it will try to load the 33.js file. However:
The file path of 33.js is expected to be local to the page, which it wouldn't be, it would be in a scripts folder.
The file wouldn't be there (the scripts folder), as I haven't moved it.
How can I bundle this file along with my main web component either by setting the path and filename, or better yet in the main component file. (or some other magical way)
Thanks.
I have a question about my Next.js project.
I have configured my project to be build over the standalone mode for the deployment
experimental: {
outputStandalone: true
}
Using this, it generates me a standalone folder with a server.js like expected.
The main issue is that I am using an env variable in my sources, called NEXT_PUBLIC_API_BASE_URL
When I start my project in development mode (using next serve), it works fine.
But when I start the standalone generated file (using node server.js) it does not work.
It seems that the file is loaded on the "server side", when I console.log its value in the .next/standalone/server/pages/_app.js it shows the right value in the node console.
But it looks like next is using files under .next/static/chunks/pages/ and an other app.js that does not seem to access process.env (on browser side).
I thought that prefixing my env var with NEXT_PUBLIC was meant to work this way, it seems not.
Any idea on how it works there ?
On your build server, create the file name ".env" and put all of your environments.
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
please refer Docs
I'm running into a bit of a dilemma with a repository in Github when I try to host the project on Netlify. The project includes a file named config.js and is referenced on both HTML pages. It includes some variables and a function to store my Google Maps API key, so I created a .gitignore file to hide it in my Github repository. The problem is, now that I've deployed it in Netlify, I'm not sure how to reference the config.js as an environment variable or something similar so that Netlify is able to find my Google Maps API key when it renders the site. Right now, the site renders, but it doesn't quite work because I'm running into errors since Netlify cannot see my config.js file.
You'll see my file structure below including the .gitignore command and my config.js that stores the Google Maps API key with the following variables and function calls:
let head = document.getElementsByTagName("head").item(0);
let script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute(
"src",
"<MY GOOGLE MAPS API KEY>"
);
head.appendChild(script);
My question is, how do I go about referencing the variables above that store my API key in an environment variable on Netlify? Or, is there a way to give only Netlify access to the config.js file without exposing it in Github?
There's some documentation on Netlify about deploy keys and submodules, but I don't understand that part of the docs and I'm not sure if they're even relevant to my problem.
You can add variables that you want to be included as part of your static site to Netlify's environment variables, as you've mentioned. That keeps them out of the Git repository.
The tricky part is getting those variables out of the Netlify build environment and into your source code. You have at least two different options, depending on how sensitive your variables are:
If you don't want your variables to be checked into Git but you are OK having them embedded into your public Javascript/HTML files (Google Maps API key might fall into this category), you can use a build tool like Webpack to inject environment variables into your source code. If you're using React or another framework, they usually have ways to include environment variables from the build environment. If you aren't, you may just need to write a custom build script or leverage a pre-built NPM package to inject a small <script>var myVar = "<myEnvironmentVariableValue>";</script> into your HTML page on build. Actually it looks like Netlify can inject some custom script into your page. Maybe you could try that.
If your variables are more sensitive and you don't want them publicly exposed, you need to add an actual server-side component. This could be as fancy as a serverless API or a standard humdrum web server. Then when your front-end needs this secret variable, it reaches out to the server and asks for it, presumably from within an authenticated portion of your website. That keeps the variables out of the public HTML/JS but still lets your site access them on demand.
I'm building SPA with Vue and serve it with nodejs and wrapping it in docker container.
Here is the problem, I'm trying to stick to 12 factor app where for configuration it says keep in env file.
VueJS provides configs for different environment in config folder. But, according to 12 factor app config should not be in files based on environment.
In a twelve-factor app, env vars are granular controls, each fully orthogonal to other env vars. They are never grouped together as “environments”, but instead are independently managed for each deploy.
So how can I access nodejs environment variables in VueJS app?
EDIT:
Thanks for the answers.
The whole idea is to change for example api url on run time trough providing different env variable. If I commit the config file with api url, I would have to rebuild the container on commit and deploy it just for this small change.
I could also have a api access key that is different in dev and prod.
I'm looking for the best way possible to do this kind of things in SPA.
SPA applications nowadays usually go through a build step. This means compiling all of your files into [near to] one dist file and an index.html which may be served statically. This creates a clear separation between front-end (VueJS) and backend (NodeJS). The index.html and js files themselves continue to be static files nonetheless.
This is usually what you want since you can scale server and client independently: Serve static files, say, through s3 + cdn and run your nodejs server independently.
I think what you want is a way to pass runtime configuration to the client. I wouldn't get too caught up on the details of actually sharing the envvars per se.
In your case, I see two possible solutions:
1) Implement an API to access whitelisted envvars from your server - You can think of this as a /config endpoint
2) Render the index.html dynamically via nodejs with something like ejs with the prepopulated envvars - You'll have more coupling between frontend and server but you could extend this to much more than envvars and, say, preopolute the frontend with prefetched data.
Regardless on how you do it, you can consider this runtime configuration for the frontend which should not be attempted to be fixed at build time since otherwise you may be expose sensitive data into static files and it is not always guaranteed that you have all the data at this time.
The way you access the env variables should be the same no matter which OS you are using. The way you set them is different though. On windows I would set an environment variable like so
set PASSWORD=somepassword
And then in the code I can access this variable by doing the following
var pw = process.env.PASSWORD;
You should be able to use this the same way in VueJS.
EDIT:
If you use docker-compose you can set the endpoint on the fly by using environment variables too. Then whenever you docker-compose up the endpoint will be updated with the current value of your environment variable. In your shell update the api endpoint to whatever you want it to be.
set API_URL=http://my-api-endpoint
Then in the docker-compose.yml you would access this value like so
version: '3'
services:
app:
image: 'myapp'
environment:
- API_URL=${API_URL}
You would still access the variable in your code using process.env.API_URL as I mentioned in my example above.
our devops team will use https://github.com/tinou98/vue-12factor
However it's really a big question mark how VueJs does not consider that as a mature frontend/spa framework.
We used to build React Apps since more than 6 years with a built-in support of externalizing env.js file ( create-react-app )
I'm working on a Windows Store App (JavaScript/HTML/CSS) that will be deployed directly to devices in our enterprise.
I want to keep the datasources (urls to Restful web APIs) as part of the configuration rather than built into the app itself so that I can set them during deployment (e.g. to set test urls and prod urls).
More generally I want to store text variables in config that is external to the app and can be pulled in by the app somehow.
I thought I could set some environment variables or something but Windows Store Apps can't read them it seems.
Any ideas?
You could certainly make an HTTP request from the app on startup to retrieve a configuration file, but that of course assumes connectivity which may or may not work in your scenario. For a Store-acquired app, this is really the only choice.
In your scenario, however, you'll be doing side-loading through a Powershell, correct? (This is implied in installing directly to devices.) In that case, the Powershell script is running in full trust and will have access to the file system during the process. This means that the script can easily deploy a configuration file into the app's local appdata folder, which the app then picks up when it runs. The app package should also contain a default configuration file that it copies into that appdata folder if such a file doesn't exist on startup.
The documentation for the add-appxpackage script that does the install is here: https://technet.microsoft.com/en-us/library/hh856048.aspx.
Another option you might be able to use is to build different versions of your packages for test and production deployment. It is possible to configure the build process in Visual Studio to selectively bring in different versions of a file depending on your build target (e.g. Debug or Release). I have a blog that describes this technique on http://www.kraigbrockschmidt.com/2014/02/25/differentiate-debug-release-builds-javascript/. This would allow you to package different versions of a configuration file into the package, which you'd then read from the package install location at runtime or copy to appdata if you wanted to make changes at runtime.
I mention this method for building different packages because it's something that doesn't need you to do anything other than change the build target. It accomplishes what you would do with #ifdef precompiler directives in other languages, which aren't available for JavaScript.