Build a React app with Bun - Bun

Build a React app with Bun - BunDocumentation Index

Fetch the complete documentation index at: /docs/llms.txt

Use this file to discover all available pages before exploring further.

Skip to main contentBun home pageSearch...⌘KInstall BunSearch...NavigationEcosystem & FrameworksBuild a React app with BunRuntimePackage ManagerBundlerTest RunnerGuidesReferenceBlogFeedback:first-child]:!hidden peer-[.is-custom]:[&>:first-child]:sm:!hidden peer-[.is-custom]:[&>:first-child]:md:!hidden peer-[.is-custom]:[&>:first-child]:lg:!hidden peer-[.is-custom]:[&>:first-child]:xl:!hidden">OverviewGuidesDeploymentDeploy on VercelDeploy on RailwayDeploy on RenderDeploy on AWS LambdaDeploy on DigitalOceanDeploy on Google Cloud RunRuntime & DebuggingTypeScript typesRe-map import pathsVS Code debuggerWeb debuggerHeap snapshotsBuild-time constantsDefine constantsGitHub ActionsCodesign on macOSUtilitiesUpgrade BunDetect BunGet Bun versionHash passwordGenerate UUIDBase64 encodingGzip compressionDEFLATE compressionEscape HTMLDeep equalitySleepFile URL to pathPath to file URLFind executable pathimport.meta.dirimport.meta.fileimport.meta.pathCheck entrypointGet entrypoint pathEcosystem & FrameworksAstro with BunDiscord.js with BunDocker with BunDrizzle with BunGel with BunElysia with BunExpress with BunHono with BunMongoose with BunNeon Drizzle with BunNeon Serverless Postgres with BunNext.js with BunNuxt with BunPM2 with BunPrisma ORM with BunPrisma Postgres with BunQwik with BunReact with BunRemix with BunTanStack Start with BunSentry with BunSolidStart with BunSSR React with BunStricJS with BunSvelteKit with Bunsystemd with BunVite with BunUpstash with BunHTTP & NetworkingHTTP Server with BunSimple HTTP Server with BunFetch with BunHot reload an HTTP serverStart a cluster of HTTP serversConfigure TLSProxy HTTP requests using fetch()Stream file responseUpload files via HTTP using FormDataFetch with unix domain socketsStream with iteratorsServer-Sent EventsStream with Node.jsWebSocketSimple serverPub-sub serverContextual dataEnable compressionProcesses & SystemSpawn child processRead stdoutRead stderrParse command-line argumentsRead from stdinSpawn a child process and communicate using IPCListen for CTRL+COS signalsProcess uptimeRun shell commandSet time zoneSet env variablesRead env variablesPackage ManagerAdd a dependencyAdd a dev dependencyAdd an optional dependencyAdd a peer dependencyAdd a Git dependencyAdd a tarball dependencyInstall with aliasWorkspaces with BunOverride the default npm registryConfigure a scoped registryAzure Artifacts with BunJFrog Artifactory with BunAdd a trusted dependencyGenerate a yarn-compatible lockfileMigrate from npm to bunConfigure git to diff Bun's lockfileInstall Bun in GitHub ActionsTest RunnerRun testsWatch modeMigrate from JestMock functionsSpy on methodsMock system timeSnapshot testingUpdate snapshotsCoverage reportsCoverage thresholdConcurrent test globSkip testsTodo testsTest timeoutBail earlyRe-run testsTesting LibraryDOM testsTest SvelteRuntime & DebuggingVS Code debuggerWeb debuggerHeap snapshotsBuild-time constantsDefine constantsGitHub ActionsCodesign on macOSModule SystemImport JSONImport TOMLImport YAMLImport JSON5Import HTMLimport.meta.dirimport.meta.fileimport.meta.pathCheck entrypointGet entrypoint pathFile SystemRead as stringRead to BufferRead to Uint8ArrayRead to ArrayBufferRead JSON fileGet MIME typeCheck file existsWatch directoryRead as streamWrite string to fileWrite BlobWrite ResponseAppend to fileIncremental writeWrite streamWrite to stdoutWrite file to stdoutCopy fileDelete fileDelete filesDelete directoriesUtilitiesHash passwordGenerate UUIDBase64 encodingGzip compressionDEFLATE compressionEscape HTMLDeep equalitySleepFile URL to pathPath to file URLFind executable pathHTML ProcessingExtract links using HTMLRewriterOpenGraph tagsBinary DataArrayBuffer to stringArrayBuffer to BufferArrayBuffer to BlobArrayBuffer to ArrayArrayBuffer to Uint8ArrayBuffer to stringBuffer to ArrayBufferBuffer to BlobBuffer to Uint8ArrayBuffer to ReadableStreamBlob to stringBlob to ArrayBufferBlob to Uint8ArrayBlob to DataViewBlob to ReadableStreamUint8Array to stringUint8Array to ArrayBufferUint8Array to BufferUint8Array to BlobUint8Array to DataViewUint8Array to ReadableStreamDataView to stringStreamsStream to stringStream to JSONStream to BlobStream to BufferStream to ArrayBufferStream to Uint8ArrayStream to arrayReadable to stringReadable to JSONReadable to BlobReadable to Uint8ArrayReadable to ArrayBufferEcosystem & FrameworksBuild a React app with BunCopy pagespan]:line-clamp-1 overflow-hidden group flex items-center py-0.5 gap-1 text-sm text-gray-950/50 dark:text-white/50 group-hover:text-gray-950/70 dark:group-hover:text-white/70 rounded-none rounded-r-xl border px-3 border-gray-200 aspect-square dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5" aria-label="More actions" type="button" id="radix-_R_n4ctdbsnlht5lebsnpfdb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">Copy pagespan]:line-clamp-1 overflow-hidden group flex items-center py-0.5 gap-1 text-sm text-gray-950/50 dark:text-white/50 group-hover:text-gray-950/70 dark:group-hover:text-white/70 rounded-none rounded-r-xl border px-3 border-gray-200 aspect-square dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5" aria-label="More actions" type="button" id="radix-_R_1cctdbsnlht5lebsnpfdb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">Bun supports .jsx and .tsx files out of the box. React works with Bun. Create a new React app with bun init --react. This gives you a template with a React app and an API server together in one full-stack app. terminal

# Create a new React app
bun init --react

# Run the app in development mode
bun dev

# Build as a static site for production
bun run build

# Run the server in production
bun start

​Hot Reloading Run bun dev to start the app in development mode. This will start the API server and the React app with hot reloading. ​Full-Stack App Run bun start to start the API server and frontend together in one process. ​Static Site Run bun run build to build the app as a static site. This will create a dist directory with the built app and all the assets. File Tree

├── src/
│ ├── index.tsx # Server entry point with API routes
│ ├── frontend.tsx # React app entry point with HMR
│ ├── App.tsx # Main React component
│ ├── APITester.tsx # Component for testing API endpoints
│ ├── index.html # HTML template
│ ├── index.css # Styles
│ └── *.svg # Static assets
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── bunfig.toml # Bun configuration
└── bun.lock # Lock file

Was this page helpful?

YesNoSuggest editsRaise issueBuild an app with Qwik and BunPreviousBuild an app with Remix and BunNext⌘IxgithubdiscordyoutubePowered byThis documentation is built and hosted on Mintlify, a developer documentation platform