How to open browser to localhost through npm scripts

Question

I've been trying to figure out how to write a npm script that will culminate with the application being launched in the user's browser without them having to manually open the browser and go to localhost:1234.

Right now my script reads as:

"start": "npm run build && npm run dev",
"build": "npm run clean && npm run mkdir && npm run build:html && npm run build:css && npm run build:js",
"dev": "webpack-dev-server --inline --hot --content-base build --history-api-fallback",

Wanting to add "open": <some code here>,

So when someone goes to GitHub and clones or forks off my repository they are given the instructions for how to run the application. I just thought that automating this would be a nice little addition.

Anyone know how this is possible? I'm pretty sure it is and think it has something to do with calling a command in bash. Thanks in advance for the help!

Answer 1

This can be achieved by including a couple of additional packages in your project.

Additional packages

Install http-server:

$ npm install http-server --save-dev

and concurrently:

$ npm install concurrently --save-dev

npm scripts

Add the following open script to package.json:

"scripts": {
    "start": "npm run open",
    "open": "concurrently \"http-server -a localhost -p 1234\" \"open http://localhost:1234/build\""
 }

Note

1. start will actually be defined as follows to include the tasks you currently have:

   "start": "npm run build && npm run dev && npm run open",
   

2. The code in the open script above which reads:

   open http://localhost:1234/build
   

   ...assumes that the build task you have previously defined outputs a index.html to a build folder. If the file is named differently you will need to define it. E.g.

   open http://localhost:1234/build/the_html_file_name.html
   

3. You may need to add a delay between launching the server and opening the file, just to wait a bit til the server starts up. If that's the case then also install sleep-ms:

   $ npm install sleep-ms --save-dev
   

   and change the open script to:

   "open": "concurrently \"http-server -a localhost -p 1234\" \"sleepms 1000 && open http://localhost:1234/build\""
   

Cross platform

Unfortunately, the open command is not supported cross-platform. To overcome this issue check out opener or opn-cli and replace the command accordingly.

However, both packages, (opener and opn-cli), utilize Object.assign() so will not run in older versions of nodejs.

Edit: To open a browser window after starting the server, http-server now accepts the -o option . This can be utilized instead of either the opener or opn-cli packages.

Answer 2

You just need：
start http://localhost:1234 (I tested in Windows 10).

The scripts you need is :
"open": "start http://localhost:1234"

But you should pay attention that, in Windows 10, you must place start http://localhost:1234 before your node.js server begins.

Answer 3

For Webpack users: OpenBrowserPlugin does the trick too!

Install one dependency:

npm install open-browser-webpack-plugin --save-dev

And add this in webpack config file:

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

...

plugins: [
  new OpenBrowserPlugin({ url: 'http://localhost:3000' })
]

Update (may 2019)

Please note OpenBrowserPlugin is abandoned and a severe vulnerability hasn't been fixed for a while. However rodrigopandini has forked it here. Use npm install rodrigopandini/open-browser-webpack-plugin to use it.

Answer 4

Command to open URL (no extention or library needed) is:

"script_name": "start http://localhost:8080"

---

Put it with other commands:

"script_name": "set Node_ENV=development& start http://localhost:8080& nodemon app.js"

*NOTE: don't put it after node or nodemon command, otherwise it will not work.

---

Additional info:

• It will open the URL in default browser.

• First in browser it may show failed to load, because it takes some time for server to run. But it will refresh automatically when server will start if not then just refresh manually.

Answer 5

Change

"start": "npm run build && npm run dev",

to

"start": "open http://localhost:3000 && npm run build && npm run dev",

Works on macOS. You might need to refresh browser window after server has started.

Answer 6

var express = require('express');
var app = express();

var server = app.listen(process.env.PORT || 5000, function() {
  var port = server.address().port;
  var url = `http://localhost:${port}`;

  var start =
    process.platform == "darwin"
      ? "open"
      : process.platform == "win32"
      ? "start"
      : "xdg-open";
  require("child_process").exec(start + " " + url);
  console.log("App now running on port", port);
});