This template demonstrates how to create a parent project that routes to multiple subprojects using Val Town projects.
This project uses a proxy-based routing architecture:
- The main HTTP handler serves the home page and handles navigation
- Requests to specific paths (e.g.,
/subproject
) are proxied to their respective subprojects
- Each subproject is a separate Val Town project with its own environment and configuration
To set up your own parent-subproject architecture:
- Clone/fork this template for the parent project
- Clone/fork the subproject template for each subproject
- Deploy your subproject(s) and note their endpoint URLs
- Update the
proxyRoutes
array in proxies.tsx
with your subproject endpoints
- Replace the
target
value with your own subproject's endpoint URL
- The endpoint URL format will be:
https://username--endpoint-id.web.val.run
- You can find this URL in your subproject's HTTP file after deployment
- Customize the UI and content to fit your needs
Important Files to Modify
When remixing this template, you'll need to update:
-
proxies.tsx:
- Replace the endpoint URL in the
target
field with your own subproject's endpoint
- Update the
pattern
and name
fields as needed
-
http.tsx:
- Customize the homepage content
- Update the styling and navigation as needed
To add a new subproject:
- Create a new Val Town project using the subproject template
- Deploy the subproject and note its endpoint URL
- Add the project's endpoint URL to the
proxyRoutes
array in proxies.tsx
of this parent project
- Add a navigation link in the parent project's homepage
To use this architecture with a custom domain:
- Set up your custom domain to point to the parent project's endpoint
- The routing will work automatically - subprojects will appear under their paths on your domain
- No additional configuration needed in the DNS settings
Benefits of This Architecture
- Clean separation between projects
- Each subproject has its own isolated environment variables
- Easy to add or modify subprojects without changing the parent project
- Unified user experience under a single domain