Inglorious WebInstallation
Get up and running with Inglorious Web in just a few commands.
Prerequisites
- Node.js 16+ or Bun
- npm, pnpm, or yarn
Step 1: Choose Your Setup Path
Recommended: Create App (Scaffolding)
Use the official scaffolding tool for the fastest setup:
npm create @inglorious/app@latest
Or with your preferred package manager:
# with yarn
yarn create @inglorious/app
# with pnpm
pnpm create @inglorious/app
2
3
4
5
The CLI will guide you to choose:
- Project name
- Template (minimal, js, ts, ssx-js, ssx-ts)
Then install and start developing:
cd my-app
npm install
npm run dev
2
3
Best for: Getting started quickly with a pre-configured project
Templates:
- minimal — No bundling, just HTML/CSS/JS
- js — JavaScript + Vite
- ts — TypeScript + Vite
- ssx-js — Static site generation (JavaScript)
- ssx-ts — Static site generation (TypeScript)
Alternative Setup Options
Option A: No Build Step (Manual)
If you prefer not to use a bundler:
npm install @inglorious/web
Create index.html:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
2
3
4
5
6
7
8
9
10
Create main.js:
import { createStore, mount, html } from "@inglorious/web"
const store = createStore({
types: {
app: {
render: (entity, api) => html`<h1>Hello World</h1>`,
},
},
entities: {
app: { type: "app" },
},
})
mount(store, (api) => api.render("app"), document.getElementById("root"))
2
3
4
5
6
7
8
9
10
11
12
13
14
Pros: Zero build step, instant feedback, works in any browser
Cons: No TypeScript, no optimizations
Option B: Vite (Manual)
Set up with Vite for a modern development experience:
npm create vite@latest my-app -- --template vanilla
cd my-app
npm install @inglorious/web
2
3
Then update main.js with your Inglorious Web code (see Option A above).
Run npm run dev and visit http://localhost:5173.
Pros: Fast HMR, TypeScript support, optimized builds
Cons: Slight build complexity
Option C: TypeScript + Vite (Manual)
For full TypeScript support:
npm create vite@latest my-app -- --template vanilla-ts
cd my-app
npm install @inglorious/web
2
3
Create src/types.ts:
import { html, type API } from "@inglorious/web"
export interface AppEntity {
type: "app"
message: string
}
export const app = {
render(entity: AppEntity, api: API) {
return html`<h1>${entity.message}</h1>`
},
}
2
3
4
5
6
7
8
9
10
11
12
Create src/main.ts:
import { createStore, mount } from "@inglorious/web"
import { app } from "./types"
const store = createStore({
types: { app },
entities: {
app: { type: "app", message: "Hello, TypeScript!" },
},
})
mount(store, (api) => api.render("app"), document.getElementById("root")!)
2
3
4
5
6
7
8
9
10
11
Pros: Type safety, autocomplete, IDE support
Cons: Requires TypeScript knowledge
Verify Installation
Create a simple test app:
import { createStore, mount, html } from "@inglorious/web"
const store = createStore({
types: {
counter: {
increment(entity) {
entity.count++
},
render(entity, api) {
return html`
<div>
<p>Count: ${entity.count}</p>
<button @click=${() => api.notify("#counter:increment")}>+1</button>
</div>
`
},
},
},
entities: {
counter: { type: "counter", count: 0 },
},
})
mount(store, (api) => api.render("counter"), document.getElementById("root"))
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
If you see a counter that increments when clicked, you're all set! 🎉
Related Packages
- @inglorious/store — Entity-based state management (required)
- lit-html — DOM templating library (required)
- @inglorious/vite-plugin-jsx — JSX support
- @inglorious/vite-plugin-vue — Vue template support
- @inglorious/create-app — Project scaffolding
Next Steps
- Quick Start — Build your first app
- Core Concepts — Understand entities and types
- Getting Started — Comprehensive introduction