This is a template showing how you can use Bun to build React project and deploy it to Netlify. We are using Vite and React, if you want to change this for your project, please do.

A few notes on bun vs bun :)

When you run bun dev it will use bun just as a script runner, and your vite will actually be running in Node. But if you run bun --bun dev if will use Bun JavaScript runtime to run Vite.

If this all sounds crazy, just do this (after following the guide below)):

echo 'console.log(Bun);' >> vite.config.ts
bun --bun dev # to test it
bun dev # to see that it crashes

Again, this doesn't actually matter that much, since it only afffects vite plugins and such, your users are just going to get the same application bundle no matter what runtime vite was using :)

• Bun 1.0 or higher

You can clone this repo or just follow the steps below.

bunx --bun create-vite -t react-ts
cd vite-project
bun install

bun --bun dev

open http://localhost:5173/

bun --bun run build

$ hyperfine --warmup=2 "bun --bun run build" "bun run build" "npm run build"

Benchmark 1: bun --bun run build
  Time (mean ± σ):      2.052 s ±  0.012 s    [User: 2.098 s, System: 0.176 s]
  Range (min … max):    2.037 s …  2.072 s    10 runs
 
Benchmark 2: bun run build
  Time (mean ± σ):      1.363 s ±  0.021 s    [User: 1.210 s, System: 0.090 s]
  Range (min … max):    1.344 s …  1.410 s    10 runs
 
Benchmark 3: npm run build
  Time (mean ± σ):      1.599 s ±  0.029 s    [User: 2.527 s, System: 0.192 s]
  Range (min … max):    1.570 s …  1.666 s    10 runs
 
Summary
  'bun run build' ran
    1.17 ± 0.03 times faster than 'npm run build'
    1.51 ± 0.03 times faster than 'bun --bun run build'

make sure to connect your repo to github and netlify to enable automatic builds.

ntl init

Edit netlify.toml:

[build]
  # custom build command that install bun and run build
  command = "./scripts/build.sh"
  # vite output folder
  publish = "dist"

[build.environment]
   # disable NPM install
   NPM_FLAGS = "--version"

Edit scripts/build.sh:

#!/bin/bash
set -e
curl -fsSL https://bun.sh/install | bash
export PATH="/opt/buildhome/.bun/bin:$PATH"
bun --version
bun install
bun --bun run build

Just push to github and netlify will build and deploy your site.

• How to build production build of Bun React
• How to install Bun
• Install Deno on Netlify --- we use the same idea to install Bun
• How to disable NPM install
• How to use Bun with Netlify

This repo used to use bun dev which was deprecated in Bun 1.0 but you can still see those branches:

• Using "bun dev" and react-scripts for prod
• Using "bun dev" and vite for prod