Nginx for Front-end Developers
Tags: showdev, react, tutorial, webdev
Published: 2019-05-25 21:57:01

---
title: Nginx for Front-end Developers
published: true
description: Learn Nginx by deploying a react application
tags: showdev,react,tutorial,webdev
canonical_url : https://cloudnweb.dev/2019/05/nginx-for-front-end-developers/
series: nginx
---

Support my work by reading this post from my blog : <a href="https://cloudnweb.dev/2019/05/nginx-for-front-end-developers/">Nginx For Front-end Developers</a> 

<!-- wp:paragraph -->
<p>This article is to explain Nginx for Front-end Developers in a much simpler way</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Nginx is a powerful and high-effiency web server which primarily solves the problem of <a href="https://en.wikipedia.org/wiki/C10k_problem">C10k problem</a>. It can serve the data with blazing speed. we can use Nginx for other purposes also like reverse proxying,load balancing and caching files.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can ask  me why I need to learn about Nginx  as a front end developer . In a Modern Front end development world, everything that you work on frontend compiled into a single HTML,JS and css file. So, It will be useful to know how&nbsp; the web server handles your files in production.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Nginx Architecture:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The basic nginx architecture consists of a master process and its workers. The master is supposed to read the configuration file and maintain worker processes, while workers do the actual processing of requests.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":530} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/05/Screen-Shot-2019-05-26-at-1.34.56-AM-1024x580.png" alt="" class="wp-image-530"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Nginx is a <a href="https://en.wikipedia.org/wiki/Master/slave_(technology)">Master- slave</a> , <a href="https://en.wikipedia.org/wiki/Event-driven_architecture">Event-driven </a>and <a href="https://anturis.com/blog/nginx-vs-apache/">Non-Blocking</a> architecture.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>Master</strong> - Master is reponsible for maintaining and validating the configurations. it is also reponsible for creating and terminating the worker processes.</li><li><strong>Worker</strong> - worker processes are responsible for handling the request in the shared socket. every worker process can handle thousands of  requests since the processes are single-threaded and non-blocking</li><li><strong>Cache Loader</strong> - cache loader updates the worker instance with the data exists in the disk according to the request meta-data.</li><li><strong>Cache Manager</strong> - cache manager is responsible for validating and configuring the cache expiry</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Nginx Installation:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let's see how we can install nginx in development machine. i am using macOS. feel free to install in linux,windows.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To Install nginx in mac,you need to have <a href="https://brew.sh">Homebrew</a> installed on your machine.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Note : For Ubuntu or windows, please follow this official <a href="https://www.nginx.com/blog/setting-up-nginx/">installation guide</a></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ brew install nginx
$ nginx -v</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now , you can able to see something like this in screen</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":524} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/05/Screen-Shot-2019-05-26-at-1.13.48-AM.png" alt="" class="wp-image-524"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>and to check the web server running,  run <strong>http://localhost:8080</strong> in the browser. you should see the nginx default page</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":534} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/05/Screen-Shot-2019-05-26-at-1.39.05-AM-1024x461.png" alt="" class="wp-image-534"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Voila !!!!! we have successfully installed nginx in local machine.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now we will see how to deploy an React application using nginx server. we will be deploying a <a href="https://github.com/ShanteDenise/React-Random-Quote-Generator">Random Quote generator</a> application from <a href="https://www.linkedin.com/in/shante-austin/">Shante Autsin</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Source code : <a href="https://github.com/ShanteDenise/React-Random-Quote-Generator">https://github.com/ShanteDenise/React-Random-Quote-Generator</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Deploy App using nginx server</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>After installing nginx in the machine,  we can access the nginx configuration file in <strong>/usr/local/etc/nginx </strong> location.you can see the files and directory in the nginx as follows</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":528} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/05/Screen-Shot-2019-05-26-at-1.22.07-AM-1024x278.png" alt="" class="wp-image-528"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Before configuring the server. we need to build the react application and move the files to nginx directory. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In macOS , default file location for nginx is <strong>/usr/local/var/www</strong> . you need to move the build in to the nginx folder.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ sudo mv -v /&lt;build directory> /usr/local/var/www/demo</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that, we need to configure the server in the <strong>nginx.conf</strong>  file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ sudo nano nginx.conf</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Mainly, there are two blocks in the nginx configuration file. <strong>http</strong> and <strong>server</strong> block. nginx configuration file will only have one http block and we can create serveral server blocks inside http block. we will see the directive and block concept of nginx in an another article.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Add the following code in the configuration file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>http {
         ...
  server {
        listen       8080;
        server_name  localhost;
    location / {
            root   /var/www/demo;
            index  index.html index.htm;
        }</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that, you need to restart the nginx service.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>$ sudo brew services restart nginx</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Finally, run the <strong>localhost:8080</strong> in the browser and you will see the application running something like this.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":539} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/05/Screen-Shot-2019-05-26-at-3.08.54-AM-1024x595.png" alt="" class="wp-image-539"/><figcaption>Random Quote Generator</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Yayy!!!.. Now the application running using the nginx web server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In next article , we will see how nginx works and how we can customize the nginx server.until then <strong>Happy Coding</strong>!!!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To Know more about <a href="https://cloudnweb.dev/category/web-dev/">web development</a></p>
<!-- /wp:paragraph -->