How can i use npm packages in HTML code?

Coding Help
1

I am trying to use fs-extra to create custom pages, and i can’t figure out how to use the packages in it. I have tried package.json, but it said that ‘document is not defined’.

2

1 word: webpack

i think there is a webpack template on glitch somewhere, not sure where, but it will show you how to add externals, and make a proper document item, you can call in html

3

I found the project here, but i don’t know how to use it.

Do you just install the packages and require them in the script file?

1 Like
4

Hey there,
Please provide a more informative error, such as filename, message of the error, code, etc.
So we can further look into the issue.
Furthermore, if you’re willing to invite me to your project, please send a Message with the invite URL to the app.

Happy Glitching!

5

pretty much, but you also gotta set the enviroment up

6

@Jonyk56 I don’t know how to do that either…

7

…
oof, send me the file you want to be html usable, and i will transfer it…

8

what do you mean? i have HTML, i want to be able to use NPM packages in it.

9

Hey there, @MeowCatPersonThing! Nice to see you again!

There are a lot of strong and conflicting opinions on the right or the best way to do things.
You’ll need a few things to get started. Here’s what I’ve found so far as the easiest setup to get started.

Prerequisites

You’ll need to install Node.js and NPM. Download here

Check that worked by running npm and making sure it actually prints something out.

  • Install browserify with npm install -g browserify

  • Install watchify with npm install -g watchify

Hello World for NPM modules in the browser [An example app]

  • Make sure prerequisites are installed, or install them if they are not.
  • Set up your directory with npm init: npm init
  • Install any npm modules you’d like to use. In this example, I used two modules: npm install --save arithmetic and npm install --save repeat-string
  • Write your JavaScript. You can include these files by “requiring” them at the top. I’m writing these in a file called “newway.js”
var arithmetic = require('arithmetic');
arithmetic.add(2, 4);
  • Bundle your JavaScript. You can do this with a tool like browserify, which takes your JavaScript, and the dependency modules, and puts them into one file. browserify newway.js -o bundle.js

If you use browserify like this, you’ll have to make a new bundle every time you make a change. To make it a bit easier, you can run this watchify command, which will create your new bundle every time you save your file. watchify newway.js -o bundle.js

  • Now you include a script tag with bundle.js. <script src="bundle.js"></script>

So it is a bit more steps and a few more tools — and much harder to get initially set up, but once you are familiar there is lots of good stuff there.

Here’s one more sample simple setup

index.html:

<h1>Simple Web Page</h1><script src=”simplebundle.js”></script>

main.js:

var repeat = require(‘repeat-string’);console.log(repeat(‘hey’, 100));
document.write(repeat(‘hey’, 10));

  • npm command:
    $ npm install repeat-string

  • watchify command:
    $ watchify main.js -o simplebundle.js

Good luck & hope this helps!

2 Likes
10

but i don’t think you can install npm directly with glitch…

11

Hey there, for all I know, NPM is already integrated on Glitch, or perhaps, Node.js is already integrated on Glitch, and NPM comes with Node.js. Thus, both of these softwares are built-in a Glitch app already.

12

nodejs is a direct link to npm, so glitch has to install nodejs, and they got the whole bundle

13

yes npm is there, but you should use pnpm to avoid running out of space generally

14

hey, about this again, the command npm does not work. pnpm returns this error: /usr/bin/env: ‘node’: No such file or directory

I also used enable-pnpm to no avail

The project name is night-whale if that helps.

15

You have to create a hello-express project, not hello-webpage.

1 Like
16

I have created a website which serves npm pacakges as scripts. Which can be then added to your website using a script tag.

<script src="https://npmscripts.com/package/{packagename}></script>

You can also specify a version
https://npmscripts.com/package/{name}@{version}

Then you can access the module through window.node_modules[packageName]

2 Likes
17

you should be aware of that not all npm packages can be used on the browser site though. most npm packages support only node.js releases and either need further transpiling/polyfilling or is not at all possible to release for browser due to current browser javascript engine limitations.

1 Like
18

Example:
Screenshot 2020-05-18 at 4.39.20 PM