use-case: web component development in deno
My use-case is quite simple, really. But I have a hard time finding the tooling to work with it.
- I have plain HTML, say "index.html", some CSS, say "app.css", and some typescript.
- I want to include this typescript in the HTML.
- I want a webserver that reloads the index.html page whenever any of the files changes
- I want to have a build process that transpiles the TS into JS so that I can package this file and possibly some more assets.
The last part is not the hard part. I expect to have to do some custom work for that and that's fine.
The first three are hard for me. I cannot find anything in deno that does this for me.
Note: I don't want a full fledged framework or even static site built from markdown. But if abusing some framework solves my cases, maybe that's fine.
All I want, is to serve, recompile (well, retranspile) and reload a few files on change. I'd exect this to be a very common use-case, so maybe I'm overlooking something obvious? It's very much like the jsfiddle and such out there, except local.
I don't need it integrated in some IDE. Just a single command that fires the dev-server and listens to files being updated (on a linux machine, if that matters).
I've somewhat managed with "trunk" which is aimed at rust/wasm development, but can do the "index.html + app.css + app.js" just fine. Reloading and rebuilding. Just that "building" is limited to minifying and not transpiling typescript to JS.
What am I missing, if anything? Is this something that deno can or wants to do at all?
18 Replies
I rolled my own dev-server. Have a look.
https://github.com/nhrones/Utilities/tree/main/Hot
- Auto-start browser - Auto transpile on change (esbuild)
- Hot reload, refresh on change.
- Auto-start browser - Auto transpile on change (esbuild)
- Hot reload, refresh on change.
Deno doesn't want to do that natively. Deno expects us to use third party to accomplish that
In addition to the previous comment, there's also this tool: https://packup.deno.dev/
Packup
📦 Zero-config web application packager for Deno 🦕
1. Serve the css as static files. Serve the html based on the route. Most HTTP server frameworks can do that.
2. Iunno much about this one.
3. You can setup a routine that makes the page ping the server every few seconds (polling). When there's a file change, the server should send a different response, prompting the webpage to reload itself.
You may want to think about using Fresh.
It does all that and more. Here is a super simple static web site that leverages Fresh to auto-transpile client code.
https://fresh-static.deno.dev/
I tried Hot and it's indeed very much what I was looking for. Thanks. It was a bit hard to figure out that I needed a .vscode/dev.json, but after reading the source that got solved. 🙂
My main issue was that it uses esbuild, and I'd rather just have the deno defaults there.
Thanks for the suggestion. That's exactly what I need. Very nice bonus that it offers a build tool as well. Saves from having to build my own through deno. wow!
All three proposed above use esbuild. It's incredibly fast and just works.
I really like that too. I'll certainly keep that in mind if I need more than this one index.html. Though, frankly, If I need a site-builder I'd rather go for hugo or zola (rust) as I'm more familiar in those setups.
Also, if you Deno-install hot, it builds the dev.json automatically.
Strange. I was getting compiler errors in Hot, but not with packup. Something to do with package resolution, I guess?
Compiler?
ah. Lol. I always throw that dir out with the linter and .gitignore: I don't use vscode and never want to accidentally add that 🙂
Ahhh. yes vscode is pretty much all I use, so I leverage the .vscode folder.
the -h help talked about some src/dev.json so I first presumed that, then dove into the source and found it was hardcoded to .vscode.
You could easily modify hot for your own use case. The big part is the code insertion for Hot reload/refresh. It doesn't mutate your index.html.
It could even use deno.json? I'm not that familiar with deno yet, but would presume everyone has that?
Yea. I'm not good at keeping readmes up to date. These are personal tools that I've used a lot.
No prob! It's very much appreciated you share them in the first place!
I've never used a deno.json ever. Fresh adds one automatically. If you look at the dependencies. I use another home grown tool called config. It's in the same git repo.
config is integrated in Hot and allows custom config for each project you run your global installed Hot server in.
HOT!
I use that sh?t in everything! 😆
I'm a very lazy old man. I love my tools that allow me to type only three letters and have everthing I need automated!
I've updated the Hot readme to further explain Hot-config!