How do I run a program (npm) to run, when I click on the html?

JavaScript
1

I learned 3D JavaScript via the YouTube tutorial — “Three.js Tutorial For Absolute Beginners” — https://www.youtube.com/watch?v=xJAfLdUgdc4&list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho.

The tutuorial use npm. What I’ve learned:
… npm init -y
[install a bundler]
… npm install parcel --save-dev
[takes a while]
[I create an index.html file]
[install threejs]
… npm install three
[I create a script.js file]
… npx parcel src/index.html
[provides a local link … an example → Server running at http://localhost:1234/ (link via Chrome)]
[ctrl+C regains Terminal control]
… npm install dat.gui
[when I exit VS Code, and restart, I enter the npx again]
… npx parcel src/index.html

This works well. However, when I click on the html, it does not work.

How do I get a program (npm) to run, when I click on the html?

2

To run a JavaScript project that uses npm packages directly, you’ll need to build a production version of the project. This is because when developing with tools like npm and Parcel, the code often relies on dependencies that aren’t included directly in your HTML file but are bundled together by the development server.

To create said production version:

npm parcel build src/index.html

This command will create a dist directory (or another name, depending on Parcel’s configuration) with all your bundled files. It should also contain an index.html file which you should be able to open and run by double clicking on it.

1 Like
3

These are the folders:

The HTML file is under the “src” folder. I added the “Production” folder.

In the Terminal I entered:

npm parcel build Production/index.html

The error message:

Unknown command: "parcel"

To see a list of supported npm commands, run:
  npm help
4

Sorry, should probably be npx parcel build src/index.html.

But what is the output of npm run? (that should show you what commands are available)

5 
PS D:\__\Move 3D> npx parcel build Production/index.html 
🚨 Build failed.

unknown: Entry D:\\__\Move 3D\Production\index.html does not exist

PS D:\__\Move 3D> npm help
npm <command>

Usage:

npm install        install all the dependencies in your project
npm install <foo>  add the <foo> dependency to your project
npm test           run this project's tests
npm run <foo>      run the script named <foo>
npm <command> -h   quick help on <command>
npm -l             display usage info for all commands
npm help <term>    search for help on <term> (in a browser)
npm help npm       more involved overview (in a browser)

All commands:

    access, adduser, audit, bugs, cache, ci, completion,
    config, dedupe, deprecate, diff, dist-tag, docs, doctor,
    edit, exec, explain, explore, find-dupes, fund, get, help,
    help-search, hook, init, install, install-ci-test,
    install-test, link, ll, login, logout, ls, org, outdated,
    owner, pack, ping, pkg, prefix, profile, prune, publish,
    query, rebuild, repo, restart, root, run-script, search,
    set, shrinkwrap, star, stars, start, stop, team, test,
    token, uninstall, unpublish, unstar, update, version, view,
    whoami

Specify configs in the ini-formatted file:
    C:\Users\Clyde Eisenbeis\.npmrc
or on the command line via: npm <command> --key=value

More configuration info: npm help config
Configuration fields: npm help 7 config

npm@10.1.0 C:\Program Files\nodejs\node_modules\npm
6

What is the output of npm run?

7

Oops.

PS D:\__\Move 3D> npm run   
Lifecycle scripts included in yt-wael-yasmina@1.0.0:
  test
    echo "Error: no test specified" && exit 1

and

PS D:\__\Move 3D> npx run 
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\Clyde Eisenbeis\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\Clyde Eisenbeis\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\Clyde Eisenbeis\AppData\Local\npm-cache\_logs\2023-11-21T19_31_13_080Z-debug-0.log
8

Sorry man, I’m just shooting in the dark here as I don’t use parcel myself.

I’m sure it won’t be too hard though. Could you maybe put your project up on GitHub for me to have a look?

9

Have never uploaded to Github, so I uploaded it to one of my websites - https://temp.foxping.com/ => Move 3D.zip. Thanks!

10

Thanks for that. I downloaded your project and reinstalled all the dependencies, now I can run it with the command npx parcel src/index.html.

In order to create a production bundle that you can run in your browser, you need to remove this line from your package.json:

- "main": "index.js",

Now you can run:

npx parcel build src/index.html

Output:

~/Desktop/Move 3D  npx parcel build src/index.html
✨ Built in 2.71s

dist/index.html                       426 B    737ms
dist/index.c75e2010.js            703.75 KB    1.18s
dist/stars.cf888a00.jpg           863.94 KB    546ms
dist/Car.64825c7b.glb              91.98 KB    130ms
dist/index.runtime.30f86f57.js        931 B    490ms

If you look in dist/index.html you will see:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="/index.runtime.30f86f57.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Tutorial</title>
    <style>body{margin:0}</style>
  </head>
  <body> 
    <script src="/index.c75e2010.js" type="module"></script> 
  </body>
</html>

This is the file that you can run. However, you will still need a server to serve it (because of how the imports are handled). You won’t be able to open the file directly in your browser. On my Linux box I can start a server like so:

python3 -m http.server

But if you are running Windows, you can use this npm package: https://www.npmjs.com/package/http-server

There’s no need to explicitly install it, instead you run:

npx http-server

inside the dist folder and visit http://127.0.0.1:8080/.

At this point you can move your dist folder to anywhere on your PC or to another server. It now contains all of the required assets and is no longer directly reliant on anything in node_modules.

HTH

11

To be honest I don’t understand the process here. Why do you need to install a separate http server? The advantage of nodejs is that you can run it anywhere without the need of additional software. Just create a Webserver inside node itself with express for example.

12

I think we’re talking at cross purposes :grinning:

The user is using Parcel to develop their web project. In development mode, Parcel acts as a bundler. It automatically rebuilds your assets when files are changed and offers features like hot module replacement for a smoother dev experience. It also facilitates the inclusion of npm packages and handles module resolution allowing you to “npm install” things and have them available to your code.

I understood the original question to be along the lines of “How do I get my project out of Parcel and ready for deployment” and that is what I explained how to do above. Parcel will then spit out an optimized bundle (the files in the dist directory) which you can run anywhere.

I think the user wants to open these files using the file:// protocol (e.g. double-clicking on index.html). This isn’t going to work because, the compiled files rely on HTTP requests to load other assets and the file:// protocol doesn’t handle these HTTP requests in the same way a web server would.

Therefore to view the bundled project, they will need some kind of web server. I only used http-server as an example, but any web server will suffice. E.g: Apache, Nginx, Express, Koa, a Node server you built yourself in a few lines of code, or anything else.

14

Sorry for the delayed response.

I deleted “main”: “index.js”, from package.json, then ran:

npx parcel build src/index.html

This resulted in:

dist\index.html                       426 B    4.92s
dist\index.c75e2010.js            703.75 KB    3.07s
dist\stars.cf888a00.jpg           863.94 KB    397ms
dist\Car.64825c7b.glb              91.98 KB    4.72s
dist\index.runtime.30f86f57.js        931 B    3.07s

Double clicking on dist\index.html results in a blank screen.

15

Exactly. You need to run dist\index.html on a server. This is because the compiled files rely on HTTP requests to load other assets and the file:// protocol (i.e. double clicking it to open it in your browser) doesn’t handle these HTTP requests in the same way a web server would.

Try this command to start a server in the dist folder:

npx http-server

Then visit http://127.0.0.1:8080/ in your browser.

Does that work for you?

16

Using Command Prompt, inside the dist folder, I entered:

npx http-server

This resulted in:

npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\xxx\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\xxx\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\xxx\AppData\Local\npm-cache\_logs\2023-12-02T13_07_20_103Z-debug-0.log

Perhaps this is because the dist folder is on the D: drive?

Then I uploaded the contents of the dist folder to one of my websites. Now it works!

I’m still interested on understanding why it did not work on my local dist folder? Thanks!

17

Glad that it’s working.

As mentioned previously, the reason you can’t just open the file in your browser is because the bundled files rely on HTTP requests to load other assets and the file:// protocol doesn’t handle these HTTP requests in the same way a web server would.

Does that make sense, or should I go into a bit more detail?

18

I was referencing your previous post. However, it does not matter. I can upload to one of my sites in the future. Thanks for clarifying!!!

20

Ah, got it. Sorry for misunderstanding.

I’m not sure why this command failed:

npx http-server

It could certainly have something to do with paths etc. I can help you debug if you like (at least exclude the obvious things).

21

Never worked with http-server but how does the server knows his root directory if you don’t set it?

22

It is the directory in which you open it. E.g. if he opens it in D:\projects\3d-game\dist, that is then the root directory.

Visiting http://127.0.0.1:8080/ in the browser will then serve index.html if it is present, or otherwise present an overview of the files within the directory.

1 Like