Nginx for Front-end Developers

This article is to explain Nginx for Front-end Developers in a much simpler way

Nginx is a powerful and high-effiency web server which primarily solves the problem of C10k problem. It can serve the data with blazing speed. we can use Nginx for other purposes also like reverse proxying,load balancing and caching files.

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  the web server handles your files in production.

Nginx Architecture:

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.

Screen Shot 2019 05 26 at 1 34 56 AM

Nginx is a Master- slave , Event-driven and Non-Blocking architecture.

  • Master - Master is reponsible for maintaining and validating the configurations. it is also reponsible for creating and terminating the worker processes.
  • Worker - 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
  • Cache Loader - cache loader updates the worker instance with the data exists in the disk according to the request meta-data.
  • Cache Manager - cache manager is responsible for validating and configuring the cache expiry

Nginx Installation:

Let's see how we can install nginx in development machine. i am using macOS. feel free to install in linux,windows.

To Install nginx in mac,you need to have Homebrew installed on your machine.

Note : For Ubuntu or windows, please follow this official installation guide

1$ brew install nginx
2$ nginx -v

Now , you can able to see something like this in screen

Screen Shot 2019 05 26 at 1 13 48 AM

and to check the web server running, run http://localhost:8080 in the browser. you should see the nginx default page

Screen Shot 2019 05 26 at 1 39 05 AM

Voila !!!!! we have successfully installed nginx in local machine.

Now we will see how to deploy an React application using nginx server. we will be deploying a Random Quote generator application from Shante Autsin

Source code : https://github.com/ShanteDenise/React-Random-Quote-Generator

Deploy App using nginx server

After installing nginx in the machine, we can access the nginx configuration file in /usr/local/etc/nginx location.you can see the files and directory in the nginx as follows

Screen Shot 2019 05 26 at 1 22 07 AM

Before configuring the server. we need to build the react application and move the files to nginx directory.

In macOS , default file location for nginx is /usr/local/var/www . you need to move the build in to the nginx folder.

1$ sudo mv -v /<build directory> /usr/local/var/www/demo

After that, we need to configure the server in the nginx.conf file

1$ sudo nano nginx.conf

Mainly, there are two blocks in the nginx configuration file. http and server 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.

Add the following code in the configuration file

1http {
2 ...
3 server {
4 listen 8080;
5 server_name localhost;
6 location / {
7 root /var/www/demo;
8 index index.html index.htm;
9 }

After that, you need to restart the nginx service.

1$ sudo brew services restart nginx

Finally, run the localhost:8080 in the browser and you will see the application running something like this.

Screen Shot 2019 05 26 at 3 08 54 AM

Random Quote Generator

Yayy!!!.. Now the application running using the nginx web server.

In next article , we will see how nginx works and how we can customize the nginx server.until then Happy Coding!!!

To Know more about web development

To Read More

Kubernetes for Nodejs developers

Do you keep hearing the word kubernetes in the tech community and you couldn't u...

TypeScript Interfaces vs Types

In this article, we will see what are interfaces and types and the difference be...

How to find project ideas to practi...

Ever wondered what how to get a real world experience on web development while w...

Building a Production-grade Nodejs,...

This article is the first part of building a production grade nodejs,graphql and...

Modern React Redux Tutorials with R...

This tutorial explain how you can build an application using modern react redux ...

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...