How to quickly deploy Bun React project to Netlify
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.
Important clarifications
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 :)
Requirements
What to do
You can clone this repo or just follow the steps below.
1. Create new React project with Vite using Bun
bunx --bun create-vite -t react-ts
cd vite-project
bun install
2. Development
bun --bun dev
3. Build
bun --bun run build
Is it fast? Well, almost as fast as Node https://twitter.com/jarredsumner/status/1700680788231311789 :)
Keep in mind that bun run build
or even npm run build
will probably run slightly faster. Let me say it again, currently building Vite using Node runtime is faster (shocking, I know).
$ 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'
4. Connect to Netlify
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
5. Deploy
Just push to github and netlify will build and deploy your site.
Learn More
- 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
bun dev
Note on This repo used to use bun dev
which was deprecated in Bun 1.0 but you can still see those branches: