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?

Quaternion

Does this answer your question? 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. – Concierge

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 may be useful to you. – Concierge

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

On macOS the default shell that npm-scripts utilizes is sh. Therefore you can utilize the built-in open 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 – Florrie

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

Quaternion

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)\"\"" – Florrie

Not a cross-browser solution – Jibe

The question didnt ask for a cross browser solution, just how to do it without a package – Quaternion

Answer 2

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.

Interplay

Answer 3

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

Stubble

Answer 4

 {   "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.

Irrefrangible

Answer 5

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

Wenwenceslaus

In the question it asked if there were a way to do this without a package – Quaternion