In today’s web development, using HTTPS for local environments is no longer a luxury but a necessity. Whether you’re testing secure API calls, ensuring browser compatibility, or preparing for production, HTTPS is a must. However, setting up secure local development often seems complex—this is where mkcert comes to the rescue.

In this guide, we’ll explore how to create self-signed certificates for local development using mkcert. We’ll also provide a real-world example by setting up HTTPS in an Angular 18 application.

What Is mkcert and Why Should You Use It?

mkcert is a simple tool that makes creating locally trusted SSL certificates effortless. Unlike self-signed certificates that often lead to browser warnings, mkcert generates certificates trusted by your system.

Why Use mkcert?

• Avoid annoying browser warnings for "untrusted certificates."
• Test secure API connections (e.g., testing fetch or Axios requests).
• Simulate production-like environments in local development.

To get started, check out the official mkcert GitHub Repository for installation instructions and further documentation.  

How to Install and Use mkcert?

Let’s dive into setting up mkcert. We'll then integrate it into an Angular 16 project to create a seamless HTTPS environment.

Step 1: Install mkcert

1.Install mkcert on Your System:

Windows:

Download from mkcert GitHub Releases. Place mkcert.exe in a folder included in your PATH (e.g., C:\Windows\System32)..

macOS: Use Homebrew:

brew install mkcert

Linux: Follow the instructions on mkcert's official GitHub page.

2.Install CA (Certificate Authority) Locally:

Run the following command in your terminal:  

mkcert -install

Step 2: Generate Certificates

Generate SSL certificates for your domain and IP addresses. For example:

mkcert myapp.local localhost 127.0.0.1

This creates two files:

• myapp.local.pem (certificate)
• myapp.local-key.pem (key file)

Step 3: Configure Hosts File

Map the custom domain to localhost:

  Open the hosts file as Administrator:

Windows:

notepad C:\Windows\System32\drivers\etc\hosts

macOS/Linux:

sudo nano /etc/hosts

Add the following entry:

127.0.0.1 myapp.local

Real-World Example: Setting Up HTTPS in Angular 18

Now, let’s integrate the generated certificates into an Angular 16 project.

Step 1: Create an Angular Project

If you don’t have an Angular 16 project already, create one:

ng new my-secure-app --strict --routing --style css
cd my-secure-app

Step 2: Configure angular.json

Update the serve options in angular.json to include the SSL certificate and key paths:

"options": {
  "ssl": true,
  "sslKey": "path/to/myapp.local-key.pem",
  "sslCert": "path/to/myapp.local.pem",
  "host": "myapp.local",
  "port": 443
}

Replace "path/to/" with the actual paths where mkcert saved your certificate files.

Step 3: Serve the Application

Run the Angular application with HTTPS enabled:

ng serve --ssl --port 443 --host myapp.local

  Open your browser and visit:https://myapp.local

Real-Time Example Use Case: Testing a Secure API Call

Suppose you’re developing a weather app that fetches data from a secure API like https://api.openweathermap.org. Without HTTPS, your browser might block these requests due to mixed content security policies.

Here’s how to test the API in your Angular app:

Add a new component:

ng generate component weather

Update the weather.component.ts file:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-weather',
  template: `
    
Weather Data
    
{{ weatherData | json }}
  `
})
export class WeatherComponent implements OnInit {
  weatherData: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http
      .get('https://api.openweathermap.org/data/2.5/weather?q=London&appid=your_api_key')
      .subscribe((data) => {
        this.weatherData = data;
      });
  }
}

Test the API in your HTTPS-enabled local environment. The secure connection ensures smooth communication with the API.

Conclusion

Using mkcert, you can create self-signed certificates that are trusted by your system, ensuring a production-like development experience. By setting up HTTPS for your Angular 16 app, you’ve not only improved security but also ensured compatibility with modern APIs and browsers.

Start using mkcert in your projects today, and take your local development to the next level!