-
Notifications
You must be signed in to change notification settings - Fork 3
Enable path-based URL routing for web deployments #106
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
ed3bc9a
Initial plan
Copilot 336a45b
Add SPA routing support for path-based URLs
Copilot b52d1a3
Add documentation for path-based URL routing
Copilot 9cb1687
Fix code review feedback
Copilot 1e3c469
Remove trailing newlines for clean formatting
Copilot b21490a
Remove 404.html and update documentation per feedback
Copilot e3c7e18
Remove GitHub Pages deployment and all references
Copilot File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| # URL Routing Strategy | ||
|
|
||
| This document explains how URL routing works in the Cambridge Beer Festival app. | ||
|
|
||
| ## Overview | ||
|
|
||
| The app uses **path-based routing** (e.g., `/favorites`, `/drink/123`) instead of **hash-based routing** (e.g., `/#/favorites`, `/#/drink/123`). | ||
|
|
||
| ## Implementation | ||
|
|
||
| ### Flutter Side | ||
|
|
||
| The app uses [go_router](https://pub.dev/packages/go_router) version 14.6.2 (or later) for routing. Starting from go_router 7.0.0, path-based URL strategy is the default on web platforms, so no additional configuration is needed in the Flutter code. | ||
|
|
||
| ### Web Server Configuration | ||
|
|
||
| For path-based routing to work correctly on deployed web apps, the web server must be configured to serve `index.html` for all routes (SPA fallback). This is because when a user navigates directly to a route like `/favorites`, the web server needs to serve the main `index.html` file, which then loads the Flutter app that handles the routing internally. | ||
|
|
||
| #### Cloudflare Pages (Production & Staging) | ||
|
|
||
| **File**: `web/_redirects` | ||
|
|
||
| ``` | ||
| /* /index.html 200 | ||
| ``` | ||
|
|
||
| This tells Cloudflare Pages to serve `index.html` for all routes with a 200 status code. Cloudflare Pages natively supports the `_redirects` file format. | ||
|
|
||
| #### Local Development with http-server | ||
|
|
||
| For local testing, the project uses `http-server` with the `--proxy` flag to handle SPA routing: | ||
|
|
||
| ```bash | ||
| npx http-server build/web -p 8080 -c-1 -a 127.0.0.1 --proxy http://127.0.0.1:8080? | ||
| ``` | ||
|
|
||
| The `--proxy` flag tells http-server to fall back to serving `index.html` for routes that don't exist as physical files, enabling proper SPA behavior during local development and E2E testing. | ||
|
|
||
| ## Routes | ||
|
|
||
| The app supports the following routes: | ||
|
|
||
| - `/` - Home screen (drinks list) | ||
| - `/favorites` - Favorites screen | ||
| - `/about` - About screen | ||
| - `/festival-info` - Festival information screen | ||
| - `/drink/:id` - Drink detail screen (parameterized) | ||
| - `/brewery/:id` - Brewery screen (parameterized) | ||
| - `/style/:name` - Style screen (parameterized, URL-encoded) | ||
|
|
||
| ## Testing | ||
|
|
||
| E2E tests in `test-e2e/routing.spec.ts` verify: | ||
| - Path-based URLs work correctly | ||
| - Deep linking to specific routes works | ||
| - Browser back/forward buttons work | ||
| - Page refresh preserves the current route | ||
|
|
||
| ## Benefits of Path-Based Routing | ||
|
|
||
| 1. **Better SEO**: Search engines can properly index individual pages | ||
| 2. **Clean URLs**: URLs look cleaner and more professional | ||
| 3. **Shareable Links**: Users can share direct links to specific content | ||
| 4. **Standard Web Behavior**: Works like traditional websites | ||
| 5. **Better Analytics**: Analytics tools can track page views more accurately | ||
|
|
||
| ## Migration Notes | ||
|
|
||
| If you were previously using the app with hash-based routing, existing bookmarks with hash URLs (e.g., `/#/favorites`) will continue to work because go_router handles the migration automatically. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /* /index.html 200 |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Inconsistency detected: The documentation states the Cloudflare Pages project should be named
cambeerfestival-staging, but the actual workflow in.github/workflows/build-deploy.ymlline 273 usesstaging-cambeerfestival. This mismatch could cause deployment failures. Please verify the correct project name in Cloudflare and update the documentation accordingly, or update the workflow to match the documented name.