Enable HTTPS in Django Localhost

Hi, I will show you how to enable https for localhost development in this blog post.

First, we need to create the certificates. We can use OpenSSL for this. Create and change into a new directory, and create the certificates that we’ll use:

mkdir ~/certs
cd ~/certs
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

You will be prompted to enter some information for the certificate. Since this is for local development, the values you entered aren’t crucial.

For browsers to trust your self-signed certificate, you need to add it to your system’s list of trusted certificates. This process varies by operating system and will be beyond the scope of this blog post, but you can search for instructions specific to your OS, I didn’t need it in Ubuntu.

For the SSL step, you need to add these settings to the end of the settings.py in your Django project:

SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True

And then we need to configure Django’s development server to use the SSL certificate. First, we need to install several packages:

pip install werkzeug
pip install django-extensions
pip install pyOpenSSL

After that, to INSTALLED_APPS, we need to add django_extensions like that:

INSTALLED_APPS = [
    ...
    'django_extensions',
]

Now, we can run Django’s development server with this configuration to use an SSL certificate:

python manage.py runserver_plus --cert-file ~/certs/cert.pem --key-file ~/certs/key.pem 8000

You can entirely pass the generating a certificate manually and use an auto-created certificate generated by Werkzeug. You only need to run the development server with this configuration if you want to proceed with this option:

python manage.py runserver_plus --key-file selftest-key --cert-file selftest-cert localhost:8000

As a side note, if you’re using Pycharm and if you try to edit the running configuration to utilise runserver_plus, it won’t work, because Werkzeug has it’s debugger inside. So you can only run the development server in only “Run” configuration with this option in Pycharm.

In case you’re using React

If you’re developing applications with React and Django, you can use the same certificates for both sides. I already described the instructions for Django, now let’s look at how can we run React in https mode.

The only thing I needed to do was to create a new script for running the configuration. Inside packages.json, add a new line `start-https`:

  "scripts": {
    "start-https": "HTTPS=true SSL_CRT_FILE=~/certs/cert.pem SSL_KEY_FILE=~/certs/key.pem react-scripts start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

and then you can start to develop in an https environment running this script:

npm start-https

Resources:
Https during development