Skip to main content

Create self signed SSL certificate

How to Create a Self-Signed SSL Certificate for React JS Using mkcert

How to Create a Self-Signed SSL Certificate for React JS Using mkcert

A self-signed certificate is a digital certificate that is created and signed by the same entity it identifies. Unlike certificates issued by trusted Certificate Authorities (CAs), self-signed certificates aren't verified by external parties. They're commonly used for local development, testing, or internal systems where the identity verification provided by a CA is not necessary. Although self-signed certificates can secure communication, they lack the third-party validation provided by CA-signed certificates, and users may encounter browser warnings when accessing websites using self-signed certificates.

In this guide, we’ll walk you through the steps to create a self-signed SSL certificate for your React JS application using mkcert.

Step 1: Install Chocolatey

Chocolatey is a package manager for Windows that simplifies the installation of tools like mkcert. To install Chocolatey, follow these steps:

  1. Open PowerShell in Administrator mode.
  2. Execute the following script:
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

This script will download and install Chocolatey on your machine.

Note: To verify the installation, check the installation location at C:\ProgramData\chocolatey.

Step 2: Install mkcert

Once Chocolatey is installed, you can use it to install mkcert. Run the following command in PowerShell:

choco install mkcert

To verify the installation, check the installed version of mkcert by running:

mkcert -version

Step 3: Set Up mkcert

After installing mkcert, you need to set it up on your machine. Run the following command:

mkcert -install

This command installs the mkcert environment and makes it ready to generate certificates.

Step 4: Generate SSL Certificate for Localhost

Now, navigate to the root folder of your React JS application in Visual Studio Code or any terminal. Run the following command to generate the SSL certificate:

mkcert -key-file localhost-key.pem -cert-file localhost.pem localhost

This command creates two files:

  • localhost-key.pem (private key)
  • localhost.pem (certificate)

These files will be used to enable HTTPS for your local development environment.

Step 5: Configure React App to Use HTTPS

To enable HTTPS in your React app, open the package.json file and modify the start script as follows:

"start": "set HTTPS=true&&set SSL_CRT_FILE=./localhost.pem&&set SSL_KEY_FILE=./localhost-key.pem&&react-scripts start"

This configuration tells your React app to start in HTTPS mode using the generated certificate and key files.

Step 6: Run Your React App

Finally, start your React app by running:

npm start

Your app will now run on HTTPS, and you can access it securely at https://localhost:3000.

Why Use Self-Signed Certificates for Local Development?

Self-signed certificates are ideal for local development because:

  • They allow you to test HTTPS features without purchasing a certificate.
  • They are easy to generate and configure.
  • They provide a secure connection for testing APIs and authentication flows.

However, remember that self-signed certificates are not suitable for production environments. For production, always use certificates issued by trusted Certificate Authorities (CAs).

Conclusion

Creating a self-signed SSL certificate for your React JS application is a straightforward process with mkcert. By following the steps above, you can enable HTTPS for local development and ensure secure communication during testing.

If you found this guide helpful, please share it with others and leave a comment below. Happy coding!

Comments

Popular posts from this blog

Power Apps modern driven app Interview Question and answer

Power Apps Modern Driven App: Questions and Answers Power Apps Modern Driven App: Questions and Answers Power Apps modern driven apps are low-code/no-code platforms that enable users to create custom applications. Below are some common questions and detailed answers to help you understand their capabilities and applications. Question 1: What is a Power Apps modern driven app? Answer: A Power Apps modern driven app is a low-code/no-code application development platform provided by Microsoft. It allows users to create custom applications that can run on various devices and platforms without extensive coding. These apps are built using a visual interface and can integrate with different data sources. Question 2: What are the key components of a Power Apps modern driven app? Answer: The key components of a Power Apps modern driven app are: Screens: Serve as the user interface for the app, including layouts, ...

SPFX Interview question for 2023

SPFx Interview Questions for 2023 SPFx Interview Questions for 2023 Author: Vishal Thakur Question 1: What is SharePoint Framework (SPFx)? Answer: SharePoint Framework (SPFx) is a development model introduced by Microsoft for creating client-side web parts and extensions for SharePoint Online and SharePoint 2019. It is based on modern web technologies like JavaScript, TypeScript, and React, providing a rich and responsive user experience. Question 2: What are the key advantages of using SPFx for SharePoint development? Answer: SPFx offers several advantages, such as: Responsive and mobile-ready web parts and extensions. Seamless integration with SharePoint data and services. Support for modern web development practices and tools. Easy deployment and hosting options. Enhanced security and isolation through the SharePoint app model. Question 3: Can you explain ...

Interview Questions of SPFx SharePoint

SPFx Interview Questions and Scenarios SPFx Interview Questions and Scenarios By Vishal Thakur What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development. It integrates seamlessly with SharePoint data and extends Microsoft Teams. SPFx allows developers to use modern web technologies and tools in their preferred development environment to build responsive and mobile-ready experiences. Scenario-Based Questions Scenario 1: External API Integration Scenario: Your team is developing an SPFx web part that needs to retrieve data from an external API and display it on a SharePoint site. The API requires authentication using OAuth 2.0. The web part should also allow users to refresh the data manually. Question: How woul...