Skip to content
Removing the demo

Removing the demo

Start from a starter

The fastest way to remove the demo is to not have it. Each of the five starters — starters/html/, starters/react/, starters/nextjs/, starters/vue/ and starters/nuxt/ — is built by stripping every demo-only file out of its edition: no demo data, no mock API, no auth and no record search. A deny-list, LEFTOVER_RE in tools/starter/build.mjs, then fails the build if anything demo-shaped survived by accident. See starters for how to copy one out and run it.

What follows is for a full edition that already has screens built against the demo, where switching to a starter is not an option.

What the demo is

Demo bar (role switcher, Reset)Mock APIDemo accounts / sessionLanding page/crash
HTMLhtml/partials/demobar.html, included by {{> demobar}}shared/mock/api.mjs, bundled into html/assets/vendor/orion-shared.jsshared/auth/session.mjs, read in html/assets/js/app.js and html/assets/js/page-auth.jshtml/pages/landing.html, html/layouts/landing.html, html/assets/js/page-landing.js—
Reactreact/src/components/DemoBar.tsxreact/src/app/mocks/handle.ts and react/src/app/mocks/server.ts (MSW) over shared/mock/api.mjsreact/src/shared/auth/session.mjs, read in react/src/app/session.tsreact/src/pages/Landing.tsxreact/src/pages/Crash.tsx
Vuevue/src/components/DemoBar.vuevue/src/app/mocks/handle.ts and vue/src/app/mocks/server.ts (MSW) over shared/mock/api.mjsvue/src/shared/auth/session.mjs, read in vue/src/app/session.ts—vue/src/pages/Crash.vue
Next.jsnextjs/src/components/demo-bar.tsxnextjs/src/server/api.ts, in the server process directly (no MSW)nextjs/src/shared/auth/session.mjs, read in nextjs/src/server/api.ts and nextjs/src/server/auth-actions.ts—nextjs/src/app/[locale]/crash/page.tsx
Nuxtnuxt/app/components/DemoBar.vuenuxt/server/utils/mock.ts and nuxt/server/api/[...path].ts, in the server process directly (no MSW)nuxt/app/shared/auth/session.mjs, read in nuxt/server/api/[...path].ts—nuxt/app/pages/crash.vue

The demo fixtures are the generated JSON under each edition's shared/mock/ mirror — the product, customer and order data, and the rest of it — produced by tools/mock-data/build.mjs. Replacing the mock API with your own backend is what stops them being read at all; there is nothing else to delete for them specifically.

HTML

The toolbar. partials/demobar.html is included by {{> demobar}} in every page that has it — 16 of this edition's pages (grep -l '{{> demobar}}' pages/*.html). Delete the partial and its {{> demobar}} line from each of them. The role switcher (the data-or-role-switch group) lives inside that same partial and goes with it. Two more pieces of the toolbar live outside it, in assets/js/app.js: the [data-or-demo], [data-or-demo-reset] and [data-or-demo-role] click handlers. A sixth piece lives in six page scripts' own error state — page-customer.js, page-customers.js, page-dashboard.js, page-order.js, page-orders.js and page-products.js each render a "Try again" data-or-demo button of their own. Delete the handlers and the six buttons along with the partial, or the markup left behind has nothing to click.

Mock data. Of the four scripts injected in partials/foot.html, only one is demo-only: remove the shared/mock/dataset.inline.js tag and keep shared/icons/sprite.inline.js, shared/brand/wordmark.inline.js and shared/locales/locales.inline.js, which every edition needs regardless. In bundle.mjs, drop the shared/mock/* re-exports — createDataset/ summarise, createApi/createFetchLike, persistMutations, runQuery/ paramsFromSearch, COLLECTIONS, createDemoState/DEMO_DEFAULTS/ errorBody — and shared/mock/analytics.mjs's analyse, the function that builds the Analytics report from the mock dataset. Keep that module's rangeFrom and HEATMAP_BLOCKS, and analyticsView from shared/analytics/view.mjs: assets/js/page-analytics.js reads all three straight from the browser, not through the mock API, so the Analytics screen still needs them once GET /api/metrics/analytics is your own endpoint. In assets/js/app.js, replace the data layer built from those exports — window.OR_DATA, Shared.createDataset, Shared.createDemoState, Shared.persistMutations(Shared.createApi(…)) and Shared.createFetchLike — with a fetch to your own API behind the get/send helpers the page controllers already call. One more thing reads the dataset directly: the window.Orion object's dataset property is that same Shared.createDataset(…) instance, and assets/js/page-dashboard.js calls its .rows('orders') and .rows('deals') to total order statuses and pipeline stages without a round trip through get/send. Give the dashboard a real source for those two totals — a summary endpoint, or count them from data you already fetched — before dropping dataset from the app object.

Demo session. Following shared/auth/README.md's "What to keep, what to delete," replace Session.readToken, Session.sessionUser and Session.bearer in assets/js/app.js, and the token write in assets/js/page-auth.js's login screen (shared.session.writeToken(…)), with your real sign-in. The lock screen's own window.Orion.get('/auth/session') call, further down assets/js/page-auth.js, needs no change: it already goes through the same fetch wrapper as every other request, calling the real GET /auth/session contract shared/auth/README.md documents. Then drop export * as session from bundle.mjs. Keep permissions — shared/auth/permissions.mjs is product code a real backend still needs.

Landing. If you are not keeping the marketing page, delete pages/landing.html, layouts/landing.html and assets/js/page-landing.js. Keep assets/js/plans.js if pages/pricing.html stays — it draws the plan cards both pages read from shared/billing/pricing.mjs.

React

  • react/src/components/DemoBar.tsx — delete, and remove its import and use from every page under react/src/pages/ that renders it: Analytics.tsx, Calendar.tsx, CustomerProfile.tsx, Customers.tsx, Dashboard.tsx, Forbidden.tsx, Inbox.tsx, Invoice.tsx, OrderDetail.tsx, Orders.tsx, Pipeline.tsx, Pricing.tsx, ProductEdit.tsx, Products.tsx, Profile.tsx and Settings.tsx.
  • react/src/app/demo.ts — delete last. Its useDemo/useApplyDemo are woven into the query cache: react/src/app/queries.ts has an internal useDemoKey() helper threaded into the query key of about fourteen hooks (summary, timeseries, settings, profile, invoices, list, detail, notifications, search and their mutations) so that toggling the demo bar's empty/error switches invalidates the right cache entries — delete that helper and drop demoKey from each of those query keys. react/src/pages/Analytics.tsx, Calendar.tsx and Inbox.tsx each build their own inline demo key the same way for their own query — remove it from each. react/src/pages/Dashboard.tsx calls useApplyDemo only to refetch right after a demo-state change — remove that call too, then delete demo.ts itself.
  • react/src/app/mocks/handle.ts and react/src/app/mocks/server.ts — delete the MSW mock server, and drop the startMockServer() call and its import from react/src/main.tsx.
  • react/src/layout/Palette.tsx — remove the command palette's "Reset demo" command (POST /__reset).
  • react/src/app/session.ts — delete DEMO_ACCOUNTS, tokenFor and switchAccount, and point react/src/app/api.ts's token source at your real sign-in instead of the demo's readToken/browserStorage. See what to keep, what to delete for the module split.
  • react/src/pages/Crash.tsx — delete, and its /crash route in react/src/app/App.tsx.
  • react/src/pages/Landing.tsx — delete if you are not keeping the marketing page, and its /landing route in react/src/app/App.tsx.

Vue

  • vue/src/components/DemoBar.vue — delete, and remove it from every page under vue/src/pages/ that renders it: Analytics.vue, Calendar.vue, CustomerProfile.vue, Customers.vue, Dashboard.vue, Forbidden.vue, Inbox.vue, Invoice.vue, OrderDetail.vue, Orders.vue, Pipeline.vue, Pricing.vue, ProductEdit.vue, Products.vue, Profile.vue and Settings.vue.
  • vue/src/app/demo.ts — delete last. Its useDemo/useApplyDemo are woven into the query cache: vue/src/app/queries.ts has an internal useDemoKey() helper threaded into the query key of about fourteen hooks (summary, timeseries, analytics, calendar, inbox, settings, profile, invoices, list, detail, notifications and search, and their mutations) so that toggling the demo bar's empty/error switches invalidates the right cache entries — delete that helper and drop demoKey from each of those query keys. vue/src/pages/Dashboard.vue calls useApplyDemo only to refetch right after a demo-state change — remove that call too, then delete demo.ts itself.
  • vue/src/app/mocks/handle.ts and vue/src/app/mocks/server.ts — delete the MSW mock server, and drop the startMockServer() call from vue/src/main.ts.
  • vue/src/layout/Palette.vue — remove the command palette's "Reset demo" command (POST /__reset).
  • vue/src/app/session.ts — delete DEMO_ACCOUNTS and switchAccount, and point vue/src/app/api.ts's token source at your real sign-in. See what to keep, what to delete for the module split.
  • vue/src/pages/Crash.vue — delete, and its /crash route in vue/src/router.ts.

Next.js

  • nextjs/src/components/demo-bar.tsx — delete, and remove its import and use from every page.tsx under nextjs/src/app/[locale]/ that renders it: the dashboard page and its analytics, calendar, customers (list and detail), forbidden, inbox, invoices (detail), orders (list and detail), pipeline, pricing, products (list and detail), profile and settings route folders.
  • nextjs/src/server/demo.ts — delete the resetDemo server action.
  • nextjs/src/layout/palette.tsx — remove the command palette's own "Reset demo" command, which also imports and calls resetDemo.
  • nextjs/src/server/api.ts and nextjs/src/server/auth-actions.ts — this edition has no separate mock-server folder; the mock router runs inside the server process itself. Point these at your real backend instead of the in-memory dataset, and replace the demo's session-cookie handling with your real sign-in. See what to keep, what to delete for the module split.
  • nextjs/src/app/[locale]/crash/page.tsx — delete the file; routing is file-based here, so there is no separate route registration to remove.
  • This edition has no landing page.

Nuxt

  • nuxt/app/components/DemoBar.vue — delete, and remove it from every page under nuxt/app/pages/ that renders it: index.vue, analytics.vue, calendar.vue, forbidden.vue, inbox.vue, pipeline.vue, pricing.vue, profile.vue, settings.vue, the customers, orders and products list and detail pages, and the invoices detail page.
  • nuxt/server/utils/mock.ts and nuxt/server/api/[...path].ts — this edition also has no separate mock-server folder; the mock router runs on Nuxt's own server. Point these at your real backend, and replace the demo's cookie-based session with your real sign-in. See what to keep, what to delete for the module split.
  • nuxt/app/pages/crash.vue — delete the file; routing is file-based here too, so there is no separate route registration to remove.
  • This edition has no landing page.