DEV Community

Cover image for Create a react app with bun

Create a react app with bun

Ashirbad Panigrahi on July 16, 2022

Want to use bun for your next react projects? Install bun First run the following command to check bun is installed or not...
Collapse
 
foxy4096 profile image
Adzy β€’

Can I also create next js app with bun?

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi β€’

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 β€’

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

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 β€’

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
 
khushis26 profile image
Khushi β€’

This is really cool thanks for this

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi β€’

Happy to hear it

Collapse
 
dawosch profile image
Dawosch β€’ β€’ Edited

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 β€’

Indeed

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi β€’

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 β€’

Yes you can ex:

bun add @ashirbad/js-core                     
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nuralam profile image
nuralam β€’

why this happened?
Image description

Collapse
 
harryhighpants profile image
Harry β€’

Since bun can directly execute .ts and .tsx files we can use the typescript template to setup a typescript project instead of js:
bun create react-app my-app --template typescript

Collapse
 
arup2079 profile image
arup saha chowdhury β€’
Comment hidden by post author
Collapse
 
preyashhojiwala profile image
Preyash Hojiwala β€’

HELP

  • bun create react test
  • bun create react ./test Tried both commands, not workin, usin win10 vscode wsl
Collapse
 
xiaoxinsky profile image
xiaoxin β€’

What are advantages over nodejs?

Collapse
 
13rtk profile image
Uaena_Alex_John β€’

Nowadays, the react template has been deprecated, the correct command should be:

bun create react-app ./react-app
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rahul_yadav_a4d9d43d1a966 profile image
Rahul Yadav β€’

Yes, I tried this one.

Collapse
 
santokhan profile image
Santo Khan β€’

Bro, it is slower than npm. Rather than we can use

bun create vite
Enter fullscreen mode Exit fullscreen mode
Collapse
 
xaiyang99 profile image
xaiyang99 β€’

I have a problem when bun start, bun dev. run on ubuntu in window
send() error: Invalid argument
500 GET / as application/octet-stream

Collapse
 
21vekit profile image
21VEKIT β€’

Image description

not work

Collapse
 
mrgoonie profile image
Goon Nguyen β€’

should be bun create react-app <app-name>

Collapse
 
navidj1360 profile image
Navid jalilian β€’

what about windowsπŸ˜’

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi β€’

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

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