31

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!

H. Pauwelyn
  • 11,346
  • 26
  • 71
  • 115
rockchalkwushock
  • 933
  • 1
  • 8
  • 18
  • 1
    Perhaps you can clarify to help improve your chances of obtaining an answer... **1**) When someone types `npm run open` via their CLI do you intend the command to launch _"the instructions for how to run the application"_ which is for example: `instructions.html`, (residing in the project folder), in their default browser at: `localhost:1234`? **2**) Or, should `npm run open` proceed to open the applications `index.html` at `localhost:1234`. If the answer to **1** is yes - does it have to be from `localhost:1234` or will simply opening `instructions.html` in the browser suffice? – RobC Dec 19 '16 at 14:41
  • @RobC my fault I did write that somewhat vaguely. What I'm aiming at is writing a script that will open the application in the user's browser (my guess is the OS would do so on the user's default browser). So the `start` script would first execute a `build` then fire up the server running on `localhost:1234` and finally `open` the application in the user's browser, hosting on `localhost:1234`. My guess is that the `open` script will need to be shell commands to do such. – rockchalkwushock Dec 21 '16 at 05:38

6 Answers6

45

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.

RobC
  • 16,905
  • 14
  • 51
  • 62
  • Thanks so much this was exactly what I've been trying to do! Great write up too. I appreciate the help. – rockchalkwushock Dec 22 '16 at 18:34
  • 1
    I don't know if this feature was available at the time, but now you can just add the `-o` option to `http-server`, and it will open a browser for you. – Lourenzo Ferreira Jun 21 '18 at 19:04
  • Spawns as https regardless of the settings, change the URL to http and it just snaps back to https every time. Page won't load with "This site can’t provide a secure connection" error always showing. – DiggyJohn Mar 13 '20 at 14:21
  • @DiggyJohn - What localhost address are you trying to access? and which browser are you using ? – RobC Mar 13 '20 at 15:01
  • @RobC You are a live saver, nothing worked for me(open, open-cli) You rock! – A B May 18 '21 at 11:53
18

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.

GorvGoyl
  • 27,835
  • 20
  • 141
  • 143
Lancer.Yan
  • 527
  • 5
  • 8
8

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.

Made in Moon
  • 1,939
  • 15
  • 19
  • 1
    Please note [OpenBrowserPlugin](https://github.com/baldore/open-browser-webpack-plugin) is abandoned and a severe vulnerability hasn't been fixed for a while. However [rodrigopandini](https://github.com/rodrigopandini) has forked it [here](https://github.com/rodrigopandini/open-browser-webpack-plugin). Use `npm install rodrigopandini/open-browser-webpack-plugin` to use it. – Mausam May 03 '19 at 08:50
1

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.

Rajan
  • 180
  • 2
  • 10
1

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.

Alexey Shurygin
  • 41
  • 2
0

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.

billyjov
  • 2,112
  • 14
  • 26