Demo walkthrough: Route, page, and action handoff

Use Demo Projects HQ to connect route-aware pages, layouts, and the real Server Connect actions that power them.

Demo Projects HQ: route, page, and action handoff

Use this bridge when you want one clear route-to-server map. The aim is to make the handoff explicit: Routing Manager selects the route, Pages Manager exposes the real layout and content files behind that route, the layout renders the content page through dmx-view, and the page then calls the real Server Connect actions that read or write data.

Instead of following one fragile page target here, continue into the already validated Demo Projects HQ walkthroughs below depending on whether you want data loading, form posting, or the security-aware route/session path.

Demo Projects HQ handoff

Start with the frontend surfaces, then continue into the validated Demo Projects HQ page-to-action walkthroughs.

Frontend surfaces

Pages: Overview

Start here to learn how Pages fits in your workflow, and jump into Manager, HTML Editor, and Overview.

Open tour

Routing (views, routes, internal links)

Understand Wappler’s modern hybrid routing: routes, layouts, content pages, and route-aware links.

Open tour

Server Connect components (data + forms)

Load data and submit forms via Server Connect components, using built-in state (executing/lastError/data).

Open tour

Demo Projects HQ walkthroughs

Demo walkthrough: Clients list (API → Page)

Trace the Clients list page end-to-end: a Server Connect SELECT action feeds a dmx-serverconnect component and a repeater.

Open tour

Demo walkthrough: Client forms (Create/Edit/Delete)

Learn how Server Connect Actions power forms: POST validation, dbupdater INSERT/UPDATE/DELETE, and client-side error/success states.

Open tour

Demo walkthrough: User update (routing + session + security)

Use the real users/update.json action in Demo Projects HQ to connect route params, session context, permissions, and a secure database update.

Open tour

Go to

Demo walkthroughs: Demo Projects HQ

Beginner-to-advanced walkthroughs using the Demo Projects HQ project, connecting Server Connect Actions to the frontend pages that call them.

Open destination

Routing and URL Rewrite

Start here for modern Wappler routing: Routing Manager routes, layout pages, content pages, and the URL patterns that shape how users reach your app.

Open destination

Security and Login

Start here for security-aware workflows in Wappler: session context, login-related server logic, and safe state handling.

Open destination

Routing starts with the real route map

Begin on the real Routes root in Routing Manager. This is the first handoff in the chain: it shows which routed page structure is matched before any layout or Server Connect action is involved.

Pages Manager overview

Keep the full Pages Manager surface in view before focusing on one routed file. This is where the route map turns into concrete layout and content files in Demo Projects HQ.

The routed layout folder

The layouts folder is where the route-level shell becomes concrete in Demo Projects HQ. Seeing it here makes the handoff explicit: routes do not stop at URL patterns, they resolve into reusable layout files before any page-level Server Connect logic runs.

The real layout tile

The live main.ejs tile is the concrete layout file behind the routed shell in Demo Projects HQ. From here, the next walkthroughs can focus on the page-level Server Connect actions that load data, submit forms, or apply security-aware updates inside that routed structure.