create-onefold

create-onefold

The official project scaffolding tool for onefold.

Getting Started

npm create onefold@latest my-app
cd my-app
npm install
npm run dev

You can also use npx directly:

npx create-onefold my-app

Templates

Template	Description
base	Minimal setup — signals, templates, dev server.
spa	Single-page app with routing, pages, and state management. (default)
fullstack	SPA plus forms, i18n, auth guards, and HTTP client.
microfrontend	Host shell with independently-deployed remote widgets and security.

npm create onefold@latest my-app --template fullstack

Generated Structure

Every template includes:

• TypeScript with tsconfig.json pre-configured
• esbuild-based production build (build.mjs)
• Development server with livereload (dev.mjs)
• onefold as the sole framework dependency

No webpack, no babel, no complex configuration files.

spa (default)

src/
  main.ts             App shell with router
  routes/
    Home.ts           Home page
    About.ts          About page
    NotFound.ts       404 page
  state/
    app.ts            Application state
  components/
    Nav.ts            Navigation bar
index.html
style.css
build.mjs
dev.mjs

fullstack

src/
  main.ts             App shell with auth-guarded routes
  routes/
    Home.ts
    Login.ts          Login form with validation
    Dashboard.ts      Auth-protected page
  state/
    auth.ts           Auth state management
  components/
    Nav.ts            Auth-aware navigation
  i18n/
    index.ts          Internationalization setup

microfrontend

src/
  host/
    main.ts           Shell — loads remotes via loadRemote()
  remotes/
    billing/
      index.ts        Self-contained billing widget
    analytics/
      index.ts        Self-contained analytics widget
  shared/
    types.ts          Type contracts between host and remotes
build.mjs             Builds host + remotes (supports --target)
dev.mjs               Host :3000, remotes :3001 with CORS

CLI Options

Option	Alias	Description
--template <name>	-t	Template to use (base, spa, fullstack, microfrontend)
--help	-h	Display help
--version	-v	Display version

Scripts

Every generated project includes:

Script	Description
npm run dev	Development server with livereload (port 3000)
npm run build	Production build to dist/
npm run preview	Serve production build (port 4000)

The microfrontend template additionally provides build:host, build:billing, and build:analytics for independent builds.

Requirements

• Node.js 18+
• npm 7+

Documentation

• onefold documentation
• onefold on npm
• create-onefold on npm

License

MIT