DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create a react app with bun
Ashirbad Panigrahi
Ashirbad Panigrahi

Posted on

Create a react app with bun

Want to use bun for your next react projects?


Install bun

First run the following command to check bun is installed or not

bun -v
Enter fullscreen mode Exit fullscreen mode

If you don't have bun installed then run the following command to install bun

curl https://bun.sh/install | bash
Enter fullscreen mode Exit fullscreen mode

Create a react app

Now run the following command to create a react app

bun create react [your-app-name]
Enter fullscreen mode Exit fullscreen mode

It will create a new directory with the name of your app. To start the app run the following command

cd your-app-name
bun dev
Enter fullscreen mode Exit fullscreen mode

Build production bundle for react app

By default bun does not ship with react-scripts so you need to install it first.

bun a react-scripts -d
Enter fullscreen mode Exit fullscreen mode

Here we install it as a dev dependency.

Then run the following command to build the production bundle

bun react-scripts build
Enter fullscreen mode Exit fullscreen mode

When you run the command above it will build the production bundle and it will be stored in the build directory.

Adding scripts to your package.json

We can add the following scripts to our package.json file

{
  "scripts": {
    "start": "bun dev",
    "build": "react-scripts build"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now we can run the following command to start the app

bun start
Enter fullscreen mode Exit fullscreen mode

And we can run the following command to build the production bundle

bun run build
Enter fullscreen mode Exit fullscreen mode

Bonus:

By default bun creates react app with javascript but we can easily use typescript by changing the file extension from .jsx to .tsx

Get Full Source Code In GitHub

Top comments (21)

Collapse
pandademic profile image
Pandademic

Great article.

Does bun support other frameworks(I have svelte in mind) too?

Thanks again.

Collapse
ashirbadgudu profile image
Ashirbad Panigrahi Author

It is supports nextjs, react but I'm not sure about svelte but I will definitely look into it.

Collapse
pandademic profile image
Pandademic

Thanks!

Collapse
foxy4096 profile image
Aditya Priyadarshi

Can I also create next js app with bun?

Collapse
ashirbadgudu profile image
Ashirbad Panigrahi Author

Here it is the step by step guide for creating nextjs app with bun

dev.to/ashirbadgudu/lets-create-a-...

Collapse
ashirbadgudu profile image
Ashirbad Panigrahi Author

Yes you can I will post on this topic really soon.

Collapse
khushis26 profile image
Khushi

This is really cool thanks for this

Collapse
ashirbadgudu profile image
Ashirbad Panigrahi Author

Happy to hear it

Collapse
dawosch profile image
Dawosch • Edited on

bun is on my β€žtry nextβ€œ list. But i don’t understand why all package manager needs this β€žrunβ€œ word.
I want to execute scripts like:

bun dev
bun start
bun build
…

Collapse
frontendwizard profile image
Juliano Rafael

the reason is to avoid clashes or confusion with the cli commands. if you had bun dev, just by looking at the command you don't know if it's a command from the cli itself or a script from the package.json. with run you know what's a script and what's a cli command.

Collapse
ashirbadgudu profile image
Ashirbad Panigrahi Author

Indeed

Collapse
ashirbadgudu profile image
Ashirbad Panigrahi Author

Yes I also want to see this, but for now you can use some certain commands in this way ex:

bun start
Enter fullscreen mode Exit fullscreen mode
Collapse
hamidabdulmalik profile image
Hamid Abdulmalik Al-Hassan

This is really great, how about bun for Vite? Once again, thank you.

Collapse
msbala007 profile image
msbala007

Could I use npm packages?

Collapse
ashirbadgudu profile image
Ashirbad Panigrahi Author

Yes you can ex:

bun add @ashirbad/js-core                     
Enter fullscreen mode Exit fullscreen mode
Collapse
arup2079 profile image
Info Comment hidden by post author - thread only accessible via permalink
arup saha chowdhury

Spy Camera
Β TECHNOVIEW 64GB Inbuilt Wireless Spy Camera WiFi Mini Camera Video Wireless CamerasWiFi Watch Live View Nanny Camera Users 1080P HD Cameras Video Audio Recording...Β -App V380 Pro.

device
buy now

Media
A hidden spy camera can shoot HD 1080P video and pixel photos. It is equipped with the latest CMOS sensor, it can show excellent image quality better than other cameras. Provide you with h-definition vision! Once your iPhone or Android phone is configured with router Wi-Fi (Only2.4GHz).Β Then you can view live video on the App remotely from anywhere in the world.

Hidden spy camera (1.1*1.1*1.1 inches) mini camera, and can be easily stored in various environments. Take videos and photos without attracting any attention. Small and exquisite equipment, it can be monitored even when power outages, HD at night, alarm reminder, easy to set up, HD picture quality, and mobile monitoring.

90Β° wide viewing angle helps you see more of what's happening, it doesn't emit light to attract any attention while shooting in the dark, it provides more accurate image quality than other cameras, and once the mini camera detects motion, it automatically saves the relevant video to SD card (64GB Sd Card Included).

Wireless camera built-in quality 300mAh rechargeable battery, this camera can work 60 Minutes without charging, 24/7 uninterrupted working while charging.The camera system Remote monitoring by APP (Only 2.4GHz WiFi), set the β€œWiFi Config” in the APP Device Setting for remote viewing. Just insert the SD card of 64GB (included with the camera) turn on recording and it can save the recording with the SD card.

ift.tt/toFIeby
July 24, 2022 at 12:46AM

Collapse
xiaoxinsky profile image
xiaoxin

What are advantages over nodejs?

Collapse
navidj1360 profile image
Navid jalilian

what about windowsπŸ˜’

Collapse
ashirbadgudu profile image
Ashirbad Panigrahi Author

Did you facing any issues with windows? You can share the issue little bit more

Collapse
preyashhojiwala profile image
Preyash Hojiwala

HELP

  • bun create react test
  • bun create react ./test Tried both commands, not workin, usin win10 vscode wsl

Some comments have been hidden by the post's author - find out more

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.