I'm in the process of doing my first deployment of a node.js app on Heroku. While running the app locally I stored API keys and other configuration variables in .config files excluded from version control.
Heroku seems to have built-in support for a ".env" configuration file in the project root and I've refactored my server code to support this. My question is where is the best place to store configuration variables that need to be accessible in the client? I'm running angularjs on the front-end and need to be able to access various API keys.
Is there some way I can reference the same .env file or should I be approaching this differently?
Related
Today i've deployed my client react app to Azure App Service. The problem is, that instead of displaying site im interested in, it returns structure of wwwroot. Even if I change directory to /src/App.js it return code of the App. What is the problem?
When you run a node application on Windows Azure Web Apps, IIS is used as the webserver together with iisnode and most likely some configuration is wrong so IIS doesn't know what to start. I'd suggest to let Azure handle the creation of the web.config and you don't touch it unless you know what you're doing:
Create a file .deployment with the following content
[config]
SCM_DO_BUILD_DURING_DEPLOYMENT = true
Put the .deployment file as well as the content of your React app (don't include web.config, you also don't have to include the node_modules folder, Azure will handle this as SCM_DO_BUILD_DURING_DEPLOYMENT is set to true) into an upload.zip file.
Delete the content of /wwwroot in Azure
Run az webapp deployment source config-zip -g <ResourceGroupName> -n <AppServiceName> --src upload.zip
A new web.config should get created which should contain a handler for server.js which will be the file to be served by Node.js.
This is solved. Thanks to #azium
The only thing i needed to do is run
npm run build
in local before deployment
I developed a pipeline with CI/CD on azure Devops for deploying a React app on Azure web app service. Locally I'm using a .env file and this file is on .gitignore. I want to know how can i set the .env for reading it on production.
You can check the documentation below:
https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
.env files should be checked into source control (with the exclusion of .env*.local ).
If you don't want to check in the .env files to DevOps, you could add the variables in the pipeline variables:
In addition, you can refer to the following case for more suggestions:
How to use environment variables in React app hosted in Azure
Many of the proposed solutions related to this issue may not work but I solved it the following way. However, first let me explain why other solutions may not (should not) work (please correct me if I am wrong)
Adding pipeline variables (even though they are environment variables) should not work since a react app is run on the client side and there is no server side code that can inject environment variables to the react app.
Installing environment variable task on the classic pipeline should not work for the same reason.
Adding to Application Settings in azure app service should not work for the same reason.
Having .env or .env.development or .env.production file in a git repo should not be a good practice as it may compromise api keys and other sensitive information.
So here is my solution -
Step1: Add all those .env files to azure devops library as secure files. You can download these secure files in the build machine using a DownloadSecureFile#1 pipeline task (yml). This way we are making sure the correct .env file is provided in the build machine before the task yarn build --mode development in the pipeline.
Step2:
Add the following task in your azure yml pipeline in appropriate place. I have created a github repo https://github.com/mail4hafij/react-yarn-azure-pipeline if you want to see a complete example.
# Download secure file from azure library
- task: DownloadSecureFile#1
inputs:
secureFile: '.env.development'
# Copy the .env file
- task: CopyFiles#2
inputs:
sourceFolder: '$(Agent.TempDirectory)'
contents: '**/*.env.development'
targetFolder: '$(YOUR_DEFINED_PROJECT_ROOT_FOLDER_VARIABLE)'
cleanTargetFolder: false
Keep note, secure files can't be edited but you can always re-upload.
I'm trying to understand how I can hide API keys and still run my Heroku projects in the browser. I understand how I can add an environment variable within a .env file and then add the .env file to the .gitignore file which successfully hides the file containing the key from GitHub. However, when I try to push the latest commit from the remote repo in order to get the latest version of the project with Heroku, the hosted project does not work because it does not see the key that it needs to use.
Once I figure out how to get the hosted Heroku project to work with the latest GitHub commit that hides the key, I would like to figure out how to configure the key to only work with the domain of my project and not work with any other domain address since I know that it's still possible to find the key within the source code if it's not hidden using a backend server. I haven't gotten around to learning about backend so I would want to learn how to make the key only work with my domain. Thank you for any responses.
What you can do is set the API key as a config var in the settings section of your heroku dashboard by going to your heroku app, clicking on Settings and then scrolling down the config vars.
Alternatively, you can do this through the heroku cli with heroku config:set. Check out the heroku docs here on both of these options
Update: To access the config var, you use the same syntax as other environmental variables.
For example, if you set a configuration variable called API_KEY with the value being ABCDEFG, the way you'd access it in your code (with react):
var myKey = process.env.API_KEY;
I have developed a reactjs application and have hosted in azure cloud. Now we want to implement the CI/CD process through Azure pipelines. I am quiet new in both the platforms. Need to know the process.
Currently, I have one file index.js where I have used the axios and have set the base URL to connect to the server. All my web services in different components class access this axios settings for accessing data from server. We have four environments, DEV,SIT, UAT and PROD. So for now I use to manually change the axios base URL and create the build and zip it and host it to the respective environments.
I need to understand for CI/CD what steps should I take. Most of the google finding suggested to have a config file. But how I can change my current implementation is a big challenge for me. For example my axios base URL, how it will take the value from the config file, or where I should create the config file, because when I create the build, all the js files are minified into one file and are put in the static folder. Apart from the static folder, the app icons and the files in the public folder of the project directory are listed (in the build folder). So shall I include a config file in the public folder or something else.
There are also webpack.config.dev.js and webpack.config.prod.js in the config folder of the project directory. Will it help. Because the requirement is first through Azure pipelines, the code will go to the DEV environment, then from DEV to SIT and from SIT to UAT and then to PROD. So subequently my axios Base URL should also change accordingly.
Can anyone suggest anything?
I'm not sure I fully understand your question but you could create a json file and put your config data in there, i.e. server_config.json. It would not be minified as it is not a js file. Then you will need to read the json in your code to get all the settings. Your CI/CD can also read this fille should it need to.
You should also make sure that the json config file is ignored from version control so that each environment has to have its own file.
I'm working on an Angular 2 project. I need to use restful services that cannot be exposed as CORS (the local setup is a docker container that emulates the live server), thus I need to create the angular project under the same domain.
Lets say the local domain is project.dev that already has a main web site at the root.
I was asked to build an angular 2 admin section in a sub directory (say /admin) so that it can be accessed at project.dev/admin.
When the project is done it will be easy to just copy the build in that subdirectory and have it working.
The problem is while developing it.
I'm using ancular-cli with ng serve but the site is served at localhost:4200, not the same domain, thus CORS issues.
I've tried changing it using the arguments --host and --port but the ones I need, obviously, are already used by the main site.
The partial solution was to use ng build --watch --base-href /admin/ --deploy-url /admin/ and configure outDir in anglular-cli.json to built the site in the proper location, but even if --watch is correctly rebuilding on every file changes, the browser is not refreshed as it is with ng-serve.
Unfortunately changing the server to support CORS is not an option. It is a docker container that uses JAVA as server that I'm not able to edit. Furthermore the versioned code is constantly updated by other developers.
I would like to know if it is possible to manage such a situation in a better way, mainly if is possible to serve the angular project under a local domain name while developing.
Thanks