DEV Community

Cover image for How I Built Native Desktop Apps with React and Deno — No Node, No Webpack
Huy Pham
Huy Pham

Posted on

How I Built Native Desktop Apps with React and Deno — No Node, No Webpack

#deno #desktop #react

I love building UIs in React. I do not love the moment a "quick desktop app" idea turns into a node_modules black hole, a webpack config I'm scared to touch, and an Electron bundle the size of a small operating system. So I built a boilerplate that lets me ship a real signed desktop app using just React and Deno.

The Problem

Spinning up a desktop app the "normal" way usually means:

  • Wrestling with Node + webpack/Vite config before you write a single feature
  • Pulling in hundreds of MB of node_modules for a window with a button
  • Electron boilerplate just to open a window and load some HTML
  • A confusing, manual path to actually packaging and signing a .dmg
  • No story for shipping updates after launch

You spend the first day on tooling instead of your actual app.

The Solution: Deno React Boilerplate

What if your runtime, bundler, and task runner came in one binary — and React just worked?

deno task start     # build the React UI + open the app window
deno task build:mac # produce a signed .dmg
Enter fullscreen mode Exit fullscreen mode

Two commands: one to develop, one to ship. Deno handles TypeScript and tasks, esbuild bundles the renderer, and React 19 powers the window.

How It Works

  1. Deno as the foundation - One runtime handles TypeScript, dependency management, and task running — no node_modules, no separate bundler config.
  2. React 19 renderer - Your UI lives in src/renderer/ with React Router 7, bundled by esbuild and rendered in a native window.
  3. Dev with HMR - deno task dev runs the renderer in watch mode with hot reloading so changes show up instantly.
  4. One-command packaging - deno task build:mac compiles everything into a signed .dmg ready to distribute, with auto-update wired in.

No tooling rabbit hole — clone, run, build.

Get Started in 30 Seconds 

git clone https://github.com/quochuydev/deno-react-boilerplate
cd deno-react-boilerplate
deno task start
Enter fullscreen mode Exit fullscreen mode

This gives you:

  • src/renderer/ - React UI components and screens
  • routes/Home.tsx - The main screen, ready to customize
  • deno.json - App metadata, tasks, and build config in one place
  • docs/ - Source for a landing page

Commands

Command Detail Description
deno task dev Watch + HMR Run the renderer in watch mode with hot reload
deno task start Build + launch Build the UI and open the app window
deno task serve Web mode Build the renderer and serve it as a web app
deno task build:mac Package macOS Generate a signed .dmg installer
deno task build:all Package all Build for all supported platforms
deno task fmt / lint Code quality Format and lint your source

Why This Works

  1. Zero Node, zero webpack - Deno is your runtime, package manager, and task runner in a single binary.
  2. Real React, not a clone - React 19 + React Router 7, the exact tools you already know.
  3. Ship-ready out of the box - Signing, packaging, and auto-update are built into the workflow, not an afterthought.
  4. One config file - App name, identifier, release URL, and tasks all live in deno.json.

Try It

If you've ever bailed on a desktop app idea because of the tooling, this is your shortcut:

git clone https://github.com/quochuydev/deno-react-boilerplate
cd deno-react-boilerplate
deno task start
Enter fullscreen mode Exit fullscreen mode

Then open routes/Home.tsx, change something, and watch it hot-reload in a native window.

GitHub: github.com/quochuydev/deno-react-boilerplate

What's stopping you from building desktop apps today — the framework, the bundling, or the packaging? Curious which one bites people the most.

Top comments (0)