Skip to content

Commit 25c8bf1

Browse files
committed
Created main site
0 parents  commit 25c8bf1

File tree

101 files changed

+15954
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+15954
-0
lines changed

.gitattributes

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto
3+
* text eol=lf
4+
5+
# Don't do anything with binaries
6+
*.png binary
7+
*.jpg binary
8+
*.svg binary
9+
*.jpeg binary
10+
*.gif binary
11+
*.ico binary
12+
*.mov binary
13+
*.mp4 binary
14+
*.mp3 binary
15+
*.flv binary
16+
*.fla binary
17+
*.swf binary
18+
*.gz binary
19+
*.zip binary
20+
*.7z binary
21+
*.ttf binary
22+
*.eot binary
23+
*.woff binary
24+
*.woff2 binary
25+
*.pyc binary
26+
*.pdf binary
27+
*.ez binary
28+
*.bz2 binary
29+
*.swp binary
30+
*.webp binary

.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*
21+
22+
# WSL
23+
*:Zone.Identifier

.markdownlint.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"MD013": false,
3+
"MD049": false
4+
}

.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
node_modules
3+
.yarn

.prettierrc.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
printWidth: 80, // max 120 chars in line, code is easy to read
3+
useTabs: false, // use spaces instead of tabs
4+
tabWidth: 2, // "visual width" of of the "tab"
5+
trailingComma: "es5", // add trailing commas in objects, arrays, etc.
6+
semi: true, // add ; when needed
7+
singleQuote: false, // '' for stings instead of ""
8+
bracketSpacing: true, // import { some } ... instead of import {some} ...
9+
arrowParens: "always", // braces even for single param in arrow functions (a) => { }
10+
jsxSingleQuote: false, // "" for react props, like in html
11+
jsxBracketSameLine: false, // pretty JSX
12+
endOfLine: "lf", // 'lf' for linux, 'crlf' for windows, we need to use 'lf' for git
13+
};

README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Website
2+
3+
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```bash
8+
yarn
9+
```
10+
11+
### Local Development
12+
13+
```bash
14+
yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```bash
22+
yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
The `.env.local` file needs to contain the following entries retrieved from [algolia](https://www.algolia.com):
27+
28+
```bash
29+
APPLICATION_ID=XXXX
30+
API_KEY=xxxx
31+
```

babel.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
3+
};
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
title: Setup Caddy for SPA Stored at S3 Object Storage. (React with react-router)
3+
authors: ajay_dhangar
4+
tags: [docker, self-hosting, SPA, React]
5+
description: Set up Caddy for serving a Single Page Application (SPA) like a React app with react-route. The react app is stored at a remote storage like S3, minio.
6+
---
7+
8+
To set up Caddy for serving a Single Page Application (SPA) like a React app with react-router, you need to handle routing such that all navigation requests are routed to `index.html`, while also serving the static assets correctly.
9+
10+
{/* truncate */}
11+
12+
## Directory Structure on Remote Storage
13+
14+
Let's assume that the React app is stored at a remote storage like S3, minio, etc. The directory structure of the React app on the remote storage should look like this:
15+
16+
```md title="Directory Structure"
17+
├── index.html
18+
├── static
19+
│ ├── css
20+
│ │ └── main.2d2b7b6a.chunk.css
21+
│ ├── js
22+
│ │ ├── 2.2d2b7b6a.chunk.js
23+
│ │ ├── main.2d2b7b6a.chunk.js
24+
│ │ └── runtime-main.2d2b7b6a.js
25+
│ └── media
26+
│ └── logo.2d2b7b6a.png
27+
```
28+
29+
## Caddyfile Configuration
30+
31+
To serve the React app using Caddy, you need to create a `Caddyfile` with the following configuration:
32+
33+
```md title="Caddyfile"
34+
your-domain.com {
35+
root * /path/to/your/react-app
36+
file_server
37+
try_files {path} /index.html
38+
}
39+
```
40+
41+
In the above configuration:
42+
43+
- `your-domain.com` is your domain name.
44+
- `/path/to/your/react-app` is the path to your React app on the remote storage.
45+
- `file_server` is used to serve the static assets.
46+
- `try_files {path} /index.html` is used to route all navigation requests to `index.html`.
47+
48+
## Docker Configuration
49+
50+
If you are using Docker to run Caddy, you can create a `Dockerfile` with the following configuration:
51+
52+
```dockerfile title="Dockerfile"
53+
FROM caddy:2.4.3
54+
55+
COPY Caddyfile /etc/caddy/Caddyfile
56+
```
57+
58+
You can then build the Docker image and run the container using the following commands:
59+
60+
```bash title="Build and Run Docker Container"
61+
docker build -t caddy-spa .
62+
docker run -d -p 80:80 caddy-spa
63+
```
64+
65+
That's it! You have now set up Caddy to serve a Single Page Application (SPA) like a React app with react-router.
66+
67+
## Conclusion
68+
69+
In this article, we discussed how to set up Caddy for serving a Single Page Application (SPA) like a React app with react-router. By handling routing and serving static assets correctly, you can ensure that your SPA works as expected when hosted on a remote storage like S3, minio, etc.

blog/authors.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
ajay_dhangar:
2+
name: Ajay Dhangar
3+
title: Full Stack Developer | Open Source Maintainer
4+
url: http://github.com/ajay-dhangar
5+
image_url: https://github.com/ajay-dhangar.png

0 commit comments

Comments
 (0)