Parent Project Template

This template demonstrates how to create a parent project that routes to multiple subprojects using Val Town projects.

Architecture

This project uses a proxy-based routing architecture:

  1. The main HTTP handler serves the home page and handles navigation
  2. Requests to specific paths (e.g., /subproject) are proxied to their respective subprojects
  3. Each subproject is a separate Val Town project with its own environment and configuration

How to Use This Template

To set up your own parent-subproject architecture:

  1. Clone/fork this template for the parent project
  2. Clone/fork the subproject template for each subproject
  3. Deploy your subproject(s) and note their endpoint URLs
  4. 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
  5. Customize the UI and content to fit your needs

Important Files to Modify

When remixing this template, you'll need to update:

  1. proxies.tsx:

    • Replace the endpoint URL in the target field with your own subproject's endpoint
    • Update the pattern and name fields as needed
  2. http.tsx:

    • Customize the homepage content
    • Update the styling and navigation as needed

Adding a New Subproject

To add a new subproject:

  1. Create a new Val Town project using the subproject template
  2. Deploy the subproject and note its endpoint URL
  3. Add the project's endpoint URL to the proxyRoutes array in proxies.tsx of this parent project
  4. Add a navigation link in the parent project's homepage

Custom Domain Setup

To use this architecture with a custom domain:

  1. Set up your custom domain to point to the parent project's endpoint
  2. The routing will work automatically - subprojects will appear under their paths on your domain
  3. 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