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.

Answer 2

UPDATE

The lite-server project has been updated to incorporate configurable browser selection. I'm only leaving this for historical purposes, and support ender's answer.

---

The creator of lite-server has been looking to address the issue of configuring all browser-sync options in some standard way (.rc file suggested). So this question and answer may be obsolete by the time you read it.

---

Thank you Sasxa for pointing this out...

lite-server is actually using browser-sync ...

This was critical in coming up with a solution for this particular problem (it's a little embarrassing that I had overlooked or written off as trivial var sync = require('browser-sync').create(); ... sync.init()).

However, that answer will not work as is because this...

... so you should be able to use --browser CLI command for that.

"lite:c" : "lite-server --browser chrome --open local"

...doesn't work out of the box. As it turns out, lite-server is not doing anything with the browser argument that yargs is used to parse out. I had almost edited Sasxa's answer, but decided it diverged too much, in that you really can't use the browser-sync CLI. lite-server is already using the browser-sync API. In particular, init() is being called, and the browser option needs to be specified there. There is a complete disconnect between the Angular 2 Quick start guide's package.json and browser-sync in regards to the browser command line arg.

---

The fix:

So inspired by Sasxa's answer, the browser argument will be passed to yargs.argv, with value chrome.

lite-server.js would have to be modified to pass it along to browser-sync. This can be added as a property on the options object...

var options =
  {
    openPath: openPath,
    files: argv.files ? argv.files : [
      openPath + '/**/*.html',
      openPath + '/**/*.css',
      openPath + '/**/*.js'
    ],
    baseDir: argv.baseDir || './',
    fallback: '/' + openPath + '/index.html',
    browser: argv.browser || "default" // add this line, ~line 24
  };

Then, when browser-sync's init() is called, specify the browser option.

sync.init({
  port: argv.port || 3000,
  server: {
    baseDir: options.baseDir,
    middleware: [
      log(),
      historyFallback({ index: options.fallback })
    ]
  },
  files: options.files,
  browser: options.browser // add this line, ~line 49
});

Now, returning to the Angular 2 Quick Start package.json, the following argument values can be used for the browser argument:

• chrome
• firefox
• iexplore

like so...

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",

    "lite": "lite-server",
    "lite:c": "lite-server --browser \"chrome\"",
    "lite:ff": "lite-server --browser \"firefox\"",
    "lite:ie": "lite-server --browser \"iexplore\"",
    "lite:garbage": "lite-server --browser \"garbage\"",

    "start": "concurrent \"npm run tsc:w\" \"npm run lite:c\" ",

    "//": "start default browser:",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "//": "start chrome:",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite:c\" ",
    "//": "start firefox:",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite:ff\" ",
    "//": "start ie:",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite:ie\" ",
    "//": "if you want to see an invalid browser arg value, try...",
    "//": "concurrent \"npm run tsc:w\" \"npm run lite:garbage\" "
},

---

Some final thoughts

You may need to use "google chrome" as the browser value to get chrome to actually launch. I needed to use "chrome", whereas the docs say "google chrome"...

// Open the site in Chrome

browser: "google chrome"

// Open the site in Chrome & Firefox

browser: ["google chrome", "firefox"]

The command line open argument is being used by lite-server, as part of the startPath that is passed to browser-sync. browser seems canonically correct for specifying the desired browser to launch, since it is ultimately being used by that name in browser-sync. Also, in regards to this, Sasxa's answer was incorrect in assuming --open local would make it to browser-sync unscathed. That will actually cause a corrupted path, because it is consumed by lite-server, and transformed into a path like \local\index.html, instead of \.\index.html if left unspecified.

Answer 3

lite-server is actually using browser-sync, so you should be able to use --browser CLI command for that.

"lite:c" : "lite-server --browser chrome --open local"

Answer 4

Make a file name "bs-config.json" in your project folder and add below code to that file:

{
"browser": ["chrome","firefox"]         //to make chrome to default browser
}

Answer 5

For MacOS, I had to use the case sensitive value in the "bs-config.json" file:

{
  "browser": "Google Chrome"
}

Answer 6

For Windows (and Mac) newbies (and not so newbies :): Your first impulse may be to look for 'bs-config.json' within your project directory. You won't find it. You need to create a file under the root project directory and name it bs-config.json. Within it you specify the browser of your preference, per the above answer -i.e.,: {"browser": "chrome" }

The reason being is that file lite-server.js looks for the above config file; if it doesn't find it, it uses lite-server defaults, defaulting Internet Explorer on Windows systems.

Answer 7

Using Debian/Ubuntu and update-alternatives

I was able to confirm that you can change this process globally through this command here. Currently lite-server uses browser-sync which uses opn which bundles its own copy of a xdg-open. You can configure this with,

sudo update-alternatives --config x-www-browser

I found it preferable. It takes effect on all angular2 examples, and persists for the rest of the OS too. You can also make the links open in incognito (instructions in the link above).