What is the best way to create config file (Something like web config in .net), for storing urls, and other constants that may vary during the application deploy?
Add a comment |
3 Answers
Use the .constant() method:
angular.module('app').constant('MONGOLAB_CONFIG', { baseUrl: '/databases/', dbName: 'ascrum' }); like in this example.
Then you can just inject it where you need the constants.
You can have different files defining different constants for development or production, and then use a tool like Grunt to use this or that file according to the environment.
Let's assume you have this kind of folder structure:
|-js/ | |-app.js | |-anotherfile.js | |-... | |-env/ | |-dev.js | |-prod.js | |-index.html dev.js and prod.js defines the same .constant() service with different values. Then you can get the proper file to be concatenated with a gruntFile like that:
grunt.registerTask('default', ['concat']); grunt.initConfig({ env : process.env.NODE_ENV, src: { javascript: ['js/*.js'], config: ['env/<%= env %>.js'] }, concat: { javascript: { src:['<%= src.config %>', '<%= src.javascript %>'], dest:'myapp.js' } } }); By running grunt you would get a myapp.js file containing the good constants.
Edit: with Gulp you can do it like this:
var paths = [ 'env/' + process.env.NODE_ENV + '.js', 'js/**/*.js', ]; var stream = gulp.src(paths) .pipe(plugins.concat('main.js')) .pipe(gulp.dest('/output')); 
7 Comments
S Panfilov
This is may be the only way, but it has at last the one big problem - how to keep diferent constant values for different enviroments (example: baseUrl for dev and production env ). Look at this, may helps: stackoverflow.com/questions/16339595/…
MaximeBernard
Good idea ! Would you have the same example for Gulp ? :)
QOI
Another option would be using your version control system. Ignore the config file and add a template file with empty, default or example values. When someone clones the repo they have to create the actual file based on the template. When they push to the repo the customized config file won't be uploaded.
Fabricio
The problem I have is with Angular 2. I want to build once, and deploy to different environments, but the deployment will get only the compiled js file.
maxdec
@the.fabricio: you could do what QOI suggested. Use a unique config file but remove and ignore it from your VCS. Then on each environment you create the correct config file (for production, that should be part of the servers provisioning step). But the file wouldn't be in your main js bundle, it would come separately, in a 2nd request. + As your app probably needs it, you should have a mechanism to load it and wait for it.
|
IMHO, I don't like handling config files with task runners. Cause you will need to rebuild your whole application just to change a line or two every time you need a different configuration.
Using the .config of angular is a good thing and I would do something like (borrowing from the example of the first answer)
angular.module('app').constant('MONGOLAB_CONFIG', { baseUrl: '/databases/', dbName: 'ascrum' }); let's name this as app.config.js
And this will be linked in the .html right after the minified script like this
<script src="js/app-38e2ba1168.js"></script> //the application's minified script <script src="/app.config.js"></script> You can just then edit the app.config.js file without re running any tasks. So you can have different app.config.js files on different machines/environments without re building the app again and again
Comments
Thinking outside the box, you don't really want to use .constant as it's tied to the application. Use a config that sits outside of the app and you have more control over env configs. I have provided a link below explains the pitfalls of have configs within the angular build itself.
(function hydrateConfiguration() { "use strict"; var xhr = new XMLHttpRequest(); xhr.open("get", "conf.json", window); xhr.onload = function () { var status = xhr.status; if (status === 200) { if (xhr.responseText) { var response = JSON.parse(xhr.responseText); window.ss_conf = response; } } else { console.error("messages: Could not load confguration -> ERROR ->", status); } }; xhr.send() )()); Just a simple example where a external config file controls the state of the app and injects values outside in, instead of inside in.
https://www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables/
1 Comment
redfox05
This seems to be based on importing your vars onto the
window object. Correct me if im wrong, but the approach by @Louie Almeda seems better in that it does the same method, but imports to the angular config, and not the window? Opinions welcome