Help setting up a Deno project for a static HTML5 app using TypeScript and a Live-preview.
Hi all, i'm new to
deno and want to try it out. š https://discord.com/channels/684898665143206084/1128726030614544414/1332270619060076594
Although i'm not completely new to TypeScript (I can somewhat read it), unfortunately have not coded using it till now, at least that's the plan to start using it .
Below are topics i want to cover / make use of:
1. I will use Codium as IDE. (it's a foss VSCode version)
1. My end target will be the browser, Firefox-Nightly in this case.
1. I will make use of HTML5 pages with external nested CSS stylesheets (not SCSS nor LESS etc) and native JavaScript as es-modules.
1. I want to code my JavaScript in TypeScript that will be consumed by the browser as separate native es-modules as end-product.
1. I want to be able to preview the changes live in Codium, while viewing the HTML5 page, and the browser directly.
---
Are the above criteria's possible using deno š¤
Any help and guidance is appreciated. š9 Replies
Thanks, i'm looking into
dsbuild right now, even created a PR: https://github.com/orgsofthq/dsbuild/pull/5 šGitHub
Allow more extensions for served Javascript files by TriMoon Ā· Pull...
This will allow these file extensions to be served as text/javascript
.js
.es
.mjs
ok so after some fiddling with
dsbuild and some patches by the author, im finally able to serve the src-pages on my machine, still in original es-modules no TypeSript yet.
Next steps:
- Live preview inside Codium, the deno extension doesn't have a preview it seems arf š¤·āāļø
- Translate my modules to TypeScript.
Stay tuned š
@mattvr
Hi sorry to bother you here on the deno discord https://discord.com/channels/684898665143206084/1303058049208025149/1335357437036859392, but...
I tried to ask you this in a DM, but it could not be delivered, and you didn't accept my friend-request yet so š
Is there any VSCode-extension that provides Life-Preview using dsbuild that i can use? (If not maybe an idea for you...)
It would make dsbuild a lot more popular and useful šHi. Do you mean a live preview of the webpage? I think thereās ways to achieve that like using live.js plus a VS Code HTML view extension.
Feel free to follow up over DM ā Iāll probably add something like that in the future.
Yes im currently using https://github.com/microsoft/vscode-livepreview but would have expected this to be a functionality of https://github.com/denoland/vscode_deno itself, maybe i should open a RFE on their repo...
GitHub
GitHub - microsoft/vscode-livepreview: Hosts a local server in your...
Hosts a local server in your workspace for you to preview your webpages. - GitHub - microsoft/vscode-livepreview: Hosts a local server in your workspace for you to preview your webpages.
GitHub
GitHub - denoland/vscode_deno: Visual Studio Code plugin for Deno
Visual Studio Code plugin for Deno. Contribute to denoland/vscode_deno development by creating an account on GitHub.
I just opened it š
https://github.com/denoland/vscode_deno/issues/1251
GitHub
[RFE] Live Preview inside Codium/VSCode Ā· Issue #1251 Ā· denoland/vs...
Is your feature request related to a problem? Please describe. We should be able to Live-Preview the HTML pages that use the code we work on while using this plugin, without the need to use another...
Why not just use Simple Browser: View?
I didn't even know of the existance of that command in VSCode/Codium š¤£
Any idea how to create a task that opens the current html page with that command?
(Maybe it can replace that Life Preview extension...)
edit: I just noticed that browser is unable to open local files using
file:///abs-path/index.html, so i would still need a webserver or serve.js (The latter is provided by Life Preview already) š„For future readers of this thread:
For time being i think i will just use https://github.com/guybedford/es-module-shims in my html pages to directly load
TypeScript files in the browser while learning TS and Life-Previews...
šGitHub
GitHub - guybedford/es-module-shims: Shims for new ES modules featu...
Shims for new ES modules features on top of the basic modules support in browsers - guybedford/es-module-shims