Skip to content

Commit

Permalink
docs(readme): Update README.md by adding Single File Hosting and Reac…
Browse files Browse the repository at this point in the history
…t Client-Side Routing Sections

    -Added a section in the README.md cheat sheet for hosting a single file, which provides two methods for serving files.
    -Added a section for handling React's client-side routing with descriptions of the implementation and purpose of waterfall system.
    -Fixed issues with spacing and syntax in README.md cheat sheet.
  • Loading branch information
rs-dkd authored and coolaj86 committed Oct 14, 2024
1 parent f2c4694 commit 6337e70
Showing 1 changed file with 79 additions and 0 deletions.
79 changes: 79 additions & 0 deletions caddy/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ We've split what we find most useful into two categories:

- **Caddy for Developers** (Caddyfile)
- Serve Static Files & Directories
- React's Client-Side Routing
- Hosting a Single File
- Warning-free HTTPS on localhost
- Redirect (ex: www, https)
- Logging
Expand Down Expand Up @@ -147,6 +149,83 @@ See also:
- [`file_server`][file_server]:
<https://caddyserver.com/docs/caddyfile/directives/file_server>

### How to handle React's Client-Side Routing

React utilizez client-side routing, which requires Caddy to use certain server configurations.
This is a result of React not following HTTP and HTML standards when handling URLs, as it needs
to serve index.html.

The following configuration will follow a waterfall system to ensure that all special routes
are handled correctly:

```Caddyfile
localhost {
# ...
# Proxies API requests
handle /api/* {
reverse_proxy localhost:3000
}
# Serves static assets
handle_path /assets/* {
root * ./build/
file_server
}
# Handles dynamic routing
handle /* {
root * ./public/
file_server {
browse
}
}
}
```

Steps taken:
1. Proxies the API requests to the backend server, or fails with 404 error.
2. Serves the static assets from the ./build/assets/ directory, or fails with 404 error.
3. Handles other types of requests by attempting to serve the file directly, and falls back to
index.html for client-side routing (never fails with 404 error).

### Hosting a Single File

Caddy can be used to host a single file. This can be done by serving a specific route
for the file, or by using a generic handler with a rewrite rule that points to an HTML
file.

1. Specific Route with Single File:

This approach is helpful when there is a specific endpoint (in this case /thing) and a
single file (thing.txt).

```Caddyfile
localhost {
# ...
handle /thing {
rewrite * ./thing.txt
root * ./build/
file_server
}
}
```

2. Generic Routing with Rewriting:

This approach uses a rewrite rule for /thing to point directly an HTML file in the directory.
This is more flexible if multiple files and routes are going to be implemented later.

```Caddyfile
localhost {
# ...
handle /* {
rewrite /thing ./things/thing-1.html
root * ./build/
file_server
}
}
```

### How to serve HTTPS on localhost

Caddy can be used to test with https on localhost.
Expand Down

0 comments on commit 6337e70

Please sign in to comment.