Skip to content
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

doc: How to host React sites with Caddy? #692

Open
coolaj86 opened this issue Oct 21, 2023 · 2 comments
Open

doc: How to host React sites with Caddy? #692

coolaj86 opened this issue Oct 21, 2023 · 2 comments
Labels
documentation Improvements or additions to documentation good first issue Good for newcomers hacktoberfest up-for-grabs

Comments

@coolaj86
Copy link
Member

coolaj86 commented Oct 21, 2023

By default, React doesn't follow HTTP and HTML standards for URLs - it has a proprietary system that requires hijacking 404s, always serving index.html, and then presenting Not Found errors on the client-side instead.

We need to add an example of how to do this with Caddy to the Cheat Sheet:
https://github.com/webinstall/webi-installers/tree/main/caddy

Note: we need to make sure that special routes /api/, /assets/, /js/, etc are still handled correctly - probably a "try first, then" / waterfall type of system.

For example:

  • handle /api/* => always reverse_proxy, or fail with 404
  • handle /assets/ => try root /srv/www{path}, or fail with 404
  • handle /* => try root /srv/www{path}, or serve index.html (NEVER 404)
@coolaj86 coolaj86 added documentation Improvements or additions to documentation good first issue Good for newcomers up-for-grabs hacktoberfest labels Oct 21, 2023
@coolaj86
Copy link
Member Author

I think it's basically to replace file_server with try_files

localhost {
    # handle API requests
    handle /api/* {
        reverse_proxy localhost:3000
    }

    # handle static assets
    handle_path /assets/* {
        rewrite * /assets{path}
        root ./build/assets/
        file_server
    }

    # handle dynamic routing
    handle /* {
        root ./build/
        file {path} /index.html
    }
}

@coolaj86
Copy link
Member Author

coolaj86 commented Nov 23, 2023

Also, how to host a single file:

    handle /thing {
        rewrite * ./thing.txt
        root * ./build/
        file_server
    }

# or

    handle /* {
        rewrite /thing ./things/thing-1.html
        root * ./build/
        file_server
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation good first issue Good for newcomers hacktoberfest up-for-grabs
Projects
None yet
Development

No branches or pull requests

1 participant