Opening a html file in the browser from npm script

Question

All I can find for this are solutions that require installing an npm package that will start up an http server for hosting the file. My only requirement however is opening a very simple generated html file from the local computer into the browser via a npm script, no server required, is this doable without a package?

Does this answer your question? [How to use nodejs to open default browser and navigate to a specific URL](https://stackoverflow.com/questions/8500326/how-to-use-nodejs-to-open-default-browser-and-navigate-to-a-specific-url) Especially the second answer - its suggested solution has no package dependencies. — cbr, Mar 17 '20 at 17:49
Regarding my previous comment, you'd first need to write the contents into a file if you're generating the HTML in the script. [`fs.mkdtemp`](https://nodejs.org/api/fs.html#fs_fs_mkdtemp_prefix_options_callback) may be useful to you. — cbr, Mar 17 '20 at 17:54
I'm attempting to do this through the scripts without javascript, I found that I can create a bash script with contents "start chrome "$(realpath "./jest/report.html")"" and then run that script from node — b.stevens.photo, Mar 17 '20 at 17:58
On macOS the default shell that npm-scripts utilizes is `sh`. Therefore you can utilize the built-in [`open`](https://ss64.com/osx/open.html) utility in npm scripts. For example, you can define the following npm-script in the `scripts` section of your _package.json_: `"quux": "open -a \"Safari\" ./path/to/index.html"` - Then run `npm run quux` - _Note: you can change the "Safari" part in the aforementioned npm script to another preferred browser, e.g Google Chrome, etc. Also ensure you redefined the `/path/to/index.html` part as necessary._. For a x-platform solution you'll need to use node.js — RobC, Mar 17 '20 at 18:17

score 3 · Answer 1 · answered Jun 10 '21 at 23:24

I tried the Daniel's answer, but it does not works to me.

Based on his answer, I found the open-cli package.

npm i -D open-cli

and use it (open-cli) in package.json script object like so

{
  "name": "somename",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "open-my-html": "open-cli path/to/your/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies: {
    "open-cli": "^6.0.1"
  },
  "author": "",
  "license": "ISC"
}

then run

npm run open-my-html

Now it works opening the html file on default browser.

score 1 · Accepted Answer · answered Mar 17 '20 at 17:59

1

Found that I could create a bash script with contents

#!/bin/bash
start chrome "$(realpath "./jest/report.html")"

And then run that using

"test": "jest && bash ./open-browser.sh"

answered Mar 17 '20 at 17:59

b.stevens.photo

876
2
9
18

4

Consider putting the bash code inline in the npm script itself to avoid using a separate file. For instance: `"test": "jest && bash -c \"start chrome \"$(realpath ./jest/report.html)\"\""` – RobC Mar 17 '20 at 18:46
1

Not a cross-browser solution – Amin Feb 20 '21 at 19:31
1

The question didnt ask for a cross browser solution, just how to do it without a package – b.stevens.photo Feb 20 '21 at 19:39

score 1 · Answer 3 · answered Mar 17 '20 at 18:01

1

Supposing that your node script and index.html are in the same folder

const open = require('open');

(async () => {
        await open('index.html', {"wait": true });
})();

Take a look at this package: https://www.npmjs.com/package/open

answered Mar 17 '20 at 18:01

abhnv

21
4

score 0 · Answer 4 · answered Dec 01 '20 at 13:21

the easiest way to do this is to install the open package

npm i open --save-dev

and use it in package.json script object like so

{
  "name": "somename",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "open-my-html": "open path/to/your/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies: {
    "open": "^7.3.0"
  },
  "author": "",
  "license": "ISC"
}

then run

npm run open-my-html

In the question it asked if there were a way to do this without a package — b.stevens.photo, Dec 18 '20 at 20:11

score 0 · Answer 5 · answered Sep 27 '22 at 08:58

 {   "start": "start http://localhost:8000 & npm run dev", }

just use above script this works for me. first it will open url in browser and then launch the server. issue is first url will throw error and then after runing sever page wil be auto reload.

This is better if you dont need to use any external package.

Opening a html file in the browser from npm script

5 Answers5