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.
Related
I have multiple portfolios made in React and each one of them has their own Node.js API.
I'd like to gather all frontends in only one domain so all I would have to do is using "/name-of-the-project" for each one of them. I did the steps below:
Created a new Node.js server that will work as a "general server";
In this general server, I set the folder public to be used for static files;
Built any of the React apps (npm run build);
Moved the deploy codes to the public folder of the general server;
Set the cors() in the API's (the ones I mentioned React apps were built with) of the frontends to allow requests from the general;
An example of how the general server became with a React deploy:
When I access http://localhost, it works. But remember I said I had multiple projects? So I created folders inside the public folder to put each React deploy in their respective folder. Let's say:
Now if I enter http://localhost/frontend-1, for example, it doesn't work
What I tried to do before creating this question?
I created a simple index.html inside each folder and they work. Only React deploys don't.
If it helps anyway, this is the general Node.js code:
I think what you are missing is the setting up the basename's of each of the react apps that you have.. I assume that you have routing in each of your application, with that you have to update its basename to point into the right directory/url.
I had a similar issue. I was building an e-commerce store with 2 separate apps - customer and admin apps.
I believe in your case the issue is that the npm run build doesn't have the relative path.
For instance, all the static files like .css in frontend-1 app should be prepended by /frontend-1 and same for others. \
To do this update the build script in your individual react apps and add PUBLIC_URL. For example in this code block i have added that for an admin app.
For more detailed explanation you can refer this youtube video.
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 )
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.
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.
We have a JS file which is accessed by different applications.
These applications able to access the JS from our staging application deployed Heroku(e.g, https://xyx.herokuapp.com/assets/businesses/affiliate/affiliate.js) but are not able access file(e.g., https://ourlivesite.com/assets/businesses/affiliate/advowire_affiliate.js from Production deployed on Digital Ocean.
It seem related to asset precompile but could not figureout the issue.
Can anybody help us to identify what could be the problem?
This JS file doesn't depend on any other JS. So We just placed that JS file into public directory.
ADDED
This is temporary solution as when asset precompiles, all the assets under public/asset would be wiped out and generated again