HTTPS and WWW redirects using Nuxt.js

So today I am going to show you how to redirect all variants of your domain to https://www.domain.com

With variants I mean these:

All of those should end up at https://www.domain.com

I am going to show how you do this with hosting at Heroku and domains at Namecheap.

The first thing you need to do is getting your SSL certificates. In Heroku they will do this automatically for each domain you have ACM (Automatic Certification Management) enabled. And you must at least be in a Hobby dyno for this to work. Sorry, but this won't be available if your are in a free dyno.

You do need to add both www and non www domains, as I did below.

When that is in order (usually instantly) you will need to point your domain to these by using CNAME, see below.

Note that the @-sign as host means the root domain (https://domain.com).

With this in order we are ready to implement the redirects. Because for now, all domain variants will work, but they won't all redirect and end up at your desired variant.

Setting up the redirects

While researching this topic I tried many different methods with messing in DNS settings at Namecheap. But none of those methods managed to fix all domain variant. So I ended up with writing a middleware in Nuxt.js to fix them all. It is actually quite easy.

First we need to create the middleware, which will be a basic js file I called redirect.js. Save this in the root folder of your project.


export  default  function  (req,  res,  next)  {

const  url  = req.url

const  env  = process.env.NODE_ENV

const  forceDomain  =  'https://www.robertpalmer.pw/'

  

if (

(req.headers['x-forwarded-proto'] !==  'https'  ||

host ==  'robertpalmer.pw') &&

env ===  'production'

) {

res.writeHead(301,  { Location: forceDomain + url })

return res.end()

}


  

return  next()

}

What this file does it to check if you are using http instead of https, if you are it will redirect to the https://www.domain.com variant. It will also check if you are using the https://domain.com variant and do the same redirect. In addition I added a production check to only enable this in the production environment.

Instead of using


req.headers['x-forwarded-proto'] !==  'https'

You could do:


 !req.secure
 

That is supposed to work as well, but never did for me. Not sure why.

Now we need to load this middleware, and we do that by adding it to nuxt.config.js in the export default.


serverMiddleware: ['~/redirect']
 

If you target set to static, you will also need to change that to server. If not Nuxt.js will never use the middleware.


target:  'server',
 

And if you do that, you will also need to change how Heroku will build your Nuxt.js app.

In your package.json under scrips, change the "heroko-postbuild" to "npm run build".


"scripts":  {
"dev":  "nuxt",
"build":  "nuxt build",
"start":  "nuxt start",
"generate":  "nuxt generate",
"heroku-postbuild":  "npm run build"
}, 
 

That's it! Now it all should work after your next deplopy to Heroku.