How to Create a Self-Signed SSL Certificate with mkcert - Secure Local Development : A Step-by-Step Guide

Welcome to our guide on setting up a secure development environment using mkcert – a simple and powerful tool for managing local SSL certificates. If you've ever faced the hassle of configuring self-signed certificates or dealing with browser security warnings during development, mkcert is here to make your life easier.

In this step-by-step tutorial, we’ll walk you through the process of installing mkcert on your Ubuntu system, generating SSL certificates for your local projects, and seamlessly integrating them into your Apache server and React/Laravel applications.

Why Local SSL Matters:

Developing applications with secure connections is crucial for mimicking real-world production environments. SSL certificates ensure encrypted data transmission, providing a more accurate representation of how your application will behave in the wild.

What You’ll Learn:

1. Install mkcert on Ubuntu
2. Generate SSL certificates for your local projects
3. Configure Apache to use SSL for local development
4. Set up React/Laravel applications to work seamlessly with SSL

Follow along with each step, and you’ll be able to enjoy a secure and hassle-free local development experience. Let’s dive in!

To install mkcert on Ubuntu, you can use the following steps:

1. Download mkcert: Open your terminal and run the following commands to download the mkcert binary:

wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64

This command downloads the mkcert binary for Linux. Replace the version number with the latest release if needed. You can check the releases on the official GitHub page.

2. Rename the Binary: Rename the downloaded binary to mkcert:

mv mkcert-v1.4.3-linux-amd64 mkcert

Adjust the version number accordingly.

3. Move to a Directory in Your $PATH: Move the mkcert binary to a directory listed in your $PATH. A common choice is /usr/local/bin:

sudo mv mkcert /usr/local/bin/

This step requires administrative privileges, so you may need to enter your password.

4. Make mkcert Executable: Ensure that mkcert is executable by running:

sudo chmod +x /usr/local/bin/mkcert

5. (Optional) Install nsswitch.conf : If you're using Mozilla Firefox or other applications that rely on the NSS library, you may also want to install nsswitch.conf:

sudo apt-get install libnss3-tools

This step is optional and depends on your use case.

6. Initialize mkcert: Run the following command to set up mkcert:

mkcert -install

You can also run my script, to do step 1–6 :

https://github.com/ShaonMajumder/ssl-make/blob/master/mkcert-install.sh

7. Go to your project directory and make certificates

cd /var/www/html/your-project
mkdir certificates
cd certificates


mkcert -cert-file server.crt -key-file private.key localhost 192.168.0.88

Replace with your IP. After the process. you will have server public key server.crt and server private key private.key.

8. Point your ssl files and backend in your server config. Here , we are using apache.

nano /etc/apache2/sites-enabled/your-project.conf

9. Now add the config

<VirtualHost *:443>
 ServerName localhost
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/your-project/backend/public

    SSLEngine on
 SSLUseStapling off
    SSLCertificateFile /var/www/html/your-project/certificates/server.crt
    SSLCertificateKeyFile /var/www/html/your-project/certificates/private.key

 ServerAlias 192.168.0.88

    <Directory "/var/www/html/your-project/backend/public">
  Options All
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

After that, save with Ctrl+x and press y + enter.

10. Enable the config.

sudo a2ensite your-project.conf

11. Restart the server:

sudo systemctl restart apache2

12. Update and point to your backend in frontend .env :

REACT_APP_NAME = 'your-project'
REACT_APP_VERSION = v1.1.0
GENERATE_SOURCEMAP = false

REACT_APP_API_BASE_URL='https://192.168.0.88/api'
REACT_APP_ASSET_BASE_URL='https://192.168.0.88/storage'
REACT_APP_MAIN_DOMAIN='192.168.0.88:3000'
REACT_APP_API_DOMAIN='https://192.168.0.88'
REACT_APP_BACK_DOMAIN = 'https://192.168.0.88'

REACT_APP_SITE_KEY = 'your-key'

13. Now point your certificates file and run the react application:

cd /var/www/html/your-project/frontend;
HTTPS=true SSL_CRT_FILE=../certificates/server.crt SSL_KEY_FILE=../certificates/private.key HOST=192.168.0.88 PORT=3000 yarn start-linux

Replace with your IP.

14. If you have any permission issue in laravel backend.

cd /var/www/html/your-project/backend
sudo chmod -R 775 storage
sudo chown -R www-data:www-data storage

Result :