Close Menu
    Subscribe
    Updated:

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

    By 8 Mins Read

    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 2022.

    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.

    HTTPS for Local Development on React, Angular, and Node

    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

    Summary

    Securing your applications is crucial with several cyber threats like DDOS, XSS, and more. However, with each framework and technology, you use for local development, the security measures can differ with each framework and technology, you use for local development.
    Using HTTPS for local development ensures higher security across frameworks. However, these platforms have different requirements for installing SSL certificates and establishing HTTPS protocol.
    Here, we have discussed some of the top ways to install SSL certificates on your Node, React, and Angular apps. However, choosing one depends on what OS, technology, and framework you use.

    Jaxon Blaze is a recognized expert in sim racing with over 7 years of hands-on experience across platforms like iRacing, Assetto Corsa, and rFactor 2. As a competitive eSports racer and hardware reviewer, Jaxon combines technical precision with real-world insight to deliver trustworthy content on racing rigs, game mechanics, and driving strategy. His expertise is backed by hundreds of published articles and hands-on testing of sim racing wheels, pedals, and cockpit builds. Trusted by both beginners and pro racers, Jaxon’s goal is to help readers improve lap times and build the perfect virtual setup.

    Related Posts