Guide to Use HTTPS for Local Development on React, Angular, Node

Cybersecurity is one of the most critical aspects of every digital transformation businesses undergo for a better user experience. Secure access to data, better compliance with information regulation standards, and system protection are crucial for every business.

However, most companies focus on macro-level protection by securing deployment environments. However, the security of the local development environment is critical.

 It ensures that your code integrity is intact and user’s data is not exposed to cyber-attacks. Significantly, securing data is crucial if the cost of cybercrime for businesses worldwide is increasing and is expected to reach $10.3 Billion by 2025.

HTTPS protocol is one way to ensure the local development environment is secure. It is a secure internet protocol you can establish using cryptographic encryptions.

So, here is a guide on how to use HTTPS to secure local development for your applications. Let’s first understand the significance of HTTPS.

Why Should You Use HTTPS for Local Development?

HTTPS (Hypertext Transfer Protocol Secure) communicates between web servers and clients. While most companies use it to secure their websites while users’ devices connect through browsers, it can also be used for the security oflocal development.

In local development, developers create code on their devices and merge it into the main codebase. Most cyberattacks happen when developers try to merge the code into the master codebase.

While developers create code on their local devices, attackers can leverage the system vulnerabilities to inject malicious code. So, when developers merge locally written code onto the master database, the system gets attacked.

Using HTTPS protocol, we can ensure that the local development process on each developer’s device is secure.

Apart from this, there are many other benefits of using HTTPS protocol for your applications,

• HTTPS encrypts the traffic between the server and the client, providing an extra layer of security for sensitive data. If you work with personally identifiable information (PII) or have an ecommerce website, HTTPS becomes crucial for data security.
• Modern browsers require HTTPS to access geolocation, camera, and microphone features. You can useHTTPS for local development and ensure the web application is compatible with browser requirements.
• HTTPS is the standard protocol used to secure communication over the internet. When you use it duringlocal development, you can more accurately simulate the production environments and ensure apps behave as expected.
•  Search engines prefer websites that use HTTPS protocol, which is crucial during thelocal development. It helps you secure the experiences across applications and boost SEO. 
• Using HTTPS for local development ensures that your application is up-to-date with modern web standards. It also helps you improve user trust, which can increase conversion rates.

How to Use HTTPS for Your Local Development?

You can use HTTPS protocol by installing a digital certificate like Secure Socket Layer (SSL). According to your requirements, there are different types of SSL certificates to choose from. For example, if you have several subdomains for your website, a wildcard SSL certificate helps secure all of them.

Similarly, if you have multiple domains, you can choose a multi-domain SSL certificate if you have multiple domains.

Once you choose the type of certificate you want to install, a certificate signing request or CSR needs to be submitted to the certificate authority(CA). SSL certificates use asymmetric encryptions, meaning there are two sets of security key pairs- public and private.

You need to attach a private key pair with the CSR, and after submission, CA will conduct a thorough vetting of details.

Once vetted, CA will issue the SSL certificate, which you can install and secure app development. However, using HTTPS for local developmentcan differ from platform to platform. Let’s understand how to use HTTPS in the Node.Js platform first.

Using HTTPS for Local Development on Node

You can use HTTPS for local development on Node.Js  by installing an SSL certificate from a leading Certificate Authority (CA). SSL certificates provide stronger security and avoid the need to install self-signed certificates on each device that will access the local server.

To use an SSL certificate from a leading CA on your local Node server, you can follow these steps:

• Install the Certbot or acme.sh tool on your system.
• Generate a CSR using the tool, provide the necessary information, such as your domain name, and contact information.
• Use the CSR to request an SSL certificate from a CAs.
• Install the SSL certificate on your local developmentserver.
• Update your Node HTTPS server code to use the SSL certificate.

It is worth noting that obtaining an SSL certificate from a leading CA requires a valid domain name. If you are developing locally and do not have a domain name, you can use a tool like nip.io or xip.io to create a temporary domain name that resolves to your local IP address.

How to Use HTTPS Automatically on Node?

Another way to use HTTPS for local development on Node is to use a tool like https-localhost or devcert. It helps automate the creation and installation process of an SSL certificate for you.

• “https-localhost” is a command line tool that creates a self-signed SSL certificate and installs it in the Node HTTPS server. It also generates a root certificate that can be installed on your device to trust the self-signed certificate.
• “devcert” automatically generates and installs an SSL certificate from a trusted CA. It can also automatically update your Node HTTPS server code to use the SSL certificate.

To use https-localhost, you can install it using npm:

npm install -g https-localhost.

Then, you can start your Node HTTPS server using the https-localhost command:

https-localhost myapp.js.

To use devcert, you can install it using npm:

npm install -g devcert.

Then, you can generate and install an SSL certificate using the devcert command:

devcert create localhost

This will generate a trusted SSL certificate for the localhost domain and install it in the Node HTTPS server.

Using HTTPS for Local Development on React

You can use HTTPS, SSL_CRT_FILE, and SSL_KEY_FILE environment variables to use a custom SSL certificate in React server. If you are using a Windows machine, change the start script with the following code.

Replace {CERT-PATH} and {KEY-PATH} to set the path of the local certificate file and private key. Now open the browser and type localhost.8000 to check whether HTTPS is active. Another way to install an SSL certificate on React app and establish HTTPS. Here is a step-by-step guide,

Step 1: Install the HTTPS Package

You can install the HTTPS package by using the following command:

npm install https.

It installs the package required to run React apps using HTTPS.

Step 2: Add HTTPS Configuration to package.json file

Open the package.json file to add the following line under the “scripts” section:

"start": "HTTPS=true react-scripts start"

It will ask React to use HTTPS when running the start command.

Step 3: Start Your React App

You can start your React app by running the following command:

npm start.

Step 4: Trust the SSL Certificate

When you start React app using HTTPS, your browser may not trust the SSL certificate by default. Therefore, you need to trust the certificate manually.

• Open your browser and type “https://localhost:3000.”
• Click on the “Advanced” button
• Next, click on “Proceed to localhost (unsafe)”.

It will add the SSL certificate to the browser’s trusted list.

Step 5: Verify HTTPS is Working

You can verify whether React application is running over HTTPS by navigating to the “Network” tab in the developer’s console. Here, you can see all the data requests made over the HTTPS protocol.

Using HTTPS for Local Development on Angular

You can use OpenSSL to install an SSL certificate on an Angular application. It is a cryptographic library that you can use to secure communication between heterogeneous networks. Here is a systematic guide to using HTTPS for local development on Angular:

Step 1: Install OpenSSL

Install OpenSSL on your local machine through an installer based on the OS you use.

Step 2: Generate a Self-signed SSL Certificate

Open your terminal to run the following command:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

It will generate a self-signed SSL certificate with a key and a certificate file.

Step 3: Move the Generated Files to Your Angular Directory

Move the cert. pem and key.pem files to your Angular project directory. For example, if your Angular project is in the directory ~/your-project, move the files to ~/your-project/cert.pem and ~/your-project/key.pem.

Step 4: Update the Angular Configuration

Open the angular.json file to update the server configuration to include:

"options": { 
  "sslKey": "key.pem",
  "sslCert": "cert.pem"
}

It configures the Angular application to use the SSL certificate you generated earlier.

Step 5: Start Your Angular Application with HTTPS

To start your Angular application with HTTPS, run the following command:

ng serve --ssl true --sslKey key.pem --sslCert cert.pem