more info ⬇


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:

instead of:

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 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 {
    try_files {path} /index.html

A real production Caddyfile will have other stuff in it of course: {
    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.

recently on

2020 02 13 〜 Questions to ask about Growth Opportunities while you interview

2020 01 14 〜 My Nine Years of Go

2020 01 09 〜 What to do to become an Engineering Manager before you are an Engineering Manager

2020 01 01 〜 2019 Year in Review

you may also be interested in some of the greatest hits of

〜 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 ⬆