Remix Framework — Setup HTTPS (SSL) on Localhost With Express Server

Step by step procedure to set up your apps

Let’s get started with creating a fresh Remix app.

npx create-remix@latest

Remix will ask you the name of your project, app type, and deployment type (server).

Choose Express Server from the options.

Creating self-signed certificate

Firstly if you don’t have a self-signed key and cert please create them first.

Install openssl in your OS.

For macOS:

brew install openssl

For Debian and Ubuntu:

sudo apt install openssl

For CentOS and Fedora:

sudo yum install openssl

Now create key and cert:

openssl req -newkey rsa:4096 \
            -x509 \
            -sha256 \
            -days 3650 \
            -nodes \
            -out localhost.crt \
            -keyout localhost.key

Also, you should add your cert to trusted certificates:

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain ./localhost.crt

Let’s add HTTPS to our server

Your app now should contain a file named server.js. Open the file and start to edit it.

Just import the createServer and readFileSync from the native https and fs module of Node.js.

Create an https object that contains the key and cert. Then just use createServer to create a Node Server and pass the https object as the first argument and the Express app as the second argument.

That’s it, just go to https://127.0.0.1:3000 and you’ll have a self-signed SSL in your localhost.