Quickstart - 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 pageBuild your first app with Bun
Step 1
Initialize a new project with bun init.terminalbun init my-appIt’ll prompt you to pick a template, either Blank, React, or Library. For this guide, we’ll pick Blank.terminal
bun init my-app
✓ Select a project template: Blank - .gitignore - CLAUDE.md - .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc -> CLAUDE.md - index.ts - tsconfig.json (for editor autocomplete) - README.mdThis automatically creates a my-app directory with a basic Bun app.2
Step 2
Run the index.ts file using bun run index.ts.terminalcd my-app bun run index.ts
Hello via Bun!You should see a console output saying "Hello via Bun!".3
Step 3
Replace the contents of index.ts with the following code:index.tsconst server = Bun.serve({
port: 3000,
routes: {
"/": () => new Response('Bun!'),
}
});
console.log(`Listening on ${server.url}`);
Run the index.ts file again using bun run index.ts.terminalbun run index.ts
Listening on http://localhost:3000Visit http://localhost:3000 to test the server. You should see a page that says "Bun!".
Seeing TypeScript errors on Bun?
If you used bun init, Bun will have automatically installed Bun’s TypeScript declarations and configured your tsconfig.json. If you’re trying out Bun in an existing project, you may see a type error on the Bun global.To fix this, first install @types/bun as a dev dependency.terminalbun add -d @types/bunThen add the following to your compilerOptions in tsconfig.json:tsconfig.json
{
"compilerOptions": {
"lib": ["ESNext"],
"target": "ESNext",
"module": "Preserve",
"moduleDetection": "force",
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true
}
}
4Step 4
Install the figlet package and its type declarations. Figlet is a utility for converting strings into ASCII art.terminalbun add figlet bun add -d @types/figlet # TypeScript users onlyUpdate index.ts to use figlet in routes.index.ts
import figlet from 'figlet';
const server = Bun.serve({
port: 3000,
routes: {
"/": () => new Response('Bun!'),
"/figlet": () => {
const body = figlet.textSync('Bun!');
return new Response(body);
}
}
});
console.log(`Listening on ${server.url}`);
Run the index.ts file again using bun run index.ts.terminalbun run index.ts
Listening on http://localhost:3000Visit http://localhost:3000/figlet to test the server. You should see a page that says "Bun!" in ASCII art.
____ _ | __ ) _ _ _ __ | | | _ \| | | | '_ \| | | |_) | |_| | | | |_| |____/ \__,_|_| |_(_)5
Step 5
Let’s add some HTML. Create a new file called index.html and add the following code:index.htmlDOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Buntitle> head> body> h1>Bun!h1> body> html>Then, import this file in index.ts and serve it from the root / route.index.ts
import figlet from 'figlet';
import index from './index.html';
const server = Bun.serve({
port: 3000,
routes: {
"/": index,
"/figlet": () => {
const body = figlet.textSync('Bun!');
return new Response(body);
}
}
});
console.log(`Listening on ${server.url}`);
Run the index.ts file again using bun run index.ts.terminalbun run index.ts
Listening on http://localhost:3000Visit http://localhost:3000 to test the server. You should see the static HTML page. 🎉 Congratulations! You’ve built an HTTP server with Bun and installed a package. Run a script Bun can also execute "scripts" from your package.json. Add the following script: package.json
{
"name": "quickstart",
"module": "index.ts",
"type": "module",
"private": true,
"scripts": {
"start": "bun run index.ts"
},
"devDependencies": {
"@types/bun": "latest"
},
"peerDependencies": {
"typescript": "^5"
}
}
Then run it with bun run start.
terminalbun run start
Listening on http://localhost:3000
Was this page helpful?
Quickstart - Bun,AI智能索引,全网链接索引,智能导航,网页索引
- Build your first app with Bun