Opening non-default browser with lite-server in angular2 quick start guide

Question

Having followed the TypeScript version of the Angular 2 Quick Start guide, I was wondering if it is possible, and if so how to configure the lite-server to launch a browser other than the default.

It seems lite-server will take command line args, served to it via yargs.argv. And it seems yargs will attempt to parse command line args based on fairly common standards (i.e. If a token begins with a --, it represents an argument name, otherwise an argument value) to obtain argv. lite-server will attempt to use the open property that it gets from argv, which is ultimately what launches the browser via [one of the of the node packages that launches processes]. node-open? xdg -open? Not sure, not really as important to me right now as long as my assumption (based on looking at several of these process launchers) is correct, that they all optionally take an argument defining the process to launch. If omitted, the default browser would be used since the file type to open is html, which is what happens.

If all that is correct, or at least the gist of it, then it seems I just need to specify --open chrome, for example (assuming chrome is in my PATH - working on a win machine btw), at the end of the lite command defined in package.json.

So something like...

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "lite:c": "lite-server --open chrome",
    "lite:f": "lite-server --open firefox ",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},

I apologize if this seems inane, but I won't be at a computer where I can test this for a few days, and I need to know if I have the answer and can stop researching this :). Thanks!

Answer 1

Recent changes (@2.1.0) let you set your configs, including browser(s), via bs-config.json:

{
  "browser": "chrome"
}

or

{
  "browser": ["chrome","firefox"]
}

If you want to set up separate scripts for each broswer you can do the following in your package.json:

{
  "scripts": {
    "lite": "lite-server",
    "lite:ff": "lite-server --c bs-firefox.json",
    "lite:c": "lite-server --c bs-chrome.json",
    "lite:ie": "lite-server --c bs-ie.json",
    "lite:all": "lite-server --c bs-all.json"
  }
}

While it's not the best solution since you have to copy and maintain your config in multiple files, it seems to be what is intended by the lite-server maintainer. Here's the current lite-server.js file for reference.