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

Answer 1

If You use Webpack There is another way to do this using the webpack-dev-server

• Install it using npm install webpack-dev-server --save-dev

• Then run webpack-dev-server or configure npm script like this :
  "start": "webpack-dev-server"

• Then navigate to http://localhost:8080

It serve per default files in the current directory. If you want to serve files from another directory you need to use the --content-base option like this:

webpack-dev-server --content-base thefolderyouwanttoserve/

More about webpack-dev-server here in the official webpack doc.

Answer 2

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 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

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 .

Hope to help you .