React boilerplate with Bun
Anyone exploring Bun will likely be writing a React app or Next app. Gone are the days when you’d build from scratch. For Bun starters, it’d be useful to have a minimal React boilerplate. There are many boilerplates available in a number of GitHub repos. In this article, we’ll explore Bun’s built-in React boilerplate. Let’s get started.
In addition to being a JS runtime, Bun has a built-in test runner, upgrade tool, NPM client, etc. The other interesting thing that Bun’s built-in boilerplates. These minimal boilerplates provide a very easy way to start with Bun.
To check the list of boilerplates, use
bun create command:
There are boilerplates for discord, hono, next, and react. Out of these, the most useful ones would be next and react, as both are extremely popular in the world.
Now that we’ve the list of boilerplates, let’s create a React boilerplate project. The input is the directory in which boilerplate code will be placed.
> bun create react ./react-boiler
[package.json] Detected React - added "react-refresh"$ bun install
bun install v0.2.2
+ email@example.com packages installed [26.00ms][34.00ms] bun install$ bun bun ./src/index.jsx
30.58 KB react/cjs/react-jsx-dev-runtime.development.js 
64.50 KB react/cjs/react.development.js 
0.17 KB react/index.js 
0.20 KB react/jsx-dev-runtime.js react-dom v18.2.0
790.57 KB react-dom/cjs/react-dom.development.js 
0.65 KB react-dom/client.js 
0.51 KB react-dom/index.js react-refresh v0.10.0
16.58 KB react-refresh/cjs/react-refresh-runtime.development.js 
0.20 KB react-refresh/runtime.js scheduler v0.23.0
15.30 KB scheduler/cjs/scheduler.development.js 
0.18 KB scheduler/index.js web-vitals v3.0.4
35379 LOC parsed
Saved to ./node_modules.bun[75.00ms] git[836.00ms] bun create reactCome hang out in bun's Discord: https://bun.sh/discord-----A local git repository was created for you and dependencies were installed automatically.Created react project successfully# To get started, run:cd react-boiler
The command finishes pretty fast. The create command does the following:
- Downloads the React boilerplate code from GitHub
- Install the required modules through bun install command (this is like running npm install)
- Compiles React code in dev mode
- Suggests the next steps
bun create prepares a complete ready-to-use boilerplate. The next step is to run it. That’s all.
Before running, let’s take a look at the boilerplate:
The code structure is as expected of a React app. There are JSX files that contain the business logic. The index.jsx includes App.jsx. The App.jsx shows a simple page with a link to the React’s official site.
Let’s run the boilerplate:
> cd react-boiler/
> bun dev
[0.76ms] "node_modules.bun" - 12 modules, 5 packages
[12.00ms] bun!! v0.2.2 (6632135e)Link: http://localhost:3000
The server is up. Let’s open the browser:
Works like a charm! That was really quick.
Thanks for reading! More articles on similar topics can be seen in the magazine: The JS runtimes.