How to enable webpack devServer https?

Get Help and Help Others
1

I’ve added the following code to web\config\webpack.config.js but failed to turn on https on devServer. I’m following this RedwoodJS documentation and Webpack documentation.

  if (env === 'development') {
    // Add dev plugin
    config.module.rules.push({
      devServer: {
        https: true,
      },
    })
  }

  return config
}

The reason I wanted to turn on https is because I wanted to test access devServer from my phone and Auth0 requires to use https.

1 Like
2

Wanted to add some background on this issue as I chatted with @andrewlamyw on Discord about this topic.

  1. Auth0 does allow you to set http and localhost (and possible ip addresses) thought it does recommend https in:
  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Origins
  • Allowed Origins (CORS)

as in http://localhost:8910

  1. Also, I suggested the use of ngrok to port forward over https (and configure in Auth0 the url given)

  2. Suggested use of netlify dev --live as in netlify.toml that will launch the dev server and then use live

[dev]
  command = "yarn rw dev"
  targetPort = 8910
  port = 8888
  framework = "#custom"
  1. Or just deploy to Netlify as a deploy preview – you can even just password protect it using basic auth access control (independent of Auth0) – and test from phone there. Note not on all plans.

I personally use ngrok with a custom domain to port forward and tunnel most often.

1 Like
3

Thanks for adding the context, :pray:

Method number 1 doesn’t work on mobile phone as I can’t access the server by entering http://localhost:8910 into the URL in my phone to access the local server, I have to use http://local-server-ip-address:8910/ to access, which immediately I receive error from Auth0 mentioning https is required.

I’m using method number 2 now, but due to my slow internet connection and also my location (Malysia) to the ngrok server (US) which adds delays into every minor update performed during my local development.

Method 3 will pull the production environment in Netlify into local development environment, which is not suitable for development.

Method number 4 which deploy to Netlify as a deploy preview takes too long to deploy every minor changes (e.g. how a change of a button looks on my mobile phone).

Hence I’m enquiring how to enable https in webpack devServer or is it possible to do so? Because I see webpack documentation stating webpack is supporting https for devServer, and there is a section of Webpack Configuration in redwood documentation. So I’m curios which part of my config is done wrong for setting up https on devServer…

4

If you simply want a mobile responsive preview, have you considered just to use Chrome dev tools and set the view to be responsive and the screen dimensions to be your mobile device?

5

I use this app called Responsively - it’s open source and free to use. It’s a browser designed for responsive development. It’s great for developing your app against many different screen sizes. Using chome dev tools also works well enough.

Unless you are using the onboard hardware, there are very few reasons to actually test on a device

1 Like
6

This is great! Thanks for letting me know about this!

7

There’s also https://sizzy.co/ 50% lifetime discount today.

1 Like