53 lines
8.4 KiB
Plaintext
53 lines
8.4 KiB
Plaintext
page Gettingstarted {
|
|
seo {
|
|
title = "Getting started"
|
|
description = "Build and run a first WRNexusJS application after receiving private preview access."
|
|
canonical = "https://wrnexusjs.dev/getting-started"
|
|
}
|
|
view {
|
|
<a href="#main" class="skip-link">Skip to content</a>
|
|
<div class="docs-shell">
|
|
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.8.8</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
|
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
|
<main id="main" class="portal-main docs-layout docs-layout--navigation"><aside class="docs-section-menu" aria-label="Documentation sections">
|
|
<nav>
|
|
<section><strong>Get started</strong><a href="/getting-started">Quick start</a><a href="/tutorial">Tutorial</a><a href="/guides/full-stack-auth-demo">Auth dashboard demo</a><a href="/guides/project-structure">Project structure</a><a href="/guides/configuration-and-profiles">Configuration</a></section>
|
|
<section><strong>Build</strong><a href="/guides/pages-and-components">Pages and components</a><a href="/guides/routing">Routing</a><a href="/guides/server-data">Server data</a><a href="/guides/forms-and-validation">Forms and validation</a><a href="/guides/database">Database</a></section>
|
|
<section><strong>Auth and security</strong><a href="/guides/authentication">Authentication</a><a href="/guides/authorization">Authorization</a><a href="/guides/security">Application security</a><a href="/security">Security policy</a></section>
|
|
<section><strong>Reference</strong><a href="/packages">Packages overview</a><a href="/packages/cli">CLI</a><a href="/language">.wrn language</a><a href="https://component.wrnexusjs.dev/">Components</a><a href="/examples">Examples</a></section>
|
|
<section class="package-menu"><strong>Packages</strong><a href="/packages/ai">@wrnexus/ai</a><a href="/packages/auth">@wrnexus/auth</a><a href="/packages/authz">@wrnexus/authz</a><a href="/packages/benchmark">@wrnexus/benchmark</a><a href="/packages/cache">@wrnexus/cache</a><a href="/packages/captcha">@wrnexus/captcha</a><a href="/packages/cli">@wrnexus/cli</a><a href="/packages/compiler">@wrnexus/compiler</a><a href="/packages/content">@wrnexus/content</a><a href="/packages/core">@wrnexus/core</a><a href="/packages/csr">@wrnexus/csr</a><a href="/packages/db">@wrnexus/db</a><a href="/packages/dev-server">@wrnexus/dev-server</a><a href="/packages/dev-toolbar">@wrnexus/dev-toolbar</a><a href="/packages/encryption">@wrnexus/encryption</a><a href="/packages/graphql">@wrnexus/graphql</a><a href="/packages/helpers">@wrnexus/helpers</a><a href="/packages/i18n">@wrnexus/i18n</a><a href="/packages/identity">@wrnexus/identity</a><a href="/packages/image">@wrnexus/image</a><a href="/packages/jwt">@wrnexus/jwt</a><a href="/packages/language-server">@wrnexus/language-server</a><a href="/packages/mcp">@wrnexus/mcp</a><a href="/packages/mobile">@wrnexus/mobile</a><a href="/packages/native">@wrnexus/native</a><a href="/packages/oauth">@wrnexus/oauth</a><a href="/packages/observability">@wrnexus/observability</a><a href="/packages/playground">@wrnexus/playground</a><a href="/packages/plugin">@wrnexus/plugin</a><a href="/packages/pubsub">@wrnexus/pubsub</a><a href="/packages/pwa">@wrnexus/pwa</a><a href="/packages/queue">@wrnexus/queue</a><a href="/packages/reactive">@wrnexus/reactive</a><a href="/packages/realtime">@wrnexus/realtime</a><a href="/packages/router">@wrnexus/router</a><a href="/packages/rpc">@wrnexus/rpc</a><a href="/packages/security">@wrnexus/security</a><a href="/packages/ssr">@wrnexus/ssr</a><a href="/packages/store">@wrnexus/store</a><a href="/packages/styles">@wrnexus/styles</a><a href="/packages/syntax">@wrnexus/syntax</a><a href="/packages/test">@wrnexus/test</a><a href="/packages/tracking">@wrnexus/tracking</a><a href="/packages/typecheck">@wrnexus/typecheck</a><a href="/packages/ui">@wrnexus/ui</a><a href="/packages/uploader">@wrnexus/uploader</a><a href="/packages/validation">@wrnexus/validation</a></section>
|
|
</nav>
|
|
</aside><div class="docs-reading-column"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Getting started</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · v0.8.8</span><h1>Build a contact inbox</h1><p>This path creates a server-rendered page, validated API route, middleware, and realtime next step. It requires approved registry access and Bun 1.3.x; this site was verified with Bun 1.3.14.</p><h2 id="create">1. Create the project</h2><pre><code>bunx @wrnexus/cli@0.8.8 create my-app
|
|
cd my-app
|
|
bun install
|
|
bun run dev</code></pre><h2 id="structure">2. Know the structure</h2><pre><code>app/pages/ # file-based .wrn routes
|
|
app/components/ # reusable .wrn components
|
|
app/api/ # TypeScript request handlers
|
|
app/middleware/ # ordered request middleware
|
|
app/schemas/ # shared validation
|
|
app/realtime/ # realtime rooms
|
|
wrnexus.config.ts</code></pre><h2 id="page">3. Add a page</h2><pre><code>page Contacts {
|
|
view {
|
|
<main><h1>Contact inbox</h1>
|
|
<form data-schema="contact" action="/api/contacts" method="post">
|
|
<input name="email" type="email" /><span data-error="email"></span>
|
|
<textarea name="message"></textarea><span data-error="message"></span>
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</main>
|
|
}
|
|
}</code></pre><h2 id="api">4. Validate an API route</h2><pre><code>import schema from "../schemas/contact";
|
|
import { parseBody } from "@wrnexus/validation";
|
|
export const POST = async (ctx) => {
|
|
const result = await parseBody(schema, ctx.req);
|
|
return result.ok ? Response.json({ ok: true }, { status: 201 }) : result.response;
|
|
};</code></pre><h2 id="server-data">5. Load server data</h2><p>Use an <code>ssr</code> API binding and a server <code>{#each}</code> block. See <a href="/guides/server-data">Server data</a> for the complete verified pattern.</p><h2 id="middleware">6. Add middleware</h2><pre><code>export default async function logger(ctx, next) {
|
|
console.log(ctx.req.method, ctx.url.pathname);
|
|
return next();
|
|
}</code></pre><h2 id="test-build">7. Test and ship</h2><pre><code>bun run test
|
|
bun run build
|
|
bun dist/server.js</code></pre><p>Next: <a href="/guides/deployment">deployment</a>, <a href="/guides/database">database</a>, <a href="/guides/authentication">authentication</a>, and <a href="/guides/workspaces-and-gateway">workspaces</a>.</p></article></div><aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#create">1. Create the project</a><a class="toc-level-2" href="#structure">2. Know the structure</a><a class="toc-level-2" href="#page">3. Add a page</a><a class="toc-level-2" href="#api">4. Validate an API route</a><a class="toc-level-2" href="#server-data">5. Load server data</a><a class="toc-level-2" href="#middleware">6. Add middleware</a><a class="toc-level-2" href="#test-build">7. Test and ship</a></nav></aside></main>
|
|
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.8.8</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
|
</div>
|
|
}
|
|
} |