Caddy v2 rewrite Webpack devServer React Router

Coding
1

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.

2

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.

3

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

4

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.

5

When Webpack Dev Server GitHub - webpack/webpack-dev-server: Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/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.

6

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]
7

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
8

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