Skip to content

Instantly share code, notes, and snippets.

@Psvensso
Created February 6, 2020 09:53
Show Gist options
  • Save Psvensso/d8f71cc64bf9af88ffa9f7d3abcb9d0f to your computer and use it in GitHub Desktop.
Save Psvensso/d8f71cc64bf9af88ffa9f7d3abcb9d0f to your computer and use it in GitHub Desktop.
Create self signed cert for webpack dev server

SSL

The app uses SSL to work properly on mobile also on development. Webpack creates a .pem certificates but this is unstrusted in windows and you get the prompt on every resfresh.

One way to create a self signed certificate and force webpack to use locally created .pem cert and key.

  1. Install "mkcert" https://github.com/FiloSottile/mkcert#windows (if needed install via Chocolatey)

  2. Create a local folder somewhere outside the project, on the desktop for example

  3. Generate certificate https://github.com/FiloSottile/mkcert#mkcert (use your domain names instead of example.com as they are showing in their readme)

  4. Rename the files to server.pem and key.pem

  5. Copy the files to /ClientApp/node_modules/webpack-dev-server/ssl/

  6. Edit /ClientApp/node_modules/webpack-dev-server/lib/Server.js

Line 650: var options2 = {
          key: fs.readFileSync(path.join(__dirname, '../ssl/key.pem'), 'utf8'),
          cert: fs.readFileSync(path.join(__dirname, '../ssl/server.pem'), 'utf8')
        };
this.listeningApp = https.createServer(options2, app);

This can be done via configuration but CreateReactApp doesen't let us do it. So untill they expose the options we can use this hack locally. There ary many other hack to configure create react app but this just shows a quick workaround. You can oslo do this on the own webpack-dev-server of course. You can use any filename and path you want as long as you provide the correct path in the config object shown above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment