more info ⬇

@amattn

SW engineering, engineering management and the business of software

subscribe for more
stuff like this:

2020 04 02

Vue.js, vue-router's history mode and Caddy2

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.




you may also be interested in some of the greatest hits of amattn.com:

〜 Empathy as a Core Engineering Requirement

〜 Venture Capital Math 101

〜 You Should Foster a Culture of Readability

〜 The Customer's Semi-Lucid Trance State

〜 What is Engineering Management?




the fine print:
aboutarchive@amattnconsulting or speaking inquiries
© matt nunogawa 2010 - 2020 / all rights reserved
back ⬆