VueJS with JSON

Help
1

1. The problem I’m having:

I am trying to get the VueRouter redirections to work eg:. https:///cs2darchive.com/clients

Now I understand somehow I have to redirect each routes to index.html, but I am unsure how to do that with JSON, I only found Caddyfile examples, but those are a bit different huh.

2. Error messages and/or full log output:

HTTP 404 errors whenever I press F5 on any of the VueRouter pages.

3. Caddy version:

v2.8.4

4. How I installed and ran Caddy:

Using Caddy's repository and via apt install caddy

a. System environment:

Ubuntu 24.04 Server on Aarch64 Raspi5 via systemd

b. Command:

sudo caddy run --config global-caddy.json

d. My complete Caddy config:

{
    "apps": {
        "http": {
            "servers": {
                "default": {
                    "listen": [
                        ":80"
                    ],
                    "routes": [
                        {
                            "handle": [
                                {
                                    "handler": "file_server",
                                    "root": "/path/to/default/root"
                                }
                            ]
                        }
                    ]
                },
                "https": {
                    "listen": [
                        ":443"
                    ],
                    "routes": [
                        {
                            "handle": [
                                {
                                    "handler": "file_server",
                                    "root": "/home/marcell/PagerCast/"
                                }
                            ],
                            "match": [
                                {
                                    "host": [
                                        "pager.brohosting.eu"
                                    ]
                                }
                            ]
                        },
                        {
                            "handle": [
                                {
                                    "handler": "file_server",
                                    "root": "/home/marcell/PagerCast/"
                                }
                            ],
                            "match": [
                                {
                                    "host": [
                                        "asf.raspberry.local"
                                    ]
                                }
                            ]
                        },
                        {
                            "handle": [
                                {
                                    "handler": "file_server",
                                    "root": "/home/marcell/PagerCast/"
                                }
                            ],
                            "match": [
                                {
                                    "host": [
                                        "pagercast.com",
                                        "api.pagercast.com",
                                        "www.pagercast.com"
                                    ]
                                }
                            ]
                        },
                        {
                            "handle": [
                                {
                                    "handler": "file_server",
                                    "root": "/home/marcell/_domains/cs2darchive.com/dist"
                                }
                            ],
                            "match": [
                                {
                                    "host": [
                                        "cs2darchive.com",
                                        "www.cs2darchive.com"
                                    ],
                                    "not": [
                                        {
                                            "path": [
                                                "/api/*"
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "handle": [
                                {
                                    "handler": "reverse_proxy",
                                    "upstreams": [
                                        {
                                            "dial": "localhost:3415"
                                        }
                                    ]
                                }
                            ],
                            "match": [
                                {
                                    "host": [
                                        "cs2darchive.com",
                                        "www.cs2darchive.com"
                                    ],
                                    "path": [
                                        "/api/*"
                                    ]
                                }
                            ]
                        },
                        {
                            "handle": [
                                {
                                    "handler": "file_server",
                                    "root": "/home/marcell/_domains/verify.gtavc.cc/dist"
                                }
                            ],
                            "match": [
                                {
                                    "host": [
                                        "verify.gtavc.cc"
                                    ],
                                    "not": [
                                        {
                                            "path": [
                                                "/api/v1/*"
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "handle": [
                                {
                                    "handler": "reverse_proxy",
                                    "upstreams": [
                                        {
                                            "dial": "localhost:3000"
                                        }
                                    ]
                                }
                            ],
                            "match": [
                                {
                                    "host": [
                                        "verify.gtavc.cc"
                                    ],
                                    "path": [
                                        "/api/v1/*"
                                    ]
                                }
                            ]
                        }
                    ],
                    "tls_connection_policies": [
                        {
                            "certificate_selection": {
                                "any_tag": [
                                    "default"
                                ]
                            }
                        }
                    ]
                }
            }
        },
        "tls": {
            "certificates": {
                "load_files": [
                    {
                        "certificate": "/home/marcell/PagerCast/certs/cert.pem",
                        "key": "/home/marcell/PagerCast/certs/privkey.pem",
                        "tags": [
                            "default"
                        ]
                    }
                ]
            }
        }
    }
}
2

Howdy @sqpp, welcome to the Caddy community.

Unfortunately I’m not particularly great with JSON myself, but I have to ask, have you seen the caddy adapt command?

With it you could take any of the examples you’ve seen and spit out the JSON version. Since I’m a Caddyfile user, in your shoes I’d look at configuring a setup with try_files (Caddyfile directive) — Caddy Documentation and then adapt-ing it as necessary.

1 Like
3

Thanks fro the welcome! Nice meeting you!

I am thinking to ditch JSON at this point as I am always getting into roadblocks everytime, even with the environmental variables.

I tried to use try_files but I got into a redirection loop, but I am very unfamiliar with Caddy file or even how Caddy handles these rewrites.

4

Redirect loop from a request router… Can’t say that’s a common issue I’ve seen, unfortunately. Is there some nuance for VueRouter that might mistakenly redirect you off the page?

If you check out the try_files expanded form you can see what it does. It uses a file matcher to try find a file and then uses rewrite (Caddyfile directive) — Caddy Documentation to serve it. The first example on the page demonstrates its use for a router entrypoint.

Single page applications are pretty much exactly what this kind of directive is for. The behaviour is included by default in php_fastcgi (Caddyfile directive) — Caddy Documentation, for example.

2 Likes
5

Not sure about the try_files directive, I have seen examples in Caddyfile, but not with JSON.

All I know that this .htaccess worked perfectly with OLS before, so the issue is unlikely the router itself.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # Handle requests for existing files or directories
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Handle all other requests
  RewriteRule ^ index.html [L]
</IfModule>
6

Well, lets look at what the .htaccess file does:

  1. RewriteCond %{REQUEST_FILENAME} -f [OR]
    This checks if the request is for a real file on disk.
  2. RewriteCond %{REQUEST_FILENAME} -d
    This checks if the request is for a directory on disk.
  3. RewriteRule ^ - [L]
    If either condition above is true, don’t rewrite (- means no substitition) and stop evaluating ([L] means don’t process any more rules).
  4. RewriteRule ^ index.html [L]
    This part rewrites all requests to the webroot index.html if we didn’t already find a file or directory and no-op the rewrite.

So basically - look for a file. Look for a directory. If neither exist, fall back to the webroot index.

Functionally, all of that is identical to:

try_files {path} {path}/ /index.html

Which checks each in sequence and goes with the first match it can find:

  1. {path} checks for a file on disk and proceeds with it if it exists.
  2. {path}/ checks for a directory on disk and proceeds with it if it exists.
  3. /index.html is the last option and therefore a fallback if neither of the previous checks were successful.

There’s nothing here which causes any redirects, all rewriting is internal and hidden from the client.

3 Likes
7

I had to make a ton of changes, also switching from JSON to Caddyfile as its way simpler since 85% of the resources on the internet are Caddyfile, but in the end I was able to get it working… :slight_smile:

All websites rocking now!

Thank you!

2 Likes
8

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