Blog

Deploy Nuxt.js spa with Caddy

This tutoriel will show you how to deploy your nuxt app with multiple pages.

I’ll start this tutoriel by guessing you already have a nuxt.js app with mode: ‘spa’ in your nuxt.config.js .

If not, check https://nuxtjs.org/guide/installation to learn how to create a nuxt js application.

1. Generate the application for production by running

# This will run nuxt build
$ npm run build
or
$ yarn run build

2. You’ll now have a dist/ directory build

Let’s check inside

$ ls -l dist
total 32
-rw-r--r--   1 albttx  staff  2833 Sep 13 12:47 200.html
-rw-r--r--   1 albttx  staff   435 Sep 13 12:47 README.md
drwxr-xr-x  11 albttx  staff   352 Sep 13 12:47 _nuxt
-rw-r--r--   1 albttx  staff  1150 Sep 13 12:47 favicon.ico
-rw-r--r--   1 albttx  staff  2833 Sep 13 12:47 index.html

All the magic happen in the _nuxt directory.

using a simple tool like http-server on the dist directory will work, but if you have pages, going to localhost:8080/foo/bar will failed with 404 (not found) and page This localhost page can’t be found .

3. The solution !

Caddy ! This webserver is just awesome.

Check here todownload caddy

Create a file Caddyfile and use your favorite editor to write inside:

localhost:8080 {
    log stdout
    root ./dist
    gzip
    rewrite {
        if {path} not /
        if {path} not_starts_with /_nuxt
        to /
    }
}

Then simply run caddy

When you’ll go the the page localhost:8080/foo/bar caddy will redirect you to localhost:8080/foo/bar and nuxt spa will redirect you correctly.

BONUS: Caddy handle SSL really easily !