Skip to content

Commit 6337e70

Browse files
rs-dkdcoolaj86
authored andcommitted
docs(readme): Update README.md by adding Single File Hosting and React 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.
1 parent f2c4694 commit 6337e70

File tree

1 file changed

+79
-0
lines changed

1 file changed

+79
-0
lines changed

caddy/README.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ We've split what we find most useful into two categories:
3333

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

152+
### How to handle React's Client-Side Routing
153+
154+
React utilizez client-side routing, which requires Caddy to use certain server configurations.
155+
This is a result of React not following HTTP and HTML standards when handling URLs, as it needs
156+
to serve index.html.
157+
158+
The following configuration will follow a waterfall system to ensure that all special routes
159+
are handled correctly:
160+
161+
```Caddyfile
162+
localhost {
163+
# ...
164+
# Proxies API requests
165+
handle /api/* {
166+
reverse_proxy localhost:3000
167+
}
168+
169+
# Serves static assets
170+
handle_path /assets/* {
171+
root * ./build/
172+
file_server
173+
}
174+
175+
# Handles dynamic routing
176+
handle /* {
177+
root * ./public/
178+
file_server {
179+
browse
180+
}
181+
}
182+
}
183+
```
184+
185+
Steps taken:
186+
1. Proxies the API requests to the backend server, or fails with 404 error.
187+
2. Serves the static assets from the ./build/assets/ directory, or fails with 404 error.
188+
3. Handles other types of requests by attempting to serve the file directly, and falls back to
189+
index.html for client-side routing (never fails with 404 error).
190+
191+
### Hosting a Single File
192+
193+
Caddy can be used to host a single file. This can be done by serving a specific route
194+
for the file, or by using a generic handler with a rewrite rule that points to an HTML
195+
file.
196+
197+
1. Specific Route with Single File:
198+
199+
This approach is helpful when there is a specific endpoint (in this case /thing) and a
200+
single file (thing.txt).
201+
202+
```Caddyfile
203+
localhost {
204+
# ...
205+
handle /thing {
206+
rewrite * ./thing.txt
207+
root * ./build/
208+
file_server
209+
}
210+
}
211+
```
212+
213+
2. Generic Routing with Rewriting:
214+
215+
This approach uses a rewrite rule for /thing to point directly an HTML file in the directory.
216+
This is more flexible if multiple files and routes are going to be implemented later.
217+
218+
```Caddyfile
219+
localhost {
220+
# ...
221+
handle /* {
222+
rewrite /thing ./things/thing-1.html
223+
root * ./build/
224+
file_server
225+
}
226+
}
227+
```
228+
150229
### How to serve HTTPS on localhost
151230

152231
Caddy can be used to test with https on localhost.

0 commit comments

Comments
 (0)