mattvr / dsbuild

Build modern websites with zero added frameworks (React, JS, Markdown MDX, etc.) Powered by Deno.

Run Deno code in the browser. Fast & simple.

Discord

---

dsbuild is a simple, fast static site builder.

It compiles any Deno TypeScript (or Markdown) into a single JavaScript file that can be run in the browser.

It's a one-command, zero-configuration way to build React, Markdown, or other JS-powered web sites entirely using Deno.

Features:

• Supports TypeScript, MDX (Markdown), JSX, and React out of the box.
• Automatic rebuilds as you develop (dsbuild --watch)
• Previewing via a simple included web server (dsbuild --serve)
• URL imports using https://, file://, npm:, and import maps.
• Full support for Deno syntax and modules that don't require the Deno namespace or system APIs.
• Powered by esbuild and esbuild_deno_loader under the hood.

Installation

1. Install the Deno runtime.

2. Run the following command to install dsbuild:

deno install -frA -n dsbuild https://deno.land/x/dsbuild/mod.ts

3. Ensure $HOME/.deno/bin is in your PATH environment variable.

Usage

See examples/ for full examples of building React, Markdown, or other JS-powered web sites.

• dsbuild

  • Run this command from any directory to compile src/app.ts into public/app.js.

• dsbuild --watch (or dsbuild -w)

  • Watches src/ directory and rebuilds on changes.

• dsbuild --watch --serve (or dsbuild -ws)

  • Watch and serve public/ on localhost:8000.

• dsbuild --import-map import-map.json

  • Builds with import map.

• dsbuild --denoconfig

  • Generates a deno.json you can use for Deno development with proper target and lib settings for Browsers/React/JSX.

  • You can also run dsbuild --denoconfig --out deno.json to write to a file.

• dsbuild --tsconfig

  • Generates a tsconfig.json you can use for Deno development with proper target and lib settings for Browsers/React/JSX.

  • You can also run dsbuild --tsconfig --out tsconfig.json to write to a file.

• dsbuild --in src/some-file.ts --out public/another-file.js

  • You can configure the in and out flags to customize the input and output files.

  • These example values are the same as the defaults when you call dsbuild.

• dsbuild --target chrome99,firefox99,safari15

  • Customize the output target, to specify browsers or a different environment. (esbuild target docs)

• dsbuild --serve-only

  • Serve public/ on localhost:8000 without building.

• DENO_ENV=development dsbuild

  • Builds without minification.

Quick Start

Check out the examples/ folder for a demo, after git clone-ing this repo and installing dsbuild.

Inside the folder, run dsbuild --serve --watch, make changes to src/app.ts, and you should see the page immediately update.

Contributors

Feel free to contribute to this project.

License

MIT license.

dsbuild's Issues

The plugin "deno-resolver" didn't set a resolve directory, so esbuild did not search for "\\main.ts" on the file system.

dsbuild --in .\main.ts --out test.js
Building...
✘ [ERROR] Could not resolve "\\QC supplements\\Code\\Apps\\Tr%E1%BA%A5n K%E1%BB%B3\\B X%E1%BB%AD l%C3%BD d%E1%BB%AF li%E1%BB%87u v%C3%A0 %C4%91%E1%BA%A9y l%C3%AAn Fibery\\main.ts" [plugin deno-resolver]

  The plugin "deno-resolver" didn't set a resolve directory, so esbuild did not search for "\\QC
  supplements\\Code\\Apps\\Tr%E1%BA%A5n K%E1%BB%B3\\B X%E1%BB%AD l%C3%BD d%E1%BB%AF li%E1%BB%87u
  v%C3%A0 %C4%91%E1%BA%A9y l%C3%AAn Fibery\\main.ts" on the file system.

Error: Build failed with 1 error:
error: Could not resolve "\\QC supplements\\Code\\Apps\\Tr%E1%BA%A5n K%E1%BB%B3\\B X%E1%BB%AD l%C3%BD d%E1%BB%AF li%E1%BB%87u v%C3%A0 %C4%91%E1%BA%A9y l%C3%AAn Fibery\\main.ts"
    at failureErrorWithLog (https://deno.land/x/[email protected]/mod.js:1615:15)
    at https://deno.land/x/[email protected]/mod.js:1027:25
    at runOnEndCallbacks (https://deno.land/x/[email protected]/mod.js:1450:45)
    at buildResponseToResult (https://deno.land/x/[email protected]/mod.js:1025:7)
    at https://deno.land/x/[email protected]/mod.js:1037:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (https://deno.land/x/[email protected]/mod.js:1036:54)
    at handleRequest (https://deno.land/x/[email protected]/mod.js:702:19)
    at handleIncomingPacket (https://deno.land/x/[email protected]/mod.js:724:7)
    at readFromStdout (https://deno.land/x/[email protected]/mod.js:652:7) {
  errors: [
    {
      detail: undefined,
      id: "",
      location: null,
      notes: [
        {
          location: null,
          text: `The plugin "deno-resolver" didn't set a resolve directory, so esbuild did not search for "\\\\QC suppl`... 160 more characters
        }
      ],
      pluginName: "deno-resolver",
      text: 'Could not resolve "\\\\QC supplements\\\\Code\\\\Apps\\\\Tr%E1%BA%A5n K%E1%BB%B3\\\\B X%E1%BB%AD l%C3%BD d%E1%'... 69 more characters
    }
  ],
  warnings: []
}

Do you have any idea?