How to make an angular application take arguments from command line?

Question

I have an AngularJS application in which my code looks something like this:

myApp = angular.module('myApp',
  [
    'ui.router',
    'ngMaterial',
    'ngMessages'
  ]
);

myApp.constant('CONSTANTS', (function() {
  // Define your variable
  return {
    backend: {
      baseURL: 'http://mybackend.com:3026'
    }
  };
})());

I run this application using http-server on port number 8000 like this:

% http-server -p 8000

I want to pass in a command-line argument for the backend.baseURL such that it over-rides the value specified in the code. How can I do it??

Answer 1

What you need is at least required http-server that supported dynamic content. while your http-server is supported only static content.

And in the comment you asking which server should you use. There are thousands of web-server that support dynamic content out there. but sinc you are currently using http-server I assumed you just want a small server for local-dev.

Unfortunately, I cannot find any server that support your need without modifying their code. So I suggest you to create your own server base on a library on npm.

This is and example server using live-server.

var liveServer = require("live-server");
var fs = require("fs")

var root = process.argv[2] || "."
var port = process.argv[3] || 8000

var replaceTextMiddleWare = function(req, res, next){

    var file = process.argv[4]
    var find = process.argv[5]
    var replace = process.argv[6]

    if(file && find){
        if(req.url === file) {
                fs.readFile( root + file, "utf-8", function(e, content){
                    res.end( content.replace(find, replace))
                } )

                return;
        }
    }


    next();
}

var params = {
    port: port, // Set the server port. Defaults to 8080.
    host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
    root: root, // Set root directory that's being server. Defaults to cwd.
    open: false, // When false, it won't load your browser by default.
    ignore: 'scss,my/templates', // comma-separated string for paths to ignore
    file: "index.html", // When set, serve this file for every 404 (useful for single-page applications)
    wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
    mount: [['/components', './node_modules']], // Mount a directory to a route.
    logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
    middleware: [ replaceTextMiddleWare ] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
};


liveServer.start(params);

Then you can run your server by

nodejs myserver.js /mydocument/myproject/ 8000 config.js "http://mybackend.com:3026" "http://mydevserver.com:80"

The command accept parameters:

• Path to serve content
• Port
• File name
• Text to find
• Text to replace

This server support only one dynamic file with simple find/replace. From this point, I guess you can modify middleware to do whatever you want.

Answer 2

when Ive done this in production I use the build process for this, using gulp in this case,

  var knownOptions = {
    string: 'env',
    default: { env: process.env.NODE_ENV || 'default' }
  };

  var options = minimist(process.argv.slice(2), knownOptions);

  console.log("using config : " + chalk.blue(options.env));

we get an environment variable defaulting to default using minimist we can pass -env 'string'

then further in the code pushing a dynamic file onto app.js

  //now we use options.env
  appJS.push("env/"+options.env+".js");

env/[options.env].js here is an angular module that exports environment specific constants

Answer 3

looks like you are not using gulp but you are using node script from package.json. if you are using gulp then this should not be a problem you you use http-server via gulp. one thing you can do in your current case is as part of your run command, set process.env.baseUrl="dynamic" and then roughly speaking, use this in your code like this

return {
backend: {
  baseURL:process.env.baseUrl || 'http://fallbackurl'
}