### Install and Run App with Bun
Source: https://onestack.dev/docs/installation
After setting up your project, use these commands to install node modules and start the development server using Bun. This is a quick way to get your One application running.
```bash
bun install && bun run dev
```
--------------------------------
### Install One CLI
Source: https://onestack.dev/docs/installation
Run this command to install the One CLI and begin bootstrapping a new project. The CLI will guide you through selecting a starter template.
```bash
npx one
```
--------------------------------
### Install One Stack
Source: https://onestack.dev
Use this command to quickly start a new project with One Stack. It initializes a new project with the framework's default configuration.
```bash
npx one
```
--------------------------------
### Start Development Server
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Run the One development server to start building your application. This command typically starts a local server with hot-reloading enabled.
```bash
one dev
```
--------------------------------
### Basic GET Endpoint
Source: https://onestack.dev/docs/routing-api-routes
This example demonstrates how to create a basic GET endpoint at `/api/hello` that returns a JSON message.
```APIDOC
## GET /api/hello
### Description
Creates a simple endpoint that responds to GET requests with a 'Hello!' message.
### Method
GET
### Endpoint
/api/hello
### Response
#### Success Response (200)
- **message** (string) - A greeting message.
### Request Example
```json
{
"example": "request body"
}
```
### Response Example
```json
{
"message": "Hello!"
}
```
```
--------------------------------
### Global Rendering Setup
Source: https://onestack.dev/docs/components-Stack
Configure a default render component for all Stack instances by calling `setupRendering` in your application's setup file. This example shows how to wrap children in a Tamagui Sheet.
```typescript
import { setupRendering } from 'one'
import { Sheet } from 'tamagui'
setupRendering({
Stack: {
web: ({ children, open, dismiss, sheetAllowedDetents }) => (
!o && dismiss()} snapPoints={sheetAllowedDetents}>
{children}
),
},
})
```
--------------------------------
### Install and Initialize Hot Updater
Source: https://onestack.dev/docs/guides-ota-updates
Install the necessary Hot Updater packages and initialize the tool for your project.
```bash
bun add @hot-updater/react-native react-native-mmkv
bun add -D hot-updater @hot-updater/bare @hot-updater/supabase
npx hot-updater init
```
--------------------------------
### Install One with bun
Source: https://onestack.dev/docs/installation
Use this command to install the latest version of One with bun.
```bash
bun add one@latest --exact
```
--------------------------------
### Install One CLI
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Install the One CLI globally to create and manage One projects.
```bash
npm install -g @onestack/cli
```
--------------------------------
### Install One with yarn
Source: https://onestack.dev/docs/installation
Use this command to install the latest version of One with yarn.
```bash
yarn add one@latest --exact
```
--------------------------------
### Install Sharp for Image Processing
Source: https://onestack.dev/docs/guides-images
Install the `sharp` package to enable image processing capabilities. If not installed, image dimensions will be zero and blur placeholders empty, with a build-time warning.
```bash
npm install sharp
```
--------------------------------
### Install One with npm
Source: https://onestack.dev/docs/installation
Use this command to install the latest version of One with npm.
```bash
npm install one@latest --save-exact
```
--------------------------------
### Custom Metro Configuration Example
Source: https://onestack.dev/docs/guides-ota-updates
This is an example of an ejected `metro.config.cjs` file. It demonstrates how to use `withOne` and allows for custom configurations.
```javascript
const { withOne } = require('one/metro-config')
const oneBundlerOptions = {
routerRoot: 'app',
}
module.exports = (async () => {
const config = await withOne(__dirname, oneBundlerOptions)
// your customizations here
return config
})()
```
--------------------------------
### Start Development Server
Source: https://onestack.dev/docs/cli
Use `one dev` to start the development server for web and native apps. It supports options for cache clearing, host, port, and debugging.
```bash
one dev [options]
--clean # clear all caches before running
--host # set the hostname to bind to
--port # set the port to bind to
--debug # turns on vite debugging
```
--------------------------------
### Install One with pnpm
Source: https://onestack.dev/docs/installation
Use this command to install the latest version of One with pnpm.
```bash
pnpm add one@latest --save-exact
```
--------------------------------
### Vite Configuration for Setup File
Source: https://onestack.dev/docs/components-Stack
Integrate the OneStack setup file into your Vite build process by adding the `one` plugin to `vite.config.ts`. Specify the path to your setup file.
```typescript
import { one } from 'one/vite'
export default {
plugins: [
one({
setupFile: './app/setup.ts',
}),
],
}
```
--------------------------------
### Start Production Server
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Run the production server to serve the optimized build. This is typically used for testing the production build locally before deployment.
```bash
one start
```
--------------------------------
### Install Pods for iOS
Source: https://onestack.dev/docs/guides-ios-native
Run this command to install CocoaPods dependencies if the ios/.xcworkspace is missing.
```bash
cd ios && pod install && cd ..
```
--------------------------------
### Install Vercel CLI
Source: https://onestack.dev/docs/guides-deployment
Install the Vercel Command Line Interface globally for manual deployments.
```bash
npm install -g vercel
```
--------------------------------
### MDX Frontmatter Example
Source: https://onestack.dev/docs/guides-mdx
Example of frontmatter for an MDX file, including title and description.
```markdown
---
title: MDX Guide
description: Setting up MDX for web
---
In building out this beautiful website, and the equally beautiful [tamagui.dev](https://tamagui.dev), the surprising
most difficult part was getting MDX to work well...
```
--------------------------------
### Run Migrated One App
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Start the One application using the 'yarn start' command. The app will be available at http://localhost:8081.
```bash
yarn start
```
--------------------------------
### Add One to Project
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Install One and its dependencies using Yarn.
```bash
yarn add one
```
--------------------------------
### Install Tamagui and Color Scheme Package
Source: https://onestack.dev/docs/guides-tamagui
Install Tamagui, its configuration, Vite plugin, and the color scheme package using npm.
```bash
npm add tamagui @tamagui/config @tamagui/vite-plugin @vxrn/color-scheme
```
--------------------------------
### Global Drawer Setup
Source: https://onestack.dev/docs/components-Drawer
Configure drawer rendering globally using `setupRendering`. This can be overridden by local props like `render` or `drawerContent`.
```javascript
import { setupRendering } from 'one'
import { MyDrawerContent } from './ui/MyDrawerContent'
setupRendering({
Drawer: { web: MyDrawerContent },
})
```
--------------------------------
### Install expo-updates
Source: https://onestack.dev/docs/guides-ota-updates
Install the expo-updates package using npm.
```bash
npm install expo-updates
```
--------------------------------
### Install MDX Dependencies
Source: https://onestack.dev/docs/guides-mdx
Install the necessary @vxrn/mdx and mdx-bundler packages using yarn.
```bash
yarn add @vxrn/mdx mdx-bundler
```
--------------------------------
### App Manifest Example
Source: https://onestack.dev/docs/guides-deep-linking
An example of an app manifest configuration that includes the app name and scheme, which can be used for deep linking.
```json
{
"name": "MyApp",
"scheme": "myapp"
}
```
--------------------------------
### Install Drawer Dependencies
Source: https://onestack.dev/docs/components-Drawer
Install the required optional peer dependencies for the Drawer component using npm.
```bash
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
```
--------------------------------
### Setup File Configuration
Source: https://onestack.dev/docs/configuration
Specify a JavaScript or TypeScript file to import before the rest of the application runs. Supports single files for all environments or environment-specific configurations.
```javascript
export default {
plugins: [
one({
// Single file for all environments
setupFile: './setup.ts',
// Or different files per environment
setupFile: {
client: './setup.client.ts',
server: './setup.server.ts',
native: './setup.native.ts',
},
// Or with platform-specific native files
setupFile: {
client: './setup.client.ts',
server: './setup.server.ts',
ios: './setup.ios.ts',
android: './setup.android.ts',
},
}),
],
}
```
--------------------------------
### GET /api/hello
Source: https://onestack.dev/docs/routing-api-routes
A simple GET endpoint that returns a JSON response with 'hello: world'.
```APIDOC
## GET /api/hello
### Description
A simple GET endpoint that returns a JSON response with 'hello: world'.
### Method
GET
### Endpoint
/api/hello
### Response
#### Success Response (200)
- **hello** (string) - A greeting message.
### Response Example
{
"hello": "world"
}
```
--------------------------------
### Install Dependencies
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Install project dependencies using npm or yarn. This includes One's core packages and any other required libraries.
```bash
npm install
```
--------------------------------
### Programmatic Serve Function
Source: https://onestack.dev/docs/one-serve
Import and use the `serve` function programmatically to start the production server. It accepts an options object for configuration.
```typescript
import { serve } from 'one/serve'
await serve()
```
--------------------------------
### Custom Wrangler Configuration Example
Source: https://onestack.dev/docs/guides-deployment
An example of a custom `wrangler.jsonc` file that can be merged with the generated configuration. It shows how to set the application name and compatibility flags.
```json
{
"name": "your-app-name",
"compatibility_flags": ["nodejs_compat"],
"assets": { "directory": "../client" }
}
```
--------------------------------
### Install NativeTabs Dependencies
Source: https://onestack.dev/docs/components-NativeTabs
Install the necessary packages for NativeTabs functionality. These are optional peer dependencies.
```bash
npx expo install @bottom-tabs/react-navigation react-native-bottom-tabs
```
--------------------------------
### Middleware Execution Flow Example
Source: https://onestack.dev/docs/routing-middlewares
Illustrates the sequential execution of middlewares from the root to a specific route handler, followed by response bubbling.
```text
Request to /blog/post/123
↓
1. app/_middleware.ts (runs first)
↓
2. app/blog/_middleware.ts (runs second)
↓
3. app/blog/post/_middleware.ts (runs third)
↓
4. Route handler executes
↓
Responses bubble back up through each middleware
```
--------------------------------
### Basic Drawer Usage
Source: https://onestack.dev/docs/components-Drawer
Demonstrates the basic setup for the Drawer component. The GestureHandlerRootView wrapper is required for gesture handling on native platforms.
```typescript
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { Drawer } from 'one/drawer'
export default function Layout() {
return (
)
}
```
--------------------------------
### Global Setup for Tab Rendering
Source: https://onestack.dev/docs/components-Tabs
This snippet shows how to globally configure custom tab bar rendering using the `setupRendering` function. This global setup can be overridden by passing a `render` prop directly to the `` component or by passing a `tabBar` prop.
```typescript
import { setupRendering } from 'one'
import { MyTabBar } from './ui/MyTabBar'
setupRendering({
Tabs: { web: MyTabBar },
})
```
--------------------------------
### Proceeding State Example
Source: https://onestack.dev/docs/hooks-useBlocker
This snippet illustrates the state where the user has chosen to proceed with navigation, and the navigation is currently in progress.
```javascript
if (blocker.state === 'proceeding') {
blocker.location // Where we're navigating to
}
```
--------------------------------
### Typed Routes with Multiple Parameters
Source: https://onestack.dev/docs/routing-typed-routes
Example of using `createRoute` with multiple dynamic parameters, ensuring all parameters are fully typed.
```typescript
import { createRoute } from 'one'
const route = createRoute<'/blog/[category]/[year]/[slug]'>()
export const loader = route.createLoader(({ params }) => {
// All params are fully typed!
const { category, year, slug } = params
// category: string, year: string, slug: string
return { post: await fetchPost(category, year, slug) }
})
```
--------------------------------
### Configure Environment Variables
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Example of how to set environment variables in a .env file for your One project. These variables can be accessed within your application.
```dotenv
NODE_ENV=development
PORT=3000
API_URL=http://localhost:5000
```
--------------------------------
### Navigate to Project Directory
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Change into the newly created One project directory.
```bash
cd my-app
```
--------------------------------
### URLSearchParams Methods Example
Source: https://onestack.dev/docs/hooks-useSearchParams
Illustrates common URLSearchParams methods such as get, has, getAll, iteration, and toString. These methods are available on the object returned by useSearchParams.
```javascript
const searchParams = useSearchParams()
// Get a single value
searchParams.get('key') // string | null
// Check if param exists
searchParams.has('key') // boolean
// Get all values for a key (for repeated params)
searchParams.getAll('tag') // string[]
// Iterate over all entries
for (const [key, value] of searchParams) {
console.log(key, value)
}
// Convert to string
searchParams.toString() // 'key=value&other=123'
```
--------------------------------
### Add Tamagui to One Project
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Instructions for adding Tamagui, a UI kit, to your One project. This involves installing Tamagui packages and configuring it.
```bash
yarn add tamagui @tamagui/next-plugin
```
--------------------------------
### Imperative Navigation with useRouter
Source: https://onestack.dev/docs/hooks-useRouter
Use the useRouter hook to get access to imperative navigation methods. This example shows how to push a new route with a masked URL.
```typescript
const router = useRouter()
// Navigate to /photos/5/modal but show /photos/5 in the URL bar
router.push('/photos/5/modal', {
mask: { href: '/photos/5' }
})
```
--------------------------------
### Basic Usage of useSearchParams
Source: https://onestack.dev/docs/hooks-useSearchParams
Demonstrates how to get individual search parameters like 'sort' and 'category' from the URL. Ensure the 'one' library is imported.
```javascript
import { useSearchParams } from 'one'
// URL: /products?sort=price&category=electronics
export default function Products() {
const searchParams = useSearchParams()
const sort = searchParams.get('sort') // 'price'
const category = searchParams.get('category') // 'electronics'
const missing = searchParams.get('missing') // null
return Sorted by {sort}
}
```
--------------------------------
### Basic SafeAreaView Layout
Source: https://onestack.dev/docs/components-SafeAreaView
Use SafeAreaView to wrap your main layout and ensure content respects safe area boundaries. This example shows a basic setup for a layout component.
```javascript
import { SafeAreaView, Slot } from 'one'
export default function Layout() {
return (
)
}
```
--------------------------------
### API Route Example
Source: https://onestack.dev/docs/render-modes
Defines a simple GET endpoint for an API route. API routes use standard Web Request and Response objects and are intended to be called from other routes or services.
```typescript
export function GET(request: Request) {
return Response.json({ message: 'Hello!' })
}
```
--------------------------------
### Create a New One Project
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Initialize a new One project using the One CLI. This command sets up the basic project structure and necessary configuration files.
```bash
one create my-app
```
--------------------------------
### Manual CLI Deploy (Prebuilt)
Source: https://onestack.dev/docs/guides-deployment
Deploy a pre-built application using the Vercel CLI. Use the --prebuilt flag to deploy existing build output.
```bash
# Build for Vercel
npx one build
# Deploy using Vercel CLI
vercel deploy --prebuilt
```
--------------------------------
### Build and Serve Production Build Locally
Source: https://onestack.dev/docs/guides-deployment
Build the application and serve the production build locally for testing. Note: This uses Hono server, not actual Vercel serverless functions.
```bash
# Build the app
npx one build
# Serve the production build
npx one serve
```
--------------------------------
### GET Headers
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests and retrieves the 'Authorization' header from the request.
```APIDOC
## GET /
### Description
Handles GET requests and retrieves the 'Authorization' header from the request.
### Method
GET
### Endpoint
/
### Parameters
#### Headers
- **Authorization** (string) - Required - The authorization token.
### Response
#### Success Response (200)
- **authenticated** (boolean) - Indicates if an Authorization header was present.
### Request Example
```json
{
"example": "request body"
}
```
### Response Example
```json
{
"authenticated": true
}
```
```
--------------------------------
### Deploy Preview Build Locally
Source: https://onestack.dev/docs/guides-deployment
Deploy a preview build of the application locally for testing purposes.
```bash
# Deploy a preview (not production)
vercel deploy --prebuilt
```
--------------------------------
### Build and Serve Node.js Deployment
Source: https://onestack.dev/docs/guides-deployment
Commands to build your One application for production and start the Node.js production server. The build output is organized into client, server, and API directories.
```bash
# Build for production
npx one build
# Start the production server
npx one serve
```
--------------------------------
### Open Dev Tools Spotlight
Source: https://onestack.dev/docs/dev-tools
Press Alt+Space to open the spotlight menu, then select a tool. Keyboard shortcuts are available for direct access to specific panels like SEO Preview (Alt+S), Route Info (Alt+R), Loader Timing (Alt+L), and Errors (Alt+E). Press Escape to close any panel.
```text
Alt+S - SEO Preview
Alt+R - Route Info
Alt+L - Loader Timing
Alt+E - Errors
```
--------------------------------
### one serve Command Line Arguments
Source: https://onestack.dev/docs/one-serve
Configure the server's hostname, port, compression, environment variable loading, and cluster mode via command-line arguments.
```bash
--host # string, set the hostname to bind to
--port # string, set the port to bind to
--compress # boolean, enable gzip compression, defaults to true
--loadEnv # boolean, whether to load .env files before running
--cluster # enable cluster mode using all CPU cores
--cluster=N # enable cluster mode with N workers
```
--------------------------------
### Production CLI Deploy (Prebuilt)
Source: https://onestack.dev/docs/guides-deployment
Deploy the pre-built application to production using the Vercel CLI with the --prod flag.
```bash
vercel deploy --prebuilt --prod
```
--------------------------------
### GET Query Parameters
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests and extracts 'page' and 'limit' query parameters from the URL.
```APIDOC
## GET /
### Description
Handles GET requests and extracts 'page' and 'limit' query parameters from the URL.
### Method
GET
### Endpoint
/
### Parameters
#### Query Parameters
- **page** (string) - Optional - The page number for pagination. Defaults to '1'.
- **limit** (string) - Optional - The number of items per page. Defaults to '10'.
### Response
#### Success Response (200)
- **page** (string) - The extracted page number.
- **limit** (string) - The extracted limit per page.
### Request Example
```json
{
"example": "request body"
}
```
### Response Example
```json
{
"page": "1",
"limit": "10"
}
```
```
--------------------------------
### Install @vxrn/native
Source: https://onestack.dev/docs/native-features
Install the @vxrn/native package using npm. For iOS, ensure you add the native module to your Podfile.
```bash
npm install @vxrn/native
```
```ruby
pod 'VxrnNative', :path => '../node_modules/@vxrn/native/ios'
```
--------------------------------
### Install @vercel/og Package
Source: https://onestack.dev/docs/guides-open-graph
Install the @vercel/og package using npm to enable dynamic OpenGraph image generation.
```bash
npm install @vercel/og
```
--------------------------------
### GET Request with Redirect
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests and performs a redirect to a different API endpoint based on route parameters.
```typescript
import { redirect } from 'one'
export function GET(request: Request, { params }: { params: { id: string } }) {
return redirect(`/api/v2/users/${params.id}`)
}
```
--------------------------------
### GET Request with Custom Headers
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests and returns a JSON response with custom 'Content-Type' and 'Cache-Control' headers.
```typescript
export function GET(request: Request) {
return new Response(JSON.stringify({ data: [] }), {
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'public, max-age=3600',
},
})
}
```
--------------------------------
### Programmatic Server Implementation
Source: https://onestack.dev/docs/cli
Programmatically serve your production application using the `serve` function from 'one/serve'. It accepts various options for customization.
```javascript
import { serve } from 'one/serve'
await serve()
```
```javascript
type ServeOptions = {
// you can pass in your own Hono server
app?: Hono
host?: string
port?: number
compress?: boolean
/**
* Whether to run the Vite logic to load .env files before running the server
* @default false
*/
loadEnv?: boolean
}
```
--------------------------------
### GET /api/users/[id] with typed params
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests for a specific user, with typed path parameters using `createAPIRoute`.
```APIDOC
## GET /api/users/[id] with typed params
### Description
Handles GET requests for a specific user, with typed path parameters using `createAPIRoute`.
### Method
GET
### Endpoint
/api/users/:id
### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the user (typed string).
### Response
#### Success Response (200)
- **id** (string) - The ID of the user.
### Response Example
{
"id": "some-user-id"
}
```
--------------------------------
### Serve Production Web App
Source: https://onestack.dev/docs/cli
Use `one serve` to serve your built web application for production. It is powered by Hono and supports options for host, port, compression, and clustering.
```bash
one serve [options]
--host # set the hostname to bind to
--port # set the port to bind to
--compress # enable gzip compression (default: true)
--loadEnv # load .env files before running
--cluster # enable cluster mode using all CPU cores
--cluster=N # enable cluster mode with N workers
```
--------------------------------
### GET /api/v2/users/[id]
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests to redirect to a specific user endpoint. Extracts the user ID from the path parameters.
```APIDOC
## GET /api/v2/users/[id]
### Description
Handles GET requests to redirect to a specific user endpoint. Extracts the user ID from the path parameters.
### Method
GET
### Endpoint
/api/v2/users/:id
### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the user.
### Response
#### Success Response (302)
- Redirects to the specified user endpoint.
### Response Example
(Redirects to `/api/v2/users/${params.id}`)
```
--------------------------------
### GET /api/data
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests to retrieve data. Returns an empty data array with custom cache control headers.
```APIDOC
## GET /api/data
### Description
Handles GET requests to retrieve data. Returns an empty data array with custom cache control headers.
### Method
GET
### Endpoint
/api/data
### Response
#### Success Response (200)
- **data** (array) - An array of data items.
### Response Example
{
"data": []
}
```
--------------------------------
### GET with Rest Parameters
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests with rest parameters for dynamic path segments. These segments are joined to form a file path.
```APIDOC
## GET /:path*
### Description
Handles GET requests with rest parameters for dynamic path segments. These segments are joined to form a file path.
### Method
GET
### Endpoint
/:path*
### Parameters
#### Path Parameters
- **path** (string[]) - Required - An array of dynamic path segments.
### Response
#### Success Response (200)
- **path** (string) - The joined file path string.
### Request Example
```json
{
"example": "request body"
}
```
### Response Example
```json
{
"path": "some/nested/file/path"
}
```
```
--------------------------------
### Build for Production
Source: https://onestack.dev/docs/guides-migrating-create-react-app-cra-to-vite-with-one
Generate an optimized production build of your One application. This command bundles your code and assets for deployment.
```bash
one build
```
--------------------------------
### GET with Dynamic Route Parameter
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests with a dynamic 'id' parameter in the route. The parameter is extracted and returned in the JSON response.
```APIDOC
## GET /:id
### Description
Handles GET requests with a dynamic 'id' parameter in the route. The parameter is extracted and returned in the JSON response.
### Method
GET
### Endpoint
/:id
### Parameters
#### Path Parameters
- **id** (string) - Required - The dynamic ID segment of the route.
### Response
#### Success Response (200)
- **id** (string) - The extracted dynamic ID.
### Request Example
```json
{
"example": "request body"
}
```
### Response Example
```json
{
"id": "some-dynamic-id"
}
```
```
--------------------------------
### GET /api/users/[id]
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests to retrieve a specific user. Returns the user data if found, or a 404 error if the user is not found.
```APIDOC
## GET /api/users/[id]
### Description
Handles GET requests to retrieve a specific user. Returns the user data if found, or a 404 error if the user is not found.
### Method
GET
### Endpoint
/api/users/:id
### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the user.
### Response
#### Success Response (200)
- **user** (object) - The user data.
#### Response Example
(User object structure depends on `getUser` implementation)
#### Error Response (404)
- **error** (string) - Description of the error.
#### Response Example
{
"error": "User not found"
}
```
--------------------------------
### Middleware API Reference with Type Definitions
Source: https://onestack.dev/docs/routing-middlewares
This example shows the detailed type definitions for the middleware handler provided by `createMiddleware`. It illustrates the `MiddlewareProps` interface, including `request`, `next`, and `context` properties, and how to use them within your middleware logic.
```typescript
import { createMiddleware, type Middleware } from 'one'
type MiddlewareProps = {
request: Request // Standard Web API Request
next: () => Promise // Call the next middleware/route
context: Record // Shared mutable object for data passing
}
export default createMiddleware(async ({ request, next, context }: MiddlewareProps) => {
// Your middleware logic
})
```
--------------------------------
### GET Request with Error Handling for Not Found User
Source: https://onestack.dev/docs/routing-api-routes
Handles GET requests, attempts to fetch a user by ID, and returns a 404 JSON error response if the user is not found.
```typescript
export async function GET(request: Request, { params }: { params: { id: string } }) {
const user = await getUser(params.id)
if (!user) {
return Response.json({ error: 'User not found' }, { status: 404 })
}
return Response.json(user)
}
```
--------------------------------
### Open iOS Workspace with Xcode
Source: https://onestack.dev/docs/guides-ios-native
Open the `.xcworkspace` file in the `./ios` directory using the `open` command to prepare for running the app in Xcode.
```bash
open ios/*.xcworkspace
```
--------------------------------
### Basic useLoader Example
Source: https://onestack.dev/docs/hooks-useLoader
Demonstrates the basic usage of the useLoader hook to access data returned by a loader function. The loader must be defined in the same file as the component.
```javascript
import { useLoader } from 'one'
export function loader() {
return { hello: 'world' }
}
export default function Page() {
const data = useLoader(loader)
return (
<>{data.hello}
)
}
```
--------------------------------
### Get Current Application URL
Source: https://onestack.dev/docs/helpers-getURL
Use this snippet to get the current URL of the running application. In development, it defaults to the local server address. In production, it relies on the ONE_SERVER_URL environment variable.
```javascript
import { getURL } from 'one'
const url = getURL()
// Dev: "http://127.0.0.1:8081"
// Prod: Your ONE_SERVER_URL value
```
--------------------------------
### Add One Skills for AI Agents
Source: https://onestack.dev/docs/installation
Install the official One skills to enable AI agents like Claude Code, Cursor, and Codex to build with One. Refer to the GitHub repository for per-agent installation instructions.
```bash
npx skills add onestack/skills
```
--------------------------------
### Build for a specific platform
Source: https://onestack.dev/docs/one-build
Use `npx one build` followed by the target platform (web, ios, android). Defaults to web if no platform is specified.
```bash
npx one build [web | ios | android]
```
```bash
npx one build ios
```
--------------------------------
### Loading .env files and process.env
Source: https://onestack.dev/docs/environment
One automatically loads .env files and makes environment variables available on both import.meta.env and process.env. Variables are server-only unless prefixed with VITE_, EXPO_PUBLIC_, or ONE_PUBLIC_.
```bash
ONE_PUBLIC_DAYTIME=false one dev
```
--------------------------------
### Unblocked State Example
Source: https://onestack.dev/docs/hooks-useBlocker
This snippet shows the condition for when navigation is not blocked and is allowed to proceed normally.
```javascript
if (blocker.state === 'unblocked') {
// Normal state, navigation is allowed
}
```