Caddy 2: Working JSON-File for React

1. Caddy version (caddy version): 2.1.0

2. How I run Caddy:

caddy.exe run -config config.json
But I plan to configure it as a service.

a. System environment:

Windows 10. Only local access is needed (Localhost and within the LAN)

b. Command:

caddy.exe run -config config.json

c. Service/unit/compose file:

none yet

d. My complete Caddyfile or JSON config:

{
	"apps": {
		"http": {
			"servers": {
				"hello": {
					"listen": [":2015"],
					"routes": [
						{
							"match": [{"host": ["localhost"]},{"host": ["192.168.43.112"]}],
							"handle": [
								{
									"handler": "file_server",
									"root": "./public"
								}
							]
						}
					]
				}
			}
		}
	}
}

3. The problem I’m having:

With this configuration I can serve static HTML.
I can not find a working configuration for my react-app. It uses react-router. I found examples like this:
https://stackoverflow.com/questions/57772701/how-to-configure-caddy-server-for-react-router
But they are using the Caddyfile. I would like to use the JSON config.
Are there examples for a working JSON configuration with React apps?

4. Error messages and/or full log output:

If I try to load the React App with this configuration, Chrome serves a blank page with these errors in the console:

Error handling response: TypeError: Cannot read property 'isMSE' of null
    at chrome-extension://flliilndjeohchalpbbcdekjklbdgfkk/js/content/content.js:5693:12
    at chrome-extension://flliilndjeohchalpbbcdekjklbdgfkk/js/content/content.js:2506:13

localhost:2015/%PUBLIC_URL%/favicon.ico:1 Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR

manifest.json:1 Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR

5. What I already tried:

I have no clue how to use the rewrite function with the JSON config. It is unclear to me on how to translate the Caddyfile examples to JSON.

6. Links to relevant resources:

Hello @David. If you’re not opposed to writing a Caddyfile you could adapt the Caddyfile to JSON and make it pretty

I concur - the best way to learn how to write JSON in my opinion is to first write a simple Caddyfile for what you want, then use the caddy adapt command to get the JSON for it.

For example, this is probably the Caddyfile for what you’re wanting:

:2015

root ./public

try_files {path} /index.html

file_server

Using caddy adapt --pretty, you would get this:

{
  "apps": {
    "http": {
      "servers": {
        "srv0": {
          "listen": [
            ":2015"
          ],
          "routes": [
            {
              "handle": [
                {
                  "handler": "vars",
                  "root": "./public"
                }
              ]
            },
            {
              "match": [
                {
                  "file": {
                    "try_files": [
                      "{http.request.uri.path}",

                      "/index.html"
                    ]
                  }
                }
              ],
              "handle": [
                {
                  "handler": "rewrite",
                  "uri": "{http.matchers.file.relative}"
                }
              ]
            },
            {
              "handle": [
                {
                  "handler": "file_server",
                  "hide": [
                    "Caddyfile"
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  }
}
1 Like

Thank you for answering my question, @francislavoie and @jfirestorm44 .
I did not know, about the caddy adapt function.

Here is what I ended up with:

{
    "apps": {
        "http": {
            "servers": {
                "srv0": {
                    "listen": [
                            ":2015"
                    ],
                    "routes": [
                        {
                            "match": [{"host": ["localhost"]},{"host": ["192.168.43.112"]}],
                            "handle": [
                                {
                                    "handler": "subroute",
                                    "routes": [
                                        {
                                            "handle": [
                                                {
                                                    "handler": "vars",
                                                    "root": "./public"
                                                }
                                            ]
                                        },
                                        {
                                            "handle": [
                                                {
                                                    "handler": "rewrite",
                                                    "uri": "{http.matchers.file.relative}"
                                                }
                                            ],
                                            "match": [
                                                {
                                                    "file": {
                                                        "try_files": [
                                                            "{http.request.uri.path}",
                                                            "/index.html"
                                                        ]
                                                    }
                                                }
                                            ]
                                        },
                                        {
                                            "handle": [
                                                {
                                                    "handler": "file_server",
                                                    "hide": [
                                                        "Caddyfile"
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ],
                            "terminal": true
                        }
                    ]
                }
            }
        }
    }
}

This works also with other Computers in the local network without complaints about the SSL Certificate. All there is to do is to trust the root certificate that Caddy has generated on the other LAN Computers.

Thanks. Great work.

3 Likes

This topic was automatically closed after 30 days. New replies are no longer allowed.