Redirect HTTP traffic to HTTPS in Gatsby

Question

I would like to redirect HTTP traffic to HTTPS as this is a Lighthouse requirement for PWAs. My site is built with Gatsby.

I found various plugins like the ones below which seem to imply that the answer comes from modifying the .htaccess file.

https://www.gatsbyjs.org/packages/gatsby-plugin-htaccess/

For the plugin above, I tried the following configuration, which didn't pass the PWA audit:

{
      resolve: 'gatsby-plugin-htaccess',
      options: {
        RewriteBase: '/custom/',
        https: true,
        www: true,
        SymLinksIfOwnerMatch: true,
        host: 'av-site.com',
        redirect: [
          'RewriteRule ^not-existing-url/?$ /existing-url [R=301,L,NE]',
          {
            from: 'http:av-site.com',
            to: 'https:av-site.com',
          },
        ],
      },
    },

Can anyone please help me? Thanks!

Answer 1

Make sure in gatsby-config.js the siteURL is https

module.exports = {
  siteMetadata: {
    title: `example`,
    description: ``,
    author: `me`,
    siteUrl: `https://example.com`
  },