How to use without NPM and vite

[godalming123]

Is your feature request related to a problem? Please describe: I want to be able to use web containers without NPM by just copying and pasting a few files, and then adding a script tag to my HTML.

Describe the solution you'd like: I think that their should be docs on how to achieve this, the solution shouldn't need to make network requests to external locations.

[fvsch]

Hi @godalming123,

WebContainer does not provide a built-in web server that is able to serve HTML, CSS, JavaScript files etc. Similarly, your operating system probably does not provide a built-in web server that does that, unless you install specific packages (like Apache or Nginx) or run a script in Python, PHP, Node.js or some other runtime that starts a lightweight HTTP/1.1 web server.

Locally you could run a lightweight HTTP/1.1 web server in a few different ways:

# Python
python -m http.server 8000

# PHP
php --server localhost:8000

# Java 18
jwebserver -p 8000

In JavaScript with Node.js, there is no built-in simple file web server, so we usually rely on npm packages such as serve or http-server. It's usually possible to run them in one command using npx:

# Node.js + npx and the serve package
npx serve -l 8000

WebContainer is built with the same principles in mind, and supports Node.js and npm/npx. To run a web server that serves files from the WebContainer file-system in a WebContainer context (in a web browser), you will currently need to provide your own web server:

1. Either using a npm package like serve or http-server (defining it as a dependency in a package.json file, or running it directly with npx).
2. Or writing your own Node.js script using the Node.js http module, but that can get a bit complex (see for instance this tutorial) when not using a npm package that abstracts it away a little bit (like express or fastify).

If you're looking for a good package to serve static files that is lighter than vite, I think serve is a good choice. I made a quick comparison of the install size on disk of different options:

 18M  vite
 14M  fastify + @fastify/static (not cli, requires a short script)
8.8M  http-server
7.4M  serve

(There might be even more lightweight packages. Suggestions welcome!)

Now, when running user projects on https://stackblitz.com:

• In the classic editor, we already handle serving files by providing starter templates that work out of the box (often using Vite).
• In the new editor experience, for projects and repositories which don't provide their own webserver, we're looking at ways to provide a default one (such as serve or http-server) transparently, either automatically or as a prompt to run npx.

Finally, if your request was for the WebContainer API, I believe we don't have plans to include a built-in web server in that API. Since it's a more neutral and low-level API, it's expected that users of the API will provide their own npm dependencies or Node.js-based server script. (I’ll defer to @d3lm to confirm or deny.)

[godalming123]

Hi, currently I'm using the live-server NPM package because it adds a small script to automatically reload the page on file changes, and I definitely don't want another static server implementation inside this project. I mainly want this for simplicity as it allows me to not have a node_modules folder if I install live-server globally, and it is much more portable (EG: I can just copy the code into hostinger to deploy.)

[SamVerschueren]

I created a small example with only an index.html and a script.js file. https://stackblitz.com/~/github.com/SamVerschueren/static-html

I used a .stackblitzrc to add a automated start command that spawns lite-server (identical to live-server but live-server was not auto-reloading for me 🤷 ).

Hope this helps!

[d3lm]

Regarding the WebContainer API, what @fvsch is correct. Even if you used the API then you'd have to provide your own web server implementation or defer to an npm package like serve or http-server.

[SamVerschueren]

Closing this issue as I believe there's no action we can take on our side. Let us know if there's anything else you need help with!

[godalming123]

@SamVerschueren I mean using the web containers API in JS without using NPM (the only docs I can find currently are https://webcontainers.io/guides/quickstart which only shows how to use NPM). I don't mean making websites with stackblitz without NPM. And I am happy to bring my own server implementation.

[SamVerschueren]

Instead of npm, you can spawn whatever command you want. You could do npx -y live-server as well. I created a small example for you https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-bha5op?file=main.js. As you can see, it doesn't use npm install first as it directly uses live-server to serve the files from files.js. But instead of running npx, you could also create a server.js entry (in files.js) and run await webcontainerInstance.spawn('node', ['server.js']); which then spawns your own web server.

Hopefully this answers your question?

[fvsch]

If you want a small npm package (that you could even vendor in, instead of loading from npm's registry), it looks like servor is a great tiny option: https://twitter.com/sulco/status/1747720306767048937

[SamVerschueren]

Thanks for the tip @fvsch! I've switched my tiny example to use servor now 🔥 .