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 othe

Answer 1

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.