Skip to main content

Create self signed SSL certificate

Create a self-signed SSL certificate for React JS, before starting to explore, I want to add a little bit about this

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.

it will done in a few steps

there are lots of ways to create a Self-signed certificate but I am using here mkcert

you can visit this URL 

https://chocolatey.org/install#individual

and download the steps to install Chocolatey, if you don't want to visit it just need to follow the steps for Windows

1. Open the PowerShell in administrator mode and execute the below 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'))


once you execute it, it will download the Chocolatey, and also create the environment in your window machine

to verify, you can simply check the environmental variable from your compute property

you can also verify from the install location by opening

C:\ProgramData\chocolatey

once you verify, need to execute some other commands, in the Powershell

2. choco install mkcert

you can also ensure the mkcert is installed or not by checking the same location.

once you verify just run the 

3. mkcert -version

to check which version was installed.

now the next step is to execute

4. mkcert -install

this command installed the mkcert environment on your machine

now we are in the final step, you have to open your Visual Studio Code, solution inside the root folder of your react app, and execute the below commands

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

these commands create key and certificate files in your local machine, here I am using localhost for my local development environment, you can replace it if you are using any specific domain for development




now we are very close.

the last step is to open your package.json file and add the path on the start command example

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




These commands told the system to start in https mode.

now you only need to run this

6. npm start

Thanks for referring to the article, please tell me if it is helpful to you.


Comments

Popular posts from this blog

Interview Questions of SPFx SharePoint

What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development, it is easy to integrate with SharePoint data, and extend Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready. Scenario Based asking Scenario 1: Scenario: Your team is developing a SharePoint Framework (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 1: How would you approach implementing this functionality in an SPFx web

Interview Question of Advanced SharePoint SPFx

1. What is WebPack? A module bundling system built on top of Node. js framework is known as a WebPack. It is capable to handle the combination and minification of JavaScript and CSS files, also other files such as images by using plugins. WebPack is the recommended way of bundling the files in JS framework and .Net frameworks. In the SPFx it is used with React Js. 2. What is PowerShell.? PowerShell is a platform introduced by Microsoft to perform cross-platform task automation and configuration management framework, it is made up of a command-line shell, a scripting language. it can be run on Windows, Linux, and macOS. 3. What is bundling and Minification? The terms bundling and minification are the processes of code compressing, which is used to improve the load and request time, It is used in modern JavaScript frameworks and .Net frameworks. It improves the load time by reducing the number of requests to the s

Top20 - SharePoint Framework (SPFx) Interview Questions

1.  Which tool we can use to generate a SharePoint Framework (SPFx) solution? Developers can use  Yeoman to generate SharePoint Framework (SPFx) solution, it is a client-side scaffolding open-source tool to help in web-based development. 2. How developer can ensure that the solution deployed was immediately available to all site collections in SPFx?  To ensure the availability of the deployed solution on all the site collections developer has to configure  skipFeatureDeployment: true  in package-solution.json {     "solution" : {       "name" : "theultimateresources-deployment-client-side-solution" ,       "id" : "as3feca4-4j89-47f1-a0e2-78de8890e5hy" ,       "version" : "2.0.0.0" ,       "skipFeatureDeployment" : true     },     "paths" : {       "zippedPackage" : "solution/theultimateresources-deploy-true.sppkg"     }  }