{"id":43835127,"url":"https://github.com/danielabar/web_native_routing","last_synced_at":"2026-02-06T04:07:01.619Z","repository":{"id":335702513,"uuid":"1141304083","full_name":"danielabar/web_native_routing","owner":"danielabar","description":"A lightweight single-page application router built with native web APIs only. No frameworks, no build tools, no dependencies - just vanilla JavaScript demonstrating modern browser capabilities for simple routing needs. Perfect for small sites, GitHub Pages, and exploring no-framework principles.","archived":false,"fork":false,"pushed_at":"2026-02-01T01:02:37.000Z","size":105,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-01T04:49:10.905Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://danielabar.github.io/web_native_routing/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielabar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-24T16:15:55.000Z","updated_at":"2026-02-01T01:02:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/danielabar/web_native_routing","commit_stats":null,"previous_names":["danielabar/web_native_routing"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/danielabar/web_native_routing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielabar%2Fweb_native_routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielabar%2Fweb_native_routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielabar%2Fweb_native_routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielabar%2Fweb_native_routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielabar","download_url":"https://codeload.github.com/danielabar/web_native_routing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielabar%2Fweb_native_routing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29149739,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-06T04:07:00.998Z","updated_at":"2026-02-06T04:07:01.611Z","avatar_url":"https://github.com/danielabar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Native Routing\n\nA simple demo application showing how to achieve SPA-like routing with a single index.html file using native web APIs only. No frameworks, no build tools required for development - vanilla JavaScript demonstrating how modern browsers can handle client-side routing without heavyweight SPA frameworks. Includes a simple build system for deployment base path management. Inspired by: [Anti-frameworkism: Choosing native web APIs over frameworks](https://blog.logrocket.com/anti-frameworkism-native-web-apis).\n\n## Why This Project?\n\nModern browsers can handle most problems that frontend frameworks were originally created to solve. This project explores the a \"no-framework\" approach - starting with zero dependencies and using only web platform APIs to build a functional SPA router.\n\nPerfect for:\n- Small marketing sites\n- Portfolio websites\n- GitHub Pages deployment\n- Learning web fundamentals\n- Understanding deployment base path challenges\n\n## Features\n\n- Client-side routing with History API\n- HTML template loading with Fetch API\n- Explicit base path configuration for deployment flexibility\n- Build system for automated deployment\n- SPA fallback for direct URL access\n- Zero dependencies for core functionality\n- Browser back/forward support\n\n## Quick Start\n\n### Development Setup\n\n```bash\n# Install development tool\nnpm install\n\n# Start development server with live reload\nnpm run dev\n```\n\nThe application will be available at `http://localhost:3000`.\n\nClick on the navigation links with browser developer tools open to see how we remain on the same index.html while the view content gets swapped out in the main section.\n\n## Deployment\n\nThe project includes a build system to handle different base paths for local development versus deployment:\n\n### Local Development\nConfigured for root path serving (`/`) - works with `npm run dev`\n\n### GitHub Pages Deployment\nAutomatically configured for subdirectory serving (e.g., `/web_native_routing/`)\n\n```bash\n# Lightweight build for deployment (creates dist/ with correct base path)\nnpm run build\n\n# Deploy to GitHub Pages\nnpm run deploy\n```\n\n### Build System\n\nThe build system (`scripts/build.sh`) solves the base path challenge:\n- **Local development**: Serves from root path `/`\n- **GitHub Pages**: Serves from project subdirectory `/web_native_routing/`\n- **Build process**: Automatically switches base path configuration\n- **Configuration**: Set `deploy_base_path` in `package.json`\n\n**Key files:**\n- [`js/config.js`](js/config.js) - Single source of truth for base path\n- [`scripts/build.sh`](scripts/build.sh) - Build system that modifies config for deployment\n- [`404.html`](404.html) - SPA fallback for direct URL access on static hosts\n\n## Project Structure\n\n```\n├── index.html          # Main application entry point\n├── 404.html            # SPA fallback for direct URL access\n├── css/styles.css      # Application styling\n├── js/\n│   ├── router.js       # Core routing logic\n│   ├── app.js          # Application initialization\n│   ├── config.js       # Deployment configuration\n│   └── routes.js       # Route definitions\n├── scripts/\n│   └── build.sh        # Build system for deployment\n└── views/\n    ├── home/\n    │   ├── script.js   # Home page JavaScript\n    │   └── template.html # Home page template\n    ├── about/\n    │   ├── script.js   # About page JavaScript\n    │   └── template.html # About page template\n    └── contact/\n        ├── script.js   # Contact page JavaScript\n        └── template.html # Contact page template\n```\n\n## Browser Support\n\nWorks in all modern browsers that support:\n- History API\n- Fetch API\n- ES6 Classes\n- Arrow functions\n\n## Documentation\n\nDetailed documentation is available in the `docs/` directory:\n\n- [Architecture Overview](docs/architecture.md) - How the system works\n- [Router Implementation](docs/router-implementation.md) - Deep dive into the Router class (includes limitations)\n- [View System](docs/view-system.md) - Creating and managing views\n- [View Scripts \u0026 Interactivity](docs/view-system.md#writing-view-scripts--interactivity) - Adding behavior to views\n- [References](docs/references.md) - Further reading and learning resources\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielabar%2Fweb_native_routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielabar%2Fweb_native_routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielabar%2Fweb_native_routing/lists"}