{"componentChunkName":"component---src-pages-author-author-yaml-id-js","path":"/author/hridayesh-sharma/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"8e68c6e7-ed5d-572e-85a0-732fe793dd49","html":"<h3 id=\"introduction\" style=\"position:relative;\"><a href=\"#introduction\" aria-label=\"introduction permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Introduction</h3>\n<p>In this blog, I will show you how to create a NodeJS server using <a href=\"https://nodejs.org/api/http.html\">core http</a> module.  We will create a simple server that will serve static assets and a simple API to return some JSON data. </p>\n<p>In the process, you will also learn about the request and response objects provided by NodeJS, which are used by every other framework built on top of NodeJS like ExpressJS etc. </p>\n<h3 id=\"prerequisites\" style=\"position:relative;\"><a href=\"#prerequisites\" aria-label=\"prerequisites permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Prerequisites</h3>\n<ol>\n<li>NodeJS installed on your system. Download from <a href=\"https://nodejs.org/en/download/\">Here</a></li>\n<li>A basic understanding of JavaScript</li>\n</ol>\n<p>With that in mind, let's begin.</p>\n<h3 id=\"step-1-initialize-the-project\" style=\"position:relative;\"><a href=\"#step-1-initialize-the-project\" aria-label=\"step 1 initialize the project permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 1: Initialize the project</h3>\n<ul>\n<li>\n<p>Create a folder by any name and initialize a node project in it using <code>npm init -y</code></p>\n<ul>\n<li>By this time, you will have a <code>package.json</code> file in your directory.</li>\n</ul>\n</li>\n<li>Create a file called <code>server.js</code> in your directory.</li>\n</ul>\n<h3 id=\"step-2-add-some-static-content\" style=\"position:relative;\"><a href=\"#step-2-add-some-static-content\" aria-label=\"step 2 add some static content permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 2: Add some static content</h3>\n<ul>\n<li>Create a directory called <code>public</code> at the root of your project.</li>\n<li>\n<p>Add a file named <code>index.html</code> with the following content\n<code>index.html</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!</span><span class=\"mtk12\">DOCTYPE</span><span class=\"mtk1\"> </span><span class=\"mtk12\">html</span><span class=\"mtk1\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">html</span><span class=\"mtk1\"> </span><span class=\"mtk12\">lang</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;en&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">meta</span><span class=\"mtk1\"> </span><span class=\"mtk12\">charset</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;UTF-8&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">meta</span><span class=\"mtk1\"> </span><span class=\"mtk12\">name</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;viewport&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">content</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;width=device-width, initial-scale=1.0&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Demo</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">h1</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Coming from the Root </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">h1</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">html</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<h3 id=\"step-3-add-our-server-code-to-serve-the-static-assets\" style=\"position:relative;\"><a href=\"#step-3-add-our-server-code-to-serve-the-static-assets\" aria-label=\"step 3 add our server code to serve the static assets permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 3: Add our server code to serve the static assets</h3>\n</li>\n</ul>\n<p>Now we will create a node server that will serve our <code>index.html</code> file when a request is sent to <code>/</code>.</p>\n<p><code>server.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">http</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;http&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">path</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;path&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">fs</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;fs&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">PORT</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">3000</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">hostname</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;localhost&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// createServer is the http method used to create a web server that takes a callback.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">server</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">http</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createServer</span><span class=\"mtk1\">(</span><span class=\"mtk12\">serverHandler</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// callback function definition</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">serverHandler</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">) =&gt; {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">method</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&#39;GET&#39;</span><span class=\"mtk1\"> && </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">url</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&#39;/&#39;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">filePath</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">path</span><span class=\"mtk1\">.</span><span class=\"mtk11\">resolve</span><span class=\"mtk1\">(</span><span class=\"mtk12\">__dirname</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;public/index.html&#39;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">fileExists</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">fs</span><span class=\"mtk1\">.</span><span class=\"mtk11\">existsSync</span><span class=\"mtk1\">(</span><span class=\"mtk12\">filePath</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (!</span><span class=\"mtk12\">fileExists</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk12\">statusCode</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">404</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setHeader</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;Content-Type&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;text/html&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">end</span><span class=\"mtk1\">(</span><span class=\"mtk8\">`</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">          &lt;html&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">            &lt;body&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">              &lt;h3&gt;Page not found&lt;/h3&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">            &lt;/body&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">          &lt;/html&gt;`</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk12\">statusCode</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">200</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setHeader</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;Content-Type&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;text/html&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">fs</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createReadStream</span><span class=\"mtk1\">(</span><span class=\"mtk12\">filePath</span><span class=\"mtk1\">).</span><span class=\"mtk11\">pipe</span><span class=\"mtk1\">(</span><span class=\"mtk12\">res</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">server</span><span class=\"mtk1\">.</span><span class=\"mtk11\">listen</span><span class=\"mtk1\">(</span><span class=\"mtk12\">PORT</span><span class=\"mtk1\">, </span><span class=\"mtk12\">hostname</span><span class=\"mtk1\">, () </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk8\">`Server running at </span><span class=\"mtk4\">${</span><span class=\"mtk12\">hostname</span><span class=\"mtk4\">}</span><span class=\"mtk8\">:</span><span class=\"mtk4\">${</span><span class=\"mtk12\">PORT</span><span class=\"mtk4\">}</span><span class=\"mtk8\">`</span><span class=\"mtk1\">);   </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  })</span></span></code></pre>\n<p>Let's understand what just happened in the above code snippet:</p>\n<ul>\n<li>First of all, we just created a server using the <code>createServer</code> method provided by node <code>http</code> module. <code>createServer</code> takes a callback which will be called when there is an incoming request with <code>req</code> and <code>res</code> parameters.</li>\n<li>In our callback function <code>serverHandler</code>, we have used an <code>if</code> block to check if the incoming request is a <code>GET</code> request and the request <code>url</code> is <code>/</code> then code inside if statement will be executed.</li>\n<li>Then, we check if the <code>index.html</code> which we want to serve exists or not in our public directory using <code>existsSync</code>, which synchronously checks for the file at the given path and returns true if the file exists.</li>\n<li>Then if the file does not exist, we return a 404 status with an HTML response with a Content-Type header to let the browser know that it's an HTML type response.</li>\n<li>If the file exists, we create a readable stream from it using <code>createReadStream</code> method from <code>fs</code> module and pipe it into <code>res</code> object which sends it to the browser.</li>\n<li>Finally, we use <code>server.listen</code> to start our server on the PORT 3000.</li>\n</ul>\n<p>Now it's time to test our server. Run <code>node server.js</code> at the root of the project, and you will see the server running on PORT 3000.\nOpen your browser and enter <code>localhost:3000</code> in the address bar, and you will get the HTML response. </p>\n<h3 id=\"step-4-add-a-basic-api-to-return-some-json-data\" style=\"position:relative;\"><a href=\"#step-4-add-a-basic-api-to-return-some-json-data\" aria-label=\"step 4 add a basic api to return some json data permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 4: Add a basic API to return some JSON data</h3>\n<p>Now we will expand our callback, which we passed to <code>createServer</code> to handle one more <code>GET</code> request at <code>/notes</code>, which will return an array of notes to the browser.</p>\n<p>Update the <code>serverHandler</code> function with the following code snippet in your <code>server.js</code> file</p>\n<p><code>server.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">  ...</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">serverHandler</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">, </span><span class=\"mtk12\">res</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">if</span><span class=\"mtk1\">(</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">method</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&#39;GET&#39;</span><span class=\"mtk1\"> && </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">url</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&#39;/&#39;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">filePath</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">path</span><span class=\"mtk1\">.</span><span class=\"mtk11\">resolve</span><span class=\"mtk1\">(</span><span class=\"mtk12\">__dirname</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;public/index.html&#39;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">fileExists</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">fs</span><span class=\"mtk1\">.</span><span class=\"mtk11\">existsSync</span><span class=\"mtk1\">(</span><span class=\"mtk12\">filePath</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (!</span><span class=\"mtk12\">fileExists</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk12\">statusCode</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">404</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setHeader</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;Content-Type&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;text/html&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">end</span><span class=\"mtk1\">(</span><span class=\"mtk8\">`</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">            &lt;html&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">              &lt;body&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">                &lt;h3&gt;Page not found&lt;/h3&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">              &lt;/body&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">            &lt;/html&gt;`</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk12\">statusCode</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">200</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setHeader</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;Content-Type&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;text/html&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">fs</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createReadStream</span><span class=\"mtk1\">(</span><span class=\"mtk12\">filePath</span><span class=\"mtk1\">).</span><span class=\"mtk11\">pipe</span><span class=\"mtk1\">(</span><span class=\"mtk12\">res</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// Newly added code </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">method</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&#39;GET&#39;</span><span class=\"mtk1\"> && </span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">url</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&quot;/notes&quot;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">notes</span><span class=\"mtk1\"> = [</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk12\">id:</span><span class=\"mtk1\"> </span><span class=\"mtk7\">1</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk12\">title:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Demo Note&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk12\">id:</span><span class=\"mtk1\"> </span><span class=\"mtk7\">2</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk12\">title:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Another Note&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        ]</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk12\">statusCode</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">200</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setHeader</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;Content-Type&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;application/json&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">end</span><span class=\"mtk1\">(</span><span class=\"mtk10\">JSON</span><span class=\"mtk1\">.</span><span class=\"mtk11\">stringify</span><span class=\"mtk1\">(</span><span class=\"mtk12\">notes</span><span class=\"mtk1\">));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setHeader</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;Content-Type&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;application/json&#39;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">res</span><span class=\"mtk1\">.</span><span class=\"mtk11\">end</span><span class=\"mtk1\">(</span><span class=\"mtk10\">JSON</span><span class=\"mtk1\">.</span><span class=\"mtk11\">stringify</span><span class=\"mtk1\">({</span><span class=\"mtk12\">message:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">`</span><span class=\"mtk4\">${</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">method</span><span class=\"mtk4\">}</span><span class=\"mtk8\"> is not supported for </span><span class=\"mtk4\">${</span><span class=\"mtk12\">req</span><span class=\"mtk1\">.</span><span class=\"mtk12\">url</span><span class=\"mtk4\">}</span><span class=\"mtk8\">`</span><span class=\"mtk1\">}))</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      } </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  ...</span></span></code></pre>\n<ul>\n<li>Here, we have added one more <code>if</code> statement to handle the request coming at <code>/notes</code> .</li>\n<li>We return a notes array in the JSON format, and we are setting the Content-Type header to be of <code>application/json</code> for the browser to process it accordingly.</li>\n<li>We have also added an else statement to handle all other requests where we simply return a message to the browser that the request is not supported.</li>\n</ul>\n<p>With that, we have created a simple node server to serve static content as well a simple API to return JSON data. </p>\n<h3 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h3>\n<p>We saw how we had to handle each request with its method and the URL. With an increasing number of routes, such things become hard to manage as we will have to add multiple if statements. And that's why frameworks like ExpressJS, HapiJS exist, which makes creating servers in NodeJS very easy. But it's important to know what happens under the hood as there is no magic happening in those frameworks.</p>\n<p>The complete code for this blog can be found at <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/NodeJs/NodeHTTPServer\">Github Repo</a>.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n</style>","frontmatter":{"title":"NodeJS Server using Core HTTP Module","author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null},"date":"November 27, 2020","updated_date":null,"tags":["NodeJs","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/8d8c41d9ba7fce1f1b5c6d72e0982463/58556/coverImage.webp","srcSet":"/static/8d8c41d9ba7fce1f1b5c6d72e0982463/61e93/coverImage.webp 200w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/1f5c5/coverImage.webp 400w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/58556/coverImage.webp 800w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/99238/coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Hridayesh Sharma","slug":"/engineering/node-http-module-server/"}}},{"node":{"id":"b6a8ce3e-1926-5347-9eca-401383cd7d81","html":"<h2 id=\"loginradius-open-source-projects\" style=\"position:relative;\"><a href=\"#loginradius-open-source-projects\" aria-label=\"loginradius open source projects permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>LoginRadius Open Source Projects</h2>\n<p>Just 1 week left in hacktoberfest 2020 and being part of it, we at LoginRadius are all set with lots of our projects going open source this year.</p>\n<blockquote>\n<p>To get LoginRadius swags see our <a href=\"/loginradius-supports-hacktoberfest-2020/\">Hacktoberfest Launch Blog</a>. We have around <strong>500</strong> swags for our open source contributors.</p>\n</blockquote>\n<p><strong>Here is a list of our open source projects available on Github for hacktoberfest 2020</strong></p>\n<p><img src=\"/02fcd3f81a4a4130403e1ae6713b83f8/lr-open-source.webp\" alt=\"loginradius-hacktoberfest\"></p>\n<ul>\n<li>\n<p><a href=\"https://github.com/LoginRadius/engineering-portal\">LoginRadius Engineering Portal</a></p>\n<ul>\n<li>Our Engineering Blog where you can contribute by writing a guest blog of fixing any issue you find with any of the available blogs.</li>\n</ul>\n</li>\n<li>\n<p><a href=\"https://github.com/LoginRadius/docs\">LoginRadius Docs</a></p>\n<ul>\n<li>LoginRadius Developer Documentation</li>\n</ul>\n</li>\n<li>\n<p><a href=\"https://github.com/LoginRadius/egnature\">Egnature</a></p>\n<ul>\n<li>An another email signature generator</li>\n</ul>\n</li>\n<li>\n<p>Cascade</p>\n<ul>\n<li>Create your internal developers' portal using Cascade.</li>\n</ul>\n</li>\n<li>\n<p><a href=\"https://github.com/LoginRadius/csharp-password-hash\">C# Password Hash Library</a></p>\n<ul>\n<li>.NET standard library to secure the passwords using multiple hashing algorithms.</li>\n</ul>\n</li>\n<li>\n<p><a href=\"https://github.com/LoginRadius/go-saml\">Go-SAML</a></p>\n<ul>\n<li>High-Level API Implementation of SAML 2.0 (Currently Supported Identity Provider Implementation) Single Sign-On</li>\n</ul>\n</li>\n<li>\n<p><a href=\"https://github.com/LoginRadius/ps-softlist\">PS-Softlist</a></p>\n<ul>\n<li>A power shell script to detect non-whitelisted installed software on Windows machines.</li>\n</ul>\n</li>\n</ul>\n<blockquote>\n<p>Check the open issues on each of the projects as well as Pull Request before creating a new one. Happy Coding!\nStay tuned for more updates from LoginRadius and don't forget to check our Hacktoberfest Page to get around <strong>500 swags</strong> from LoginRadius.</p>\n</blockquote>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"title":"LoginRadius Open Source For Hacktoberfest 2020","author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null},"date":"September 25, 2020","updated_date":null,"tags":["hacktoberfest","open-source","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5873015873015872,"src":"/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp","srcSet":"/static/9a2056972f92077b2af8b32ecc2fcbdd/61e93/hacktober-fest-banner.webp 200w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/1f5c5/hacktober-fest-banner.webp 400w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp 800w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/e30b5/hacktober-fest-banner.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Hridayesh Sharma","slug":"/engineering/loginradius-opensource-repos-for-hacktoberfest-2020/"}}},{"node":{"id":"10f69e88-7a32-500a-a160-d143cba1f47b","html":"<h2 id=\"have-you-ever-thought-about-what-the-world-would-be-like-if-open-source-didnt-exist\" style=\"position:relative;\"><a href=\"#have-you-ever-thought-about-what-the-world-would-be-like-if-open-source-didnt-exist\" aria-label=\"have you ever thought about what the world would be like if open source didnt exist permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Have you ever thought about what the world would be like if open-source didn't exist?</h2>\n<p>It's hard to imagine a world without open source these days. Open source powers the biggest organizations of today's world. Open-source software like <a href=\"https://en.wikipedia.org/wiki/Linux\">Linux</a> runs most of today's servers and also powers the <a href=\"https://en.wikipedia.org/wiki/Android_(operating_system)\">Android Operating System</a>.</p>\n<h2 id=\"introducing-hacktoberfest-2020\" style=\"position:relative;\"><a href=\"#introducing-hacktoberfest-2020\" aria-label=\"introducing hacktoberfest 2020 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Introducing Hacktoberfest 2020</h2>\n<h4 id=\"in-a-gist-hacktoberfest-is-a-festival-of-giving-back-to-the-community\" style=\"position:relative;\"><a href=\"#in-a-gist-hacktoberfest-is-a-festival-of-giving-back-to-the-community\" aria-label=\"in a gist hacktoberfest is a festival of giving back to the community permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>In a gist hacktoberfest is a festival of \"giving back to the community\".</h4>\n<p>Hacktoberfest is a month-long celebration of open-source software in October month run by DigitalOcean in partnership with GitHub and DEV. Hacktoberfest is open to everyone in our global community!</p>\n<p><strong>From Official Website:</strong></p>\n<blockquote>\n<p>Hacktoberfest is open to everyone in our global community. Whether you’re new to development, a student, long-time contributor, event host, or company of any size, you can help drive the growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.</p>\n</blockquote>\n<p>The purpose of this month-long celebration is to get people started in open source and give back to the open-source community.</p>\n<p>It is the easiest way to get into open source for people who have never contributed to open-source community or find it difficult to contribute.</p>\n<h3 id=\"how-to-contribute-to-hacktoberfest\" style=\"position:relative;\"><a href=\"#how-to-contribute-to-hacktoberfest\" aria-label=\"how to contribute to hacktoberfest permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How to contribute to Hacktoberfest?</h3>\n<p>Anyone can contribute to hacktoberfest by registering at <a href=\"https://hacktoberfest.digitalocean.com/\">hacktoberfest website</a> anytime between 1st October to 31st October.</p>\n<p>During this time, anyone who wishes to be part of this month-long fest needs to open four quality pull requests on any of the open-source projects on Github.</p>\n<h3 id=\"how-to-find-projects\" style=\"position:relative;\"><a href=\"#how-to-find-projects\" aria-label=\"how to find projects permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How to find Projects?</h3>\n<p>Finding projects can be a bit challenging. It can be the tools you are already using, or different tools can be used to find the issues based on various labels. Tools like <a href=\"http://issuehub.io/\">issuehub</a> are really helpful for the same.</p>\n<p>This year <a href=\"https://www.loginradius.com/\">LoginRadius</a> is going to be part of Hacktoberfest by open-sourcing a lot of its projects and accepting contributions on them including its <a href=\"https://www.loginradius.com/blog/engineering/\">Engineering Blog</a>.</p>\n<h3 id=\"getting-loginradius-branded-swags\" style=\"position:relative;\"><a href=\"#getting-loginradius-branded-swags\" aria-label=\"getting loginradius branded swags permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Getting LoginRadius branded swags</h3>\n<p>Like I said, this year <strong>LoginRadius</strong> will be part of hacktoberfest and yes, we are here with some <strong>cool swags.</strong> We have got around <strong>500 t-shirts</strong> for people contributing to our open source repositories. We will soon share details on how to get LoginRadius swags as well as our open source repositories on our <a href=\"https://www.loginradius.com/blog/async\">Blog</a>.</p>\n<p>Stay tuned and <strong>don’t forget to mention your open-source projects for us to contribute.</strong></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"title":"LoginRadius Supports Hacktoberfest 2020","author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null},"date":"September 18, 2020","updated_date":null,"tags":["hacktoberfest","open-source","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5873015873015872,"src":"/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp","srcSet":"/static/9a2056972f92077b2af8b32ecc2fcbdd/61e93/hacktober-fest-banner.webp 200w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/1f5c5/hacktober-fest-banner.webp 400w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/58556/hacktober-fest-banner.webp 800w,\n/static/9a2056972f92077b2af8b32ecc2fcbdd/e30b5/hacktober-fest-banner.webp 1000w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Hridayesh Sharma","slug":"/engineering/loginradius-supports-hacktoberfest-2020/"}}},{"node":{"id":"62fbde41-4351-55bd-b987-f04716189d87","html":"<p>In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be performed at the same time by applications. It is helpful to consider the importance of web staff as an example of how humans benefit from parallel tasks.</p>\n<p>Web workers give us the ability to write multi-threaded Javascript that doesn't block the DOM. To some extent, even asynchronous operations block the DOM. On the other hand, Web employees help us solve this problem, escape from the single-threaded world, and achieve higher <a href=\"https://www.loginradius.com/blog/engineering/16-javascript-hacks-for-optimization/\">performance on our web pages</a>.</p>\n<h2 id=\"what-are-web-workers-in-js\" style=\"position:relative;\"><a href=\"#what-are-web-workers-in-js\" aria-label=\"what are web workers in js permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What are web workers in JS?</h2>\n<p>Web Workers are a simple means of running scripts in background threads for web content. Without interfering with the user interface, the worker thread may perform tasks.</p>\n<p>Furthermore, they can use XMLHttpRequest to perform I/O (although the responseXML and channel attributes are always null) or fetch (with no such restrictions). Once created, by posting messages to an event handler defined by that code, a worker can send messages to the JavaScript code that made it (and vice versa).</p>\n<h2 id=\"why-use-javascript-web-workers\" style=\"position:relative;\"><a href=\"#why-use-javascript-web-workers\" aria-label=\"why use javascript web workers permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why Use JavaScript Web Workers?</h2>\n<p>Web workers let you build background threads separate from the main execution thread, where the logic of the user interface is usually executed. </p>\n<p>The key benefit of this separation of workload is that inside an isolated thread and without interrupting or impacting the main thread's responsiveness and usability, you can perform costly operations.</p>\n<p>When the background thread completes its mission, the main thread is informed of the results seamlessly via an event handled by standard <a href=\"https://www.loginradius.com/blog/engineering/understanding-event-loop/\">JavaScript event handling</a>.</p>\n<h2 id=\"setting-up-web-workers--multi-threading-to-javascript\" style=\"position:relative;\"><a href=\"#setting-up-web-workers--multi-threading-to-javascript\" aria-label=\"setting up web workers  multi threading to javascript permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Setting Up Web Workers &#x26; Multi-threading to JavaScript</h2>\n<h3 id=\"step-1-create-a-project-folder-and-add-indexhtml-in-the-root-of-it\" style=\"position:relative;\"><a href=\"#step-1-create-a-project-folder-and-add-indexhtml-in-the-root-of-it\" aria-label=\"step 1 create a project folder and add indexhtml in the root of it permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 1: Create a project folder and add index.html in the root of it.</h3>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!</span><span class=\"mtk12\">DOCTYPE</span><span class=\"mtk1\"> </span><span class=\"mtk12\">html</span><span class=\"mtk1\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">html</span><span class=\"mtk1\"> </span><span class=\"mtk12\">lang</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;en&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">meta</span><span class=\"mtk1\"> </span><span class=\"mtk12\">charset</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;UTF-8&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">meta</span><span class=\"mtk1\"> </span><span class=\"mtk12\">name</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;viewport&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">content</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;width=device-width, initial-scale=1.0&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Club JavaScripters</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Can you click me?</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">h2</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Let&#39;s do the party. 👯‍♂️‍</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">h2</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">ul</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;club&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">ul</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">script</span><span class=\"mtk1\"> </span><span class=\"mtk12\">src</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;./main.js&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">script</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">html</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>We just created a simple HTML page with a link to our javascript file which we will create in a moment.</p>\n<h3 id=\"step-2-lets-add-our-javascript-code-in-two-separate-files-mainjs-and-workerjs-in-the-same-folder\" style=\"position:relative;\"><a href=\"#step-2-lets-add-our-javascript-code-in-two-separate-files-mainjs-and-workerjs-in-the-same-folder\" aria-label=\"step 2 lets add our javascript code in two separate files mainjs and workerjs in the same folder permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 2: Let's add our JavaScript code in two separate files, <code>main.js</code> and <code>worker.js</code> in the same folder.</h3>\n<p><code>main.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">persons</span><span class=\"mtk1\"> = [</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hriday&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hridayesh&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">false</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Bob&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Daisy&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">]</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Our club container</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">club</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;club&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">worker</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">/**</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\"> * Function entry allows entry to people coming to our club</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\"> */</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">entry</span><span class=\"mtk1\">(</span><span class=\"mtk12\">persons</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">persons</span><span class=\"mtk1\">.</span><span class=\"mtk11\">forEach</span><span class=\"mtk1\">(</span><span class=\"mtk12\">person</span><span class=\"mtk1\"> </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">isMember</span><span class=\"mtk1\">, </span><span class=\"mtk12\">name</span><span class=\"mtk1\"> } = </span><span class=\"mtk12\">person</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">listItem</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createElement</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;li&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">listItem</span><span class=\"mtk1\">.</span><span class=\"mtk12\">textContent</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">name</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// if a person is not registered, register them first</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (!</span><span class=\"mtk12\">isMember</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// create a new worker thread</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">worker</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Worker</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;worker.js&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// pass data to worker thread</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">worker</span><span class=\"mtk1\">.</span><span class=\"mtk11\">postMessage</span><span class=\"mtk1\">(</span><span class=\"mtk12\">name</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// listen to any data passed from worker thread</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">worker</span><span class=\"mtk1\">.</span><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;message&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">event</span><span class=\"mtk1\"> </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">event</span><span class=\"mtk1\">.</span><span class=\"mtk12\">data</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">club</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">listItem</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      })</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk3\">// if they are registered let them in</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">club</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">listItem</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  })</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">entry</span><span class=\"mtk1\">(</span><span class=\"mtk12\">persons</span><span class=\"mtk1\">)</span></span></code></pre>\n<p><code>worker.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// addEventListener is directly accessible in worker file</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">addEventListener</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;message&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">event</span><span class=\"mtk1\"> </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// extract person passed from main thread from event object</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">person</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">event</span><span class=\"mtk1\">.</span><span class=\"mtk12\">data</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">registerMember</span><span class=\"mtk1\">(</span><span class=\"mtk12\">person</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">registerMember</span><span class=\"mtk1\">(</span><span class=\"mtk12\">member</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// generating membership card takes some amount of time</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">i</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">0</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">while</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">i</span><span class=\"mtk1\"> &lt; </span><span class=\"mtk10\">Math</span><span class=\"mtk1\">.</span><span class=\"mtk11\">pow</span><span class=\"mtk1\">(</span><span class=\"mtk7\">10</span><span class=\"mtk1\">, </span><span class=\"mtk7\">10</span><span class=\"mtk1\">)) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">i</span><span class=\"mtk1\">++</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// send result back to the main thread</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">postMessage</span><span class=\"mtk1\">(</span><span class=\"mtk4\">true</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">close</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"step-3-on-to-some-explanations-about-what-just-happened\" style=\"position:relative;\"><a href=\"#step-3-on-to-some-explanations-about-what-just-happened\" aria-label=\"step 3 on to some explanations about what just happened permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 3: On to some Explanations about what just happened.</h3>\n<p>Now, the problem I faced when I went to the club with Hriday was that I (and everyone else after me) had to wait for my registration process to complete. We don't want that to happen to our virtual club and therefore we added one more person (thread) who is in charge of the whole registration process. Once registration is done, he will tell the main guy(thread) to let the new person in.</p>\n<h3 id=\"heres-what-we-did-to-solve-it-in-our-code\" style=\"position:relative;\"><a href=\"#heres-what-we-did-to-solve-it-in-our-code\" aria-label=\"heres what we did to solve it in our code permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Here's what we did to solve it in our code.</h3>\n<ol>\n<li>First of all we check for each person if they are a member or not. If they are, we let them in.</li>\n<li>If someone is not a member of the club yet, we create a worker thread for it using <code>new Worker('path to worker code')</code> and pass that person to the worker thread using <code>worker.postMessage()</code> and add the person as a member after registering them.</li>\n<li>To simulate the registration process we are doing some processing using a long <code>while</code> loop. In real life this could be some cryptographic code, image processing or anything that is CPU intensive and might block the main thread and make the page unresponsive.</li>\n<li>Once registered, the worker thread let's the main thread know about it by sending data using <code>postMessage</code> and the main thread listens for it using <code>onmessage handler</code> and lets the person in the club i.e add to DOM.</li>\n<li>Once we get the result from the worker thread, we close it using <code>close()</code>.</li>\n</ol>\n<h2 id=\"web-workers-faqs\" style=\"position:relative;\"><a href=\"#web-workers-faqs\" aria-label=\"web workers faqs permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Web Workers FAQs</h2>\n<h3 id=\"how-do-the-main-thread-and-worker-threads-talk-to-each-other\" style=\"position:relative;\"><a href=\"#how-do-the-main-thread-and-worker-threads-talk-to-each-other\" aria-label=\"how do the main thread and worker threads talk to each other permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How do the main thread and worker threads talk to each other?</h3>\n<p>They talk to each other by message passing. Both workers and the main thread use <code>postMessage</code> to send data to each other and <code>onmessage</code> event handler to get data. The data is available inside the event's data property.\nYou can only pass one argument to <code>postMessage</code>. If you wish to pass multiple arguments use an <code>object</code> instead.</p>\n<h3 id=\"can-i-update-dom-in-a-worker-thread-or-access-window-object\" style=\"position:relative;\"><a href=\"#can-i-update-dom-in-a-worker-thread-or-access-window-object\" aria-label=\"can i update dom in a worker thread or access window object permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Can I update DOM in a worker thread or access window object?</h3>\n<p>No you can not update DOM in a worker thread as worker threads run in a separate context from the main window and don't have access to <code>window</code> object and <code>document</code> object but they do have access to some of the <code>window</code> object's capabilities like <code>Websockets</code> and <code>indexedDB</code>.</p>\n<h3 id=\"why-did-you-add-worker-code-in-a-separate-file\" style=\"position:relative;\"><a href=\"#why-did-you-add-worker-code-in-a-separate-file\" aria-label=\"why did you add worker code in a separate file permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why did you add worker code in a separate file?</h3>\n<p>It's important that the worker code must be in a separate file, which we can use to create a separate worker thread by using the <code>Worker</code> constructor and passing it the path of the file.</p>\n<h3 id=\"why-did-you-add-that-button-i-can-easily-click-it\" style=\"position:relative;\"><a href=\"#why-did-you-add-that-button-i-can-easily-click-it\" aria-label=\"why did you add that button i can easily click it permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why did you add that button? I can easily click it.</h3>\n<p>You were able to click that button because we did not block the main thread.\nTo see the difference add the following code to <code>main.js</code> and see the difference.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">persons</span><span class=\"mtk1\"> = [</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Joe&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hriday&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Hridayesh&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">false</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Bob&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">name:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;Daisy&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">isMember:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">]</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Our club container</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">club</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;club&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">worker</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">entry</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">persons</span><span class=\"mtk1\">.</span><span class=\"mtk11\">forEach</span><span class=\"mtk1\">(</span><span class=\"mtk12\">person</span><span class=\"mtk1\"> </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">isMember</span><span class=\"mtk1\">, </span><span class=\"mtk12\">name</span><span class=\"mtk1\"> } = </span><span class=\"mtk12\">person</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">listItem</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createElement</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;li&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">listItem</span><span class=\"mtk1\">.</span><span class=\"mtk12\">textContent</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">name</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (!</span><span class=\"mtk12\">isMember</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">memeberAdded</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">registerMember</span><span class=\"mtk1\">(</span><span class=\"mtk12\">person</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">memeberAdded</span><span class=\"mtk1\">) </span><span class=\"mtk12\">club</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">listItem</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">club</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">listItem</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  })</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">entry</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">registerMember</span><span class=\"mtk1\">(</span><span class=\"mtk12\">member</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">let</span><span class=\"mtk1\"> </span><span class=\"mtk12\">i</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">0</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">while</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">i</span><span class=\"mtk1\"> &lt; </span><span class=\"mtk10\">Math</span><span class=\"mtk1\">.</span><span class=\"mtk11\">pow</span><span class=\"mtk1\">(</span><span class=\"mtk7\">10</span><span class=\"mtk1\">, </span><span class=\"mtk7\">10</span><span class=\"mtk1\">)) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">i</span><span class=\"mtk1\">++</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">close</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"could-you-still-click-the-button\" style=\"position:relative;\"><a href=\"#could-you-still-click-the-button\" aria-label=\"could you still click the button permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Could you still click the button?</h3>\n<p>You can share that answer in the comment section 😉 To get the full code you can visit to <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/JavaScript/WebWorkers\">Github Repo</a></p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>We introduced web workers in this article, a technology that helps the web industry keep up with demanding web applications. This is achieved by providing web apps with a way to exploit multiprocessor and multi-threaded machines by granting JavaScript some multi-threaded superpowers.</p>\n<p>Do you have any tips on web workers and the web as a forum for programming? Let us know in the comment section below.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n</style>","frontmatter":{"title":"Web Workers: How to add multi-threading in JS","author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null},"date":"September 09, 2020","updated_date":null,"tags":["JavaScript","Web"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/2e0bb83a49cc5eb5b04a62c51cf495bb/58556/cover.webp","srcSet":"/static/2e0bb83a49cc5eb5b04a62c51cf495bb/61e93/cover.webp 200w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/1f5c5/cover.webp 400w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/58556/cover.webp 800w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/99238/cover.webp 1200w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/135cd/cover.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Hridayesh Sharma","slug":"/engineering/adding-multi-threading-to-javascript-using-web-workers/"}}},{"node":{"id":"318b721d-715f-5359-84fd-a36ffc2b699f","html":"<p>In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and babel.</p>\n<h4 id=\"this-blog-will-be-divided-into-two-parts\" style=\"position:relative;\"><a href=\"#this-blog-will-be-divided-into-two-parts\" aria-label=\"this blog will be divided into two parts permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>This blog will be divided into two parts:</h4>\n<ul>\n<li><strong>Part I</strong> will be about setting up the source code.</li>\n<li><strong>Part II</strong> will be about setting up the webpack and babel configuration and testing our library.</li>\n</ul>\n<p>Let's create the source code for our library. For that we will be create two utility functions into two separate files in our source folder.</p>\n<h4 id=\"step-1--create-a-directory-demo-and-run-following-command-in-it\" style=\"position:relative;\"><a href=\"#step-1--create-a-directory-demo-and-run-following-command-in-it\" aria-label=\"step 1  create a directory demo and run following command in it permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 1 : Create a directory <code>demo</code> and run following command in it.</h4>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">  $ npm init -y</span></span></code></pre>\n<p>The above command will create a <code>package.json</code> in your project root. I am using a --y to initialize it with default options.</p>\n<p>Directory Structure</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">demo</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  |-- src/</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  |-- package.json</span></span></code></pre>\n<h4 id=\"step-2-adding-our-source-code\" style=\"position:relative;\"><a href=\"#step-2-adding-our-source-code\" aria-label=\"step 2 adding our source code permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 2: Adding our source code.</h4>\n<p>Let's add our source code into <code>src</code> directory:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">src</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\"> |--index.js</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\"> |--capital.js</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\"> |--addDOMContent.js</span></span></code></pre>\n<p>Our utility library contains two functions <code>capital</code>, to capitalize a string and <code>addDOMContent</code>, to add content to a web page, each in it's own module.</p>\n<p><code>capital.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">capital</span><span class=\"mtk1\">(</span><span class=\"mtk12\">string</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">capitalizedString</span><span class=\"mtk1\"> =</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">string</span><span class=\"mtk1\">.</span><span class=\"mtk11\">substring</span><span class=\"mtk1\">(</span><span class=\"mtk7\">0</span><span class=\"mtk1\">, </span><span class=\"mtk7\">1</span><span class=\"mtk1\">).</span><span class=\"mtk11\">toUpperCase</span><span class=\"mtk1\">() + </span><span class=\"mtk12\">string</span><span class=\"mtk1\">.</span><span class=\"mtk11\">substring</span><span class=\"mtk1\">(</span><span class=\"mtk7\">1</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">capitalizedString</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">capital</span></span></code></pre>\n<p><code>addDOMContent.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">addDOMContent</span><span class=\"mtk1\">(</span><span class=\"mtk12\">content</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">node</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createElement</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;h1&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">node</span><span class=\"mtk1\">.</span><span class=\"mtk12\">innerText</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">content</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk12\">body</span><span class=\"mtk1\">.</span><span class=\"mtk11\">appendChild</span><span class=\"mtk1\">(</span><span class=\"mtk12\">node</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">addDOMContent</span></span></code></pre>\n<p>Inside our <code>index.js</code>, we will import these two functions.</p>\n<p><code>index.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">capital</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;./capital&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">addDOMContent</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;./addDOMContent&quot;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">capital</span><span class=\"mtk1\">, </span><span class=\"mtk12\">addDOMContent</span><span class=\"mtk1\"> }</span></span></code></pre>\n<p>So far we got the source code ready but we still need to bundle it so that the browsers can understand and oh boy!, we need to support some older browsers too 🙄. Anyway, being responsible developers we are going to do that 😎.</p>\n<h4 id=\"step-3-lets-install-some-of-our-project-dev-dependencies-as-they-are-only-needed-during-development\" style=\"position:relative;\"><a href=\"#step-3-lets-install-some-of-our-project-dev-dependencies-as-they-are-only-needed-during-development\" aria-label=\"step 3 lets install some of our project dev dependencies as they are only needed during development permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 3: Let's install some of our project dev dependencies as they are only needed during development.</h4>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\"> $ npm i --save-dev webpack webpack-cli @babel/core @babel/preset-env babel-loader</span></span></code></pre>\n<p>We need <code>webpack</code> to bundle our code and <code>webpack-cli</code> is a command-line tool that uses <code>webpack</code> to do the same. Also webpack requires <code>babel-loader</code> to transpile our ES6 code to ES5 before bundling (Remember, what I said about being responsible developers 😃).</p>\n<h4 id=\"step-4-now-lets-get-our-webpack-and-babel-configuration-in-place-we-are-almost-there\" style=\"position:relative;\"><a href=\"#step-4-now-lets-get-our-webpack-and-babel-configuration-in-place-we-are-almost-there\" aria-label=\"step 4 now lets get our webpack and babel configuration in place we are almost there permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 4: Now let's get our webpack and babel configuration in place. (We are almost there)</h4>\n<p>4.1. Create a <code>webpack.config.js</code> at the root of the project.</p>\n<p><code>webpack.config.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">path</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">require</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;path&quot;</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk10\">module</span><span class=\"mtk1\">.</span><span class=\"mtk10\">exports</span><span class=\"mtk1\"> = {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">entry:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">path</span><span class=\"mtk1\">.</span><span class=\"mtk11\">resolve</span><span class=\"mtk1\">(</span><span class=\"mtk12\">__dirname</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&quot;src/index.js&quot;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">output:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">path:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">path</span><span class=\"mtk1\">.</span><span class=\"mtk11\">resolve</span><span class=\"mtk1\">(</span><span class=\"mtk12\">__dirname</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&quot;dist&quot;</span><span class=\"mtk1\">),</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">filename:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;index_bundle.js&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">library:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;$&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">libraryTarget:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;umd&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">module:</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">rules:</span><span class=\"mtk1\"> [</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">test:</span><span class=\"mtk5\"> /</span><span class=\"mtk6\">\\.</span><span class=\"mtk8\">(</span><span class=\"mtk5\">js</span><span class=\"mtk8\">)</span><span class=\"mtk11\">$</span><span class=\"mtk5\">/</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">exclude:</span><span class=\"mtk5\"> /node_modules/</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">use:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;babel-loader&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    ],</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">mode:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;development&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>There are a couple of things we need to understand about webpack configuration. Stay with me for a couple more minutes.</p>\n<ul>\n<li><code>entry</code>: In order for webpack to know where to start with, it needs to know the entry point to our app.</li>\n<li><code>module.rules</code>: Each file in <code>Node</code> is treated like a module. Webpack itself understands only Javascript and JSON modules. Since we want to transpile ES6, we need <code>babel-loader</code> and webpack needs to know the rules on how to process the Javascript using the given loader.</li>\n<li><code>output</code>: After creating the bundle, webpack needs to know what name to give it and where to put it.<code>library</code> and <code>libraryTarget</code> are used to expose our library where <code>library</code> being the name,<code>$</code> here and <code>libraryTarget</code> is the property to configure, how the library will be exposed. Here we will be using UMD. UMD is a module system capable of working everywhere, be it in the client, on the server or elsewhere.</li>\n<li>\n<p>mode: Webpack bundles code into either development mode (unminified) or in production(minified) mode. I am using a hard coded value here for the demo. You can set it using environment variables too.</p>\n<p>4.2. Create a <code>.babelrc</code> file at the root of the project.</p>\n</li>\n</ul>\n<p><code>.babelrc</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"8\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  presets: [</span><span class=\"mtk8\">&quot;@babel/preset-env&quot;</span><span class=\"mtk1\">]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p><code>@babel/preset-env</code> let's us use the latest Javascript without any polyfills and syntax transforms.<code>babel-loader</code> uses <code>babel</code> under the hood.</p>\n<p>By Now our Project Structure should look like this:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"9\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">demo</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">|-- src</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">|   |-- index.js</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">|   |-- capital.js</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">|   |-- addDOMContent.js</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">|-- webpack.config.js</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">|-- .babelrc</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">|-- package.json</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">|-- node_modules</span></span></code></pre>\n<h4 id=\"step-5-one-last-step-i-know-i-keep-saying-that-but-i-promise-this-is-last-\" style=\"position:relative;\"><a href=\"#step-5-one-last-step-i-know-i-keep-saying-that-but-i-promise-this-is-last-\" aria-label=\"step 5 one last step i know i keep saying that but i promise this is last  permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Step 5: One last step. I know I keep saying that but I promise this is last 😬.</h4>\n<p>We have added our source files, now let's add an <code>npm script</code> to build final code using webpack and modify the <code>main</code> property inside our <code>package.json</code> to point it to our bundled code.</p>\n<p><code>package.json</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"json\" data-index=\"10\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;name&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;demo&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;version&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;1.0.0&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;description&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk14\">+</span><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;main&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;dist/index_bundle.js&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk14\">+</span><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;scripts&quot;</span><span class=\"mtk1\">: {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk14\">+</span><span class=\"mtk1\">    </span><span class=\"mtk12\">&quot;build&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;webpack&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk14\">+</span><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;keywords&quot;</span><span class=\"mtk1\">: [],</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;author&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;Hridayesh Sharma&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;license&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;ISC&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;dependencies&quot;</span><span class=\"mtk1\">: {},</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">&quot;devDependencies&quot;</span><span class=\"mtk1\">: {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">&quot;@babel/core&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;^7.10.4&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">&quot;@babel/preset-env&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;^7.11.0&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">&quot;babel-loader&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;^8.1.0&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">&quot;webpack&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;^4.44.1&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">&quot;webpack-cli&quot;</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;^3.3.12&quot;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>In <code>package.json</code> the <code>main</code> property is a direction to the entry point of the module that the package.json is describing.</p>\n<h4 id=\"hurray-we-have-finally-created-our-utility-library-using-es6\" style=\"position:relative;\"><a href=\"#hurray-we-have-finally-created-our-utility-library-using-es6\" aria-label=\"hurray we have finally created our utility library using es6 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Hurray! We have finally created our utility library using ES6.🥳</h4>\n<p>Run <code>$npm run build</code> to generate the bundled code and use it in the next step.</p>\n<h4 id=\"lets-test-our-library-now\" style=\"position:relative;\"><a href=\"#lets-test-our-library-now\" aria-label=\"lets test our library now permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Let's test our library now.</h4>\n<p><code>index.html</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"11\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!</span><span class=\"mtk12\">DOCTYPE</span><span class=\"mtk1\"> </span><span class=\"mtk12\">html</span><span class=\"mtk1\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">html</span><span class=\"mtk1\"> </span><span class=\"mtk12\">lang</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;en&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">meta</span><span class=\"mtk1\"> </span><span class=\"mtk12\">charset</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;UTF-8&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">meta</span><span class=\"mtk1\"> </span><span class=\"mtk12\">name</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;viewport&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">content</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;width=device-width, initial-scale=1.0&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Demo</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">title</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">head</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">script</span><span class=\"mtk1\"> </span><span class=\"mtk12\">src</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;dist/index_bundle.js&quot;</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk4\">script</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">script</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      console.log($)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      alert($.capital(&quot;hridayesh&quot;))</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      $.addDOMContent(&quot;Well It Works Fine!!!&quot;)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">script</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">body</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">html</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>Save it and run it in your browser. You will see the name capitalized.</p>\n<p>The complete code is available at <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/JavaScript/WebpackBabelJSLibrary\">LoginRadius Engineering Blog Sample Repo</a></p>\n<p>Thanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:</p>\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/lXlpshtv_IU\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk5 { color: #D16969; }\n  .dark-default-dark .mtk6 { color: #D7BA7D; }\n  .dark-default-dark .mtk14 { color: #F44747; }\n  .dark-default-dark .mtk17 { color: #808080; }\n</style>","frontmatter":{"title":"Let's Write a JavaScript Library in ES6 using Webpack and Babel","author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null},"date":"August 18, 2020","updated_date":null,"tags":["JavaScript","Webpack","NodeJs"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b9b74a766ec8c0c06733b438fefae5ae/58556/cover.webp","srcSet":"/static/b9b74a766ec8c0c06733b438fefae5ae/61e93/cover.webp 200w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/1f5c5/cover.webp 400w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/58556/cover.webp 800w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/cc834/cover.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Hridayesh Sharma","slug":"/engineering/write-a-javascript-library-using-webpack-and-babel/"}}}]},"authorYaml":{"id":"Hridayesh Sharma","bio":"Hridayesh Sharma is a Software Engineer at LoginRadius who is interested in how the web works and developer tools that make working with web easier.","github":"vyasriday","stackoverflow":"6235787","linkedin":"hridayesh-sharma","medium":null,"twitter":"vyasriday","avatar":null}},"pageContext":{"id":"Hridayesh Sharma","__params":{"id":"hridayesh-sharma"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}