<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: humanfriend22</title>
    <description>The latest articles on DEV Community by humanfriend22 (@humanfriend22).</description>
    <link>https://dev.to/humanfriend22</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F707731%2Fde2cd7c7-f4b4-4f37-b2a5-4173aea69f7f.jpeg</url>
      <title>DEV Community: humanfriend22</title>
      <link>https://dev.to/humanfriend22</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/humanfriend22"/>
    <language>en</language>
    <item>
      <title>Load JSON into env in NodeJS</title>
      <dc:creator>humanfriend22</dc:creator>
      <pubDate>Mon, 07 Nov 2022 03:12:22 +0000</pubDate>
      <link>https://dev.to/humanfriend22/load-json-into-env-in-nodejs-4ahi</link>
      <guid>https://dev.to/humanfriend22/load-json-into-env-in-nodejs-4ahi</guid>
      <description>&lt;p&gt;Almost all of us have heard of &lt;a href="https://www.npmjs.com/package/dotenv"&gt;dotenv&lt;/a&gt;, which loads key-value pairs from &lt;code&gt;.env&lt;/code&gt; into &lt;code&gt;process.env&lt;/code&gt; so it is globally accessible. &lt;/p&gt;

&lt;p&gt;But what if we don't want to install another package to perform a similar task? We can keep it as a one-liner to load a JSON file into &lt;code&gt;process.env&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;NodeJS has a built-in function called &lt;code&gt;Object.assign&lt;/code&gt; which merges one object to another object. In our case, object 1 would process.env &amp;amp; object 2 would be our parsed JSON. We would then want to set &lt;code&gt;process.env&lt;/code&gt; to our updated object.&lt;/p&gt;

&lt;p&gt;EDIT: &lt;code&gt;Object.assign&lt;/code&gt; automatically adds the values to the first object and doesn't create a new object (like &lt;code&gt;Object.create&lt;/code&gt;) so we don't need the &lt;code&gt;process.env =&lt;/code&gt; before the rest of the assignment.&lt;/p&gt;

&lt;p&gt;Let's do exactly that:&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


</description>
    </item>
    <item>
      <title>console.log</title>
      <dc:creator>humanfriend22</dc:creator>
      <pubDate>Tue, 29 Mar 2022 23:35:53 +0000</pubDate>
      <link>https://dev.to/humanfriend22/consolelog-4f4e</link>
      <guid>https://dev.to/humanfriend22/consolelog-4f4e</guid>
      <description>&lt;p&gt;&lt;del&gt;This post is in response to &lt;a href="https://javascript.plainenglish.io/its-2022-don-t-use-the-console-log-ff2c2482a997"&gt;this article&lt;/a&gt;&lt;/del&gt;&lt;/p&gt;

&lt;p&gt;Instead of the code in the article, I suggest using this one because it allows multiple arguments:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;This was more of a tip than a post which is why there is no explanation. Hope this helped!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Custom Parser for "pipe" Streams in NodeJS</title>
      <dc:creator>humanfriend22</dc:creator>
      <pubDate>Sun, 27 Feb 2022 05:48:22 +0000</pubDate>
      <link>https://dev.to/humanfriend22/custom-parser-for-pipe-streams-in-nodejs-2f85</link>
      <guid>https://dev.to/humanfriend22/custom-parser-for-pipe-streams-in-nodejs-2f85</guid>
      <description>&lt;p&gt;This article will show a efficient way to modify data &lt;em&gt;while&lt;/em&gt; its being piped, say to a client in &lt;a href="https://expressjs.com/"&gt;Express&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Let's get started.&lt;/p&gt;

&lt;p&gt;Take a normal &lt;a href="https://nodejs.org"&gt;NodeJS&lt;/a&gt; server:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;fs&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createReadStream&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/index.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;8080&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, we are using the &lt;code&gt;fs.createReadStream&lt;/code&gt; function to pipe data without storing much in memory (RAM). This is completly fine. It's better than &lt;code&gt;fs.readFile&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Problem:&lt;/strong&gt; If we want to dynamically make small edits to &lt;code&gt;index.html&lt;/code&gt; based of say, the HTTP headers, this cute syntax doesn't have that functionality. Now, for anyone that has worked around &lt;code&gt;streams&lt;/code&gt; in &lt;a href="https://nodejs.org/"&gt;NodeJS&lt;/a&gt;, they know that the &lt;code&gt;.pipe&lt;/code&gt;s can be chained. One method that is not to different to the original code, we can use custom streams from the in-built &lt;code&gt;stream&lt;/code&gt; module, and an awesome module called &lt;code&gt;new-line&lt;/code&gt; from &lt;a href="https://npmjs.com/package/new-line"&gt;NPM&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This module only passes chunks of data to the next &lt;code&gt;pipe&lt;/code&gt; only line by line. This means that it waits until it finds a &lt;code&gt;new-line&lt;/code&gt;: &lt;code&gt;\n&lt;/code&gt;. For example, if we have to replace "hello" with "world", we may get "he" in one chunk and "llo" in the next. This results in our function completely skipping the "hello".&lt;/p&gt;

&lt;p&gt;Let's implement it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newLineStream&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;new-line&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createReadStream&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/index.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newLineStream&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, the client gets data line by line. We're one step closer!&lt;/p&gt;

&lt;p&gt;Time for the lengthy part. Lets implement our custom parser with the &lt;code&gt;Transform&lt;/code&gt; class from the &lt;code&gt;stream&lt;/code&gt; module.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newLineStream&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;new-line&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Transform&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;stream&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;MyParser&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Transform&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;constructer&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;_transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chunk&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;encoding&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
         &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;chunk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;world&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createReadStream&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/index.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newLineStream&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;MyParser&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Lets break this down:&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;class&lt;/code&gt;, &lt;code&gt;constructer&lt;/code&gt;, and &lt;code&gt;super&lt;/code&gt; just make a copy of the &lt;code&gt;Transform&lt;/code&gt; class and load all the &lt;code&gt;Transform&lt;/code&gt; functions. &lt;/p&gt;

&lt;p&gt;The &lt;code&gt;this._transform&lt;/code&gt; is declaring &lt;code&gt;_transform&lt;/code&gt; for our class because that's what &lt;code&gt;.pipe&lt;/code&gt; uses for &lt;code&gt;_transform&lt;/code&gt;ing the data.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;chunk&lt;/code&gt; parameter is the chunk of data that is of encoding specified by the &lt;code&gt;encoding&lt;/code&gt; parameter. The &lt;code&gt;cb&lt;/code&gt; parameter is a callback function. I pass &lt;code&gt;null&lt;/code&gt; meaning that there is no error and the modified chunk data.&lt;/p&gt;

&lt;p&gt;We can use this principle with chained &lt;code&gt;.replace&lt;/code&gt;s and using the &lt;code&gt;g&lt;/code&gt; flag with &lt;code&gt;RegExp&lt;/code&gt; to manipulate data while keeping up our performance. After all, IO is the strong set of NodeJS.&lt;/p&gt;

&lt;p&gt;That's it for this article. I hope this helped someone. I can be contacted at &lt;a href="mailto:humanfriend22@gmail.com"&gt;humanfriend22@gmail.com&lt;/a&gt;. Check out my &lt;a href="https://github.com/humanfriend22/"&gt;github&lt;/a&gt; profile.&lt;/p&gt;

</description>
      <category>node</category>
      <category>javascript</category>
      <category>efficency</category>
      <category>programming</category>
    </item>
    <item>
      <title>Custom SSL Certificates for Your Dev Environment</title>
      <dc:creator>humanfriend22</dc:creator>
      <pubDate>Fri, 18 Feb 2022 03:55:58 +0000</pubDate>
      <link>https://dev.to/humanfriend22/custom-ssl-certificates-for-your-dev-environment-3684</link>
      <guid>https://dev.to/humanfriend22/custom-ssl-certificates-for-your-dev-environment-3684</guid>
      <description>&lt;p&gt;This article will explain how to setup a SSL certificate for all your HTTPS development needs. &lt;/p&gt;

&lt;p&gt;Note: This is for development environments ONLY!&lt;/p&gt;

&lt;p&gt;We will explore how to setup a certificate, tell our computer to trust it, how to use it in a basic NodeJS server, and how to delete the certificate from our trust store after we are done.&lt;/p&gt;

&lt;h1&gt;
  
  
  Step 1 (Installation)
&lt;/h1&gt;

&lt;p&gt;We will be using a tool called &lt;a href="https://github.com/FiloSottile/mkcert"&gt;mkcert&lt;/a&gt;:&lt;/p&gt;

&lt;h3&gt;
  
  
  Windows:
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Via &lt;a href="https://chocolatey.org/"&gt;Chocolatey&lt;/a&gt;:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;choco install mkcert
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Via &lt;a href="https://scoop.sh/"&gt;Scoop&lt;/a&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;scoop bucket add extras
scoop install mkcert
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  MacOS:
&lt;/h3&gt;

&lt;p&gt;Via &lt;a href="https://brew.sh/"&gt;Brew&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;brew install mkcert
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and (Firefox)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;brew install nss
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Other installation methods for macOS and Linux are on the mkcert github &lt;a href="https://github.com/FiloSottile/mkcert"&gt;repo&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Step 2 (Create the certificate)
&lt;/h1&gt;

&lt;p&gt;The following command will create 2 files depending on your input&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkcert %your-domain-here%
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace %your-domain-here% with the domain you would like to secure for your computer. As we are going to be using this for development, I shall use localhost as such:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkcert localhost
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For my command, the following 2 files were created:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wXbAP2ZY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mtpd3jwc937v5agjudc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wXbAP2ZY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mtpd3jwc937v5agjudc.jpg" alt="files for localhost" width="370" height="61"&gt;&lt;/a&gt;&lt;br&gt;
That's it! Its as simple as that for creating the certificate.&lt;/p&gt;
&lt;h1&gt;
  
  
  Step 3 (Trusting the certificate)
&lt;/h1&gt;

&lt;p&gt;Time to tell our computer that our certificate is alright to trust!&lt;/p&gt;

&lt;p&gt;In the same directory as both of your files, run the following command regardless of your domain:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkcert -install
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;On Windows, &lt;a href="https://github.com/FiloSottile/mkcert"&gt;mkcert&lt;/a&gt; will kindly warn us of the danger:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6x6QRz7A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r85wmwe7dhiiu6mmrknv.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6x6QRz7A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r85wmwe7dhiiu6mmrknv.jpg" alt="Windows warning" width="512" height="525"&gt;&lt;/a&gt;&lt;br&gt;
The redacted information will be specific to your computer.&lt;/p&gt;

&lt;p&gt;Done! Now our computer has no problem whatsoever with our certificate.&lt;/p&gt;
&lt;h1&gt;
  
  
  Step 4 (Using it!)
&lt;/h1&gt;

&lt;p&gt;The following implementation is in &lt;a href="https://nodejs.org/"&gt;NodeJS&lt;/a&gt; and uses the &lt;a href="https://expressjs.com/"&gt;Express&lt;/a&gt; framework.&lt;/p&gt;

&lt;p&gt;The following code will sum up exactly what we need:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;https&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;fs&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;path&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;certificate&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;readFileSync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./localhost-key.pem&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)),&lt;/span&gt;
    &lt;span class="na"&gt;cert&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;readFileSync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./localhost.pem&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Am I secure?&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;https&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createServer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;certificate&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;443&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;HTTPS server is UP! https://localhost/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run this server:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node server.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We are officially using &lt;br&gt;
HTTPS in a development environment!&lt;/p&gt;

&lt;p&gt;You should be able to go to &lt;a href="https://localhost"&gt;localhost&lt;/a&gt; and see that beautiful lock.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--g4gE0E1U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgi75ory9h0ef1ffsuqc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--g4gE0E1U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgi75ory9h0ef1ffsuqc.jpg" alt="HTTPS Secure Lock" width="412" height="262"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After every development session, I highly suggest you tell the computer to not trust the certificate just in case the certificate is accidently pushed to Git or the project is abandoned because we do not want to leave random certificates trusted.&lt;/p&gt;

&lt;p&gt;The command to remove the certificate from the trust store is as below regardless of your domain:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkcert -uninstall
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;NOTE: I had to restart my browser for the certificate to not be trusted&lt;/p&gt;

&lt;p&gt;Well, that's it for SSL certificates for development. This is my first &lt;a href="https://dev.to/"&gt;dev.to&lt;/a&gt; article so I hope this helped someone. I can be contacted at &lt;a href="mailto:humanfriend22@gmail.com"&gt;humanfriend22@gmail.com&lt;/a&gt;. Check out my &lt;a href="https://github.com/humanfriend22"&gt;github profile&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Bye! ✌&lt;/p&gt;

</description>
      <category>https</category>
      <category>ssl</category>
      <category>security</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
