Caddy v2 rewrite Webpack devServer React Router

I am hosting Webpack Dev Server behind Caddy v2 reverse proxy:

              "match": [
                {
                  "path": [
                    "/myapp-ui-dev*"
                  ]
                },
                {
                  "handler": "rewrite",
                  "strip_path_suffix": "inventory"
                },
                {
                  "handler": "reverse_proxy",
                  "upstreams": [
                    {
                      "dial": "localhost:3007"
                    }
                  ]
                }

Users access the app via URL: https://10.10.10.10/myapp-ui-dev/.

I introduced the following routes in React:

  • https://10.10.10.10/myapp-ui-dev/inventory
  • https://10.10.10.10/myapp-ui-dev/sources

The Webpack Dev server serves everything from https://10.10.10.10/myapp-ui-dev/. It does not know about inventory in sources.

I have the following snippet to remove the trailing path.

                {
                  "handler": "rewrite",
                  "strip_path_suffix": "inventory"
                },

However, as I introduce more endpoints, e.g. sources, it does not scale well.

What is the best way of handling this?


Relevant error message: Cannot GET.

I think using a path_regexp matcher where you set up capture groups would be the better approach. Then you can rewrite based on the capture groups.

@francislavoie, what would be the JSON construct for it?

Idk, something like this?

            {
              "group": "group0",
              "match": [
                {
                  "path_regexp": {
                    "name": "strip",
                    "pattern": "\\/myapp-ui-dev(.*)"
                  }
                }
              ],
              "handle": [
                {
                  "handler": "rewrite",
                  "uri": "/myapp-ui-dev/"
                }
              ]
            }

Your requirements aren’t perfectly clear to me… so that’s just a guess.

You can use {http.regexp.strip.1} to use the (.*) capture.

If you don’t actually care what the suffix bit is, you could just always rewrite to /myapp-ui-dev/ and not even use a path_regexp matcher.

When Webpack Dev Server https://github.com/webpack/webpack-dev-server bundles all javascript in a single file and serves /index.html and bundle.js files. The index.html looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="app"/>
  <script type="text/javascript" src="/myapp-ui-dev/bundle.js"></script></body>
</html>

The browsing to inventory, sources, etc., is a creature of Javascript. A client does not actually browse anywhere. Nevertheless, the URL path is critical to match the one of the Javascript router.

The challenge is that / (in my case I am prepending, i.e. /myapp-ui-dev) root path may contain .css and images, e.g. .png. These should not be rewritten.

just to add to the conversation. here are the files webpack serves out of its root path.

                               Asset       Size  Chunks             Chunk Names
079230ae180a3627768e50378c0805fa.png   80 bytes          [emitted]
9316c322dd96b144e4130c36104811fc.png   1.11 KiB          [emitted]
                           bundle.js   5.93 MiB    main  [emitted]  main
                          index.html  189 bytes          [emitted]

Maybe something like this? (Feel free to adapt to JSON)

@notStatic {
    not path *.html *.js *.css *.png
}
rewrite @notStatic /myapp-ui-dev/

The issue is that since you don’t have the files on disk because you’re proxying, Caddy can’t use the file matcher which would make this trivial.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.