The full-stack app
Pages and forms, which is what most software is, and what most stacks make disproportionately hard.
The server renders and serves; React appears where interaction earns it, not by default. @atlas/ui is our own components and blocks — forms, tables, auth pages, navigation — so the parts every app has are already built and the parts that are yours are the ones you write.
When someone other than you needs to edit a row, turn to §59 and add the admin. It is configuration over the schemas you already have.
What you are carrying
@atlas/serverRoutes, forms, static assets.
@atlas/dbSchemas, queries, changesets.
@atlas/authSessions for the people looking at it.
@atlas/uiForms, tables, auth pages, shell.
Start it
atlas init -n mysite --template fullstack
What it looks like
import "@wess/atlas/ui/styles.css"
import { AtlasProvider, AppShell } from "@wess/atlas/ui/provider"
import { createForm, TextField, SubmitButton } from "@wess/atlas/ui/forms"
import { createTable, TextColumn, DateColumn } from "@wess/atlas/ui/table"
const usePost = createForm({
initial: { title: "" },
onSubmit: (values) => post("/posts", values),
})
const Posts = createTable({
data: posts,
columns: [
TextColumn({ key: "title", label: "Title" }),
DateColumn({ key: "createdAt", label: "Published" }),
],
})
export default function App() {
const { form, handleSubmit } = usePost()
return (
<AtlasProvider>
<AppShell>
<form onSubmit={handleSubmit}>
<TextField form={form} name="title" label="Title" />
<SubmitButton>Publish</SubmitButton>
</form>
<Posts />
</AppShell>
</AtlasProvider>
)
}