Turn your Vite app into a full-stack project Add API endpoints to your Vite app Write server-side code right inside your Vite app Turn your Vite app into a full-stack project with a single command

Features

• File-based API routing 🚦 - Creating an API endpoint is as simple as creating a file and a handler.
• Lightweight 🪶 - Zero dependencies. Core runtime is only ~200 LOC.
• Supercharged productivity 📈 - Build and ship quicker. No need to juggle multiple projects or monorepos.
• Terrific DX 🤩 - All-round HMR. Rich context API. First-class TypeScript support.

Quick Start

Make sure you have Bun 1.3 or above installed.

1. Add Sol to your project.

bun add @dstrml/sol

2. Change the dev and build scripts in your package.json to use Sol.

"dev": "sol dev -w",
"build": "sol build"

3. Start the dev server.

bun run dev

Table of Contents

• Creating API Routes
  • Basic Route
  • Dynamic Routes
• Context
  • Request
    • Properties
    • Body
    • Raw
  • Response
    • Setting properties
    • Constructing responses
    • Redirect
• Build for Production
• License

Creating API Routes

API routes are created by adding handlers to files under the server/api/ directory. Following HTTP methods are supported.

• GET
• POST
• PUT
• DELETE
• PATCH
• OPTIONS
• HEAD

Files that don't export any valid handlers are simply ignored.

Basic Route

Create server/api/hello.ts or server/api/hello/index.ts:

// GET /api/hello
export function GET(c: Context) {
	// Return a json response
	return c.json({
		message: 'Hello from API!',
		timestamp: new Date().toISOString()
	});
}

// POST /api/hello
export async function POST(c: Context) {
	const body = await c.req.json();
	return c.json({
		message: 'Received your message',
		data: body
	});
}

Then, call them on the client-side like this:

// App.tsx
function App() {
	useEffect(() => {
		fetch('/api/hello')
			.then((r) => r.json())
			.then(console.log);
	}, []);

	// ...
}

Dynamic Routes

Create server/api/users/[id].ts:

// GET /api/users/[id]
export function GET(c: Context) {
	const { id } = c.req.params;
	return c.json({
		id,
		name: `User ${id}`
	});
}

Request

Requests in Sol are instances of SolRequest, which is a wrapper around BunRequest.

Request properties

// GET /api/users/[id]/posts
export function GET(c: Context) {
	// '/api/users/[id]/posts'
	const routePath = c.req.routePath;

	// '/api/users/3/posts'
	const pathname = c.req.pathname;

	// 'http://localhost:6978/api/users/3/posts?limit=10'
	const url = c.req.url;

	// Get path params
	const { id } = c.req.params;

	// Get querystring params
	const limit = c.req.query('limit');

	// Get the value of a request header
	const contentType = c.req.header('Content-Type');

	// Get the value of a cookie
	const cookieValue = c.req.cookie('cookie-name');
}

Request body

export function POST(c: Context) {
	// Get a parsed request body
	const jsonBody = await c.req.json(); // As JSON
	const txtBody = await c.req.text(); // As text
	const arrBufBody = await c.req.arrayBuffer(); // As `ArrayBuffer`
	const blobBody = await c.req.blob(); // As `Blob`
	const formDataBody = await c.req.formData(); // As `FormData`
}

Raw

The underlying BunRequest object can be accessed at Context.req.raw.

Build for Production

Apps can be built for production using the sol build command. This outputs a build under dist/, which can be served using bun run dist/server.js.

The app is served on http://localhost:3000 by default. You can specify a different port in the run command (example: bun run dist/server.js -p 5000)

License

Distributed under the MIT License. See LICENSE for more information.