I’ve spent the bulk of March’s shelter-in-place order learning Vue.js (v2) and Tailwind.

I quickly came upon and greatly prefer vue-router’s history mode.

Brief summary, this allows urls in a Vue-base SPA (single page app) that look like:

http://example.com/user/id/

instead of:

http://example.com/#user/id/

That initial hash tag in the path always felt un-web-like to me.

The downside of this is that you only have one index.html at the root (/) directory. If a user navigates from / to /login/, no big deal cause the router is doing it’s thing. If a user types in example.com/login/ directly, a standard config webserver will try to fetch /login/index.html instead and throw up a 404.

As documented in the docs, there is a workaround:Rewrite directives. The docs list rewrite examples for a handful of webservers, including Caddy v1. Caddy 2, currently in late beta doesn’t have an example.

In an attempt to help the internet out, here’s a working Caddy2 Caddyfile example to get history mode to work:

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

A real production Caddyfile will have other stuff in it of course:

example.com {
    file_server
    root public_html
    encode zstd gzip
    try_files {path} /index.html
}

I’ve been very happy with Caddy. It’s first class support of https is amazing and it’s performance has only gotten better over time. I’ve been using it for all new projects and highly recommend it.

I’ve got lots of other thoughts (primarily positive) on Vue.js, Tailwind CSS and FE development in general, but I’m saving that for a future post.