D
Deno

help

use-case: web component development in deno

Bberkes2/21/2024
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?
NNDH2/21/2024
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.
LLeokuma2/21/2024
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 πŸ¦•
NNeTT2/21/2024
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.
NNDH2/21/2024
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/
Bberkes2/21/2024
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!
NNDH2/21/2024
All three proposed above use esbuild. It's incredibly fast and just works.
Bberkes2/21/2024
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.
NNDH2/21/2024
Also, if you Deno-install hot, it builds the dev.json automatically.
Bberkes2/21/2024
Strange. I was getting compiler errors in Hot, but not with packup. Something to do with package resolution, I guess?
NNDH2/21/2024
Compiler?
Bberkes2/21/2024
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 πŸ™‚
NNDH2/21/2024
Ahhh. yes vscode is pretty much all I use, so I leverage the .vscode folder.
Bberkes2/21/2024
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.
NNDH2/21/2024
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.
Bberkes2/21/2024
It could even use deno.json? I'm not that familiar with deno yet, but would presume everyone has that?
NNDH2/21/2024
Yea. I'm not good at keeping readmes up to date. These are personal tools that I've used a lot.
Bberkes2/21/2024
No prob! It's very much appreciated you share them in the first place!
NNDH2/21/2024
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!

Looking for more? Join the community!

Recommended Posts
Starting project errorsI have error in url of DenoConditional callback with deno_kv_oauthHello I am using deno_kv_oauth for my application and am trying to do the following: I want users tClear deno kv dbHow can I clear out the database? using `list` requires the keys to be known, but I just want to clehow to break console.log maximum characters limithi, im using usual `deno run file.ts` command and realized that there is a limit to number characternpm import : class is not found but it is well declared in node_moduleI try to use Tatum SDK in deno (https://github.com/tatumio/tatum-js). I pick up the easiest code exaInteractive Jupyter notebookHas anyone figured out how to do interactivity in a Jupyter notebook with Deno kernel in VSCode? LiRun all pending ticks synchronouslyCurrently it seems like `run_event_loop` is the only way to run all the pending ops that are schedulHow can I do server sent events on the client side in deno?I have a server api which is doing server sent events correctly, I can see it in curl doing what I wunable to connect to mongodb using deno inside containerFirst of all, I want to mention that when I run `deno task preview` on my local machine / laptop, itTC39 stage 3 decorators not working anymore in Deno DeployAs of Feb 15th, deployments to #deployβ„’ fail when using TC39 decorators. Despite the decision to suUse Deno permissions in your own CLIIf I create a CLI with Deno, can I somehow reuse or pass on the permissions? ```bash > mycli --alloHas someone worked on a win32/x11/mac native window creation using FFI?Using only operating system native libraries? No SDL, etc.How to unset white background of SVG in Jupyter notebook?I’ve got a Jupyter notebook with Deno kernel in VSCode that displays an SVG. The SVG has a forced whHow to get the Docker ARM image for DenoI keep getting this error when trying to deploy my code: ``` WARNING: The requested image's platfoDeno compiled bin not create fileHi, I have a script that create file with Deno.writeFileSync() on current location When run script VSCode Extension Failing ot Initialize:party_deno: **RESOLVED** :party_deno: Having a bit of trouble using the VSCode Extension. `deno`deno command stdin, stdout continous readingI am trying to spawn an AI (cpp code) however after launching the code it immediately exits. It alsoProblem rerender a island when updating the value of a signal!Hi there im trying to make a visual change to the selected category button. However it does not rereCannot find namespace NodeJSHi Context: using deno with npm lib (imap). There seems to be a missing/unresolved to NodeJS that Which components exactly should be islands?Hi! I am currently developing a web app using fresh and I am getting confused about the usage of isl