Instructions for using Bun as the default JavaScript/TypeScript runtime instead of Node.js, with guidance on built-in APIs, testing, and frontend development patterns.
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Instructions for AI coding assistants to use Bun as the primary JavaScript/TypeScript runtime when working with ML5.js and TensorFlow.js browser-based machine learning demos.
Always default to Bun instead of Node.js for all JavaScript/TypeScript operations in this project.
When executing JavaScript/TypeScript tasks, use these Bun equivalents:
1. **Execution**
- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
- Bun natively supports TypeScript without configuration
2. **Testing**
- Use `bun test` instead of `jest` or `vitest`
- No additional test runner installation needed
3. **Building**
- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
- Bun's bundler handles HTML, TypeScript, and CSS natively
4. **Package Management**
- Use `bun install` instead of `npm install`, `yarn install`, or `pnpm install`
- Use `bun run <script>` instead of `npm run <script>`, `yarn run <script>`, or `pnpm run <script>`
5. **Environment Variables**
- Bun automatically loads `.env` files
- Do NOT use the `dotenv` package
Prefer Bun's built-in APIs over third-party packages:
1. **Web Server**
- Use `Bun.serve()` for HTTP/HTTPS servers with WebSocket support
- Do NOT use `express` or similar frameworks
2. **Database Clients**
- Use `bun:sqlite` for SQLite (not `better-sqlite3`)
- Use `Bun.redis` for Redis (not `ioredis`)
- Use `Bun.sql` for Postgres (not `pg` or `postgres.js`)
3. **WebSockets**
- Use built-in `WebSocket` API
- Do NOT use the `ws` package
4. **File System**
- Prefer `Bun.file` over `node:fs` methods like `readFile`/`writeFile`
5. **Shell Commands**
- Use `Bun.$\`command\`` for shell execution instead of `execa`
Create tests using Bun's built-in test framework:
```typescript
import { test, expect } from "bun:test";
test("description of test", () => {
expect(actualValue).toBe(expectedValue);
});
```
Run tests with:
```bash
bun test
```
Use HTML imports with `Bun.serve()` instead of Vite or other bundlers. This pattern fully supports React, CSS, and Tailwind.
Create a server file (e.g., `bodyPose.js`):
```typescript
import index from "./index.html"
Bun.serve({
routes: {
"/": index,
"/api/users/:id": {
GET: (req) => {
return new Response(JSON.stringify({ id: req.params.id }));
},
},
},
// Optional WebSocket support
websocket: {
open: (ws) => {
ws.send("Hello, world!");
},
message: (ws, message) => {
ws.send(message);
},
close: (ws) => {
// handle close
}
},
development: {
hmr: true, // Hot module reloading
console: true,
}
})
```
HTML files can directly import `.tsx`, `.jsx`, or `.js` files. Bun's bundler automatically transpiles and bundles:
```html
<html>
<body>
<h1>Hello, world!</h1>
<script type="module" src="./frontend.tsx"></script>
</body>
</html>
```
Create React components that import CSS directly:
```typescript
import React from "react";
import './index.css'; // Import CSS directly
import { createRoot } from "react-dom/client";
const root = createRoot(document.body);
export default function Frontend() {
return <h1>Hello, world!</h1>;
}
root.render(<Frontend />);
```
Start the server with hot reloading:
```bash
bun --hot ./bodyPose.js
```
This project focuses on browser-based machine learning demos. When working with ML5.js or TensorFlow.js:
1. Serve HTML files using `Bun.serve()` as shown above
2. Import ML libraries directly in frontend JavaScript/TypeScript files
3. Use Bun's hot reloading for rapid development
4. Leverage Bun's fast bundler for production builds
For detailed API documentation, refer to `node_modules/bun-types/docs/**.md` after installing Bun packages.
1. **Check for Bun**: Verify Bun is installed with `bun --version`
2. **Replace Commands**: When editing package.json scripts, use Bun commands
3. **Update Dependencies**: Replace Node-specific packages with Bun equivalents
4. **Serve Frontend**: Use `Bun.serve()` pattern for web applications
5. **Test**: Use `bun test` for all testing needs
6. **Build**: Use `bun build` when creating production bundles
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/bun-first-development/raw