LeviRoutes Examples

This directory contains working examples demonstrating the features of LeviRoutes.

Running the Examples

To run these examples locally, you'll need a local web server. You can use any of these options:

Using Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Using Node.js (http-server)

npx http-server -p 8000

Using PHP

php -S localhost:8000

Then navigate to http://localhost:8000/examples/ in your browser to see the examples index, or directly access any example HTML file.

Available Examples

1. GET Example (`get-example1/`)

Files: example.html, page2.html

Demonstrates basic GET routing with HTML5 History API. Shows how to:

Define GET routes
Handle browser navigation (back/forward buttons)
Intercept link clicks and use pushState

Try it: Click between pages and use browser back/forward buttons to see routes trigger.

2. POST Example (`post-example1/`)

Files: example.html, post2.html

Demonstrates POST form interception. Shows how to:

Define POST routes
Intercept form submissions
Access form values
Selectively handle forms (some intercepted, some passed through)

Try it: Submit the forms to see the difference between intercepted and non-intercepted forms.

3. Middleware Example (`middleware-example.html`)

Demonstrates the middleware system. Shows how to:

Register multiple middleware functions
Execute middleware in order
Pass data between middleware and route handlers
Use the next() callback

Try it: Open the page to see middleware execution logged in order.

4. Named Parameters Example (`named-params-example/index.html`)

Comprehensive demonstration of named parameters in routes. Shows how to:

Define routes with single parameters (:username)
Use multiple parameters (:username/:postId)
Extract parameter values from the URL
Handle format specifiers (:category.:format)
Navigate programmatically with parameters

Try it: Click the navigation links to see how parameters are extracted and displayed.

5. Complete SPA Example (`spa-example/index.html`)

A full-featured single-page application showcasing all LeviRoutes features. Includes:

Multiple pages with navigation
Named parameter routes for dynamic content
Middleware for logging and state management
POST form handling with validation
Error handling (404 pages)
Styled UI with animations
Real-world patterns and best practices

Try it: Explore the full SPA with home, about, blog, users, and contact pages.

Example Features Covered

Feature	GET Example	POST Example	Middleware Example	Named Params	Complete SPA
Basic routing	✓	✓	✓	✓	✓
Named parameters	-	-	-	✓	✓
Form handling	-	✓	-	-	✓
Middleware	-	-	✓	-	✓
HTML5 History	✓	-	-	✓	✓
Error handling	-	-	-	-	✓
Dynamic rendering	-	-	-	✓	✓

Notes

Existing examples (GET, POST) use the classic script format with routes.js from the project root for backward compatibility
New examples (Named Parameters, SPA) use modern ES module syntax with src/routes.js - this is the recommended approach for new projects
Examples are designed to work in modern browsers that support ES6+ and HTML5 History API
The examples demonstrate client-side routing only (no server-side components required)
For best results, ensure you start the web server from the project root directory

Building Your Own

To create your own example:

Create a new HTML file in the appropriate subdirectory

Import LeviRoutes (adjust path based on location):

<!-- For files in examples/client/ subdirectories -->
<script type="module">
  import routes from '../../../src/routes.js';
  const app = new routes();
  // ... your code
</script>

Define your routes and middleware
Test in a browser with a local web server (start from project root)

See the main README.md for full API documentation.

FilesExpand file tree

README.md

Latest commit

History