NGINX

What is NGINX?

Now that we have the back-end taken care of, we have to have something that can serve up the static files of the front-end application. NGINX is a highly efficient web server that is both very configurable and easy to implement.

Installing NGINX

Unlike Gunicorn, NGINX is not PIP installable and needs to be installed as a standalone application on your computer. The installation of Nginx will depend on what platform we are running it on and what package manager is required, but for a Linux distribution that uses APT, we can install it with this:

apt-get update

apt-get install nginx

If we have a Linux distribution that uses Yum for package management, we can use this:

yum update

yum install nginx

The installation for NGINX will configure it as a system service.

The NGINX configuration file

Once NGINX is installed, we have a configuration file to tell it how to handle web requests. Configuration files are stored in the /etc/nginx/sites-available/ folder by default. We have a sample NGINX configuration file that is available inside bookapp/ folder.

In the configuration file, at line 2, the first thing it specifies is the port to listen on with the listen option. This is set to 80, which is the standard HTTP port for most production applications.

At line 3, the root option is set to the file path where the bundled files that parcel produced are located. Here we can point it to where our bundled production JavaScript files are. On some servers, they might be located in a folder called public or static.

At line 4, the index option tells NGINX what file to serve if none is specified. In this case, it serves our main application index.html file.

At line 6, the location entries in the configuration file are like the route entries in Flask. We can handle requests in different ways based on the URL pattern. For our application, the requirement is to send any URLs that start with /api to the Flask server.

At line 7, this is done with a proxy_pass entry that passes the request through to the specified host.

At line 8, the include proxy_params entry adds additional headers so that the forwarded request is handled properly by the Flask server.

At line 11, the location entry for the default URL is set to serve static files from the provided root location.

At line 12, NGINX will try to serve up any file that was requested. However, if the file doesn’t exist, it will serve up our index.html file instead. This is an important setting that allows us to use internal SPA URLs like /books. Without the /index.html failover for the default location route, NGINX would respond with a 404 Not Found error if it received a request for /books.

In lines 15 and 16, the last part of the configuration specifies where to keep the error and access logs.

Enabling NGINX on the platform

Before NGINX can start using the configuration file, there is a way to enable it by putting a symbolic link or shortcut to the configuration file in the /etc/nginx/sites-enabled/ folder:

ln -s /etc/nginx/sites-available/bookapp /etc/nginx/sites-enabled/bookapp

NGINX normally comes with an enabled default site running on port 80. If there is a symbolic link file called default in the /etc/nginx/sites-enabled/ folder, it’s better to delete it to ensure that it doesn’t interfere with our application, which also wants to run on port 80:

rm /etc/nginx/sites-enabled/default

Once the configuration is enabled and we have Gunicorn serving up the REST service, we should be able to open the application in a web browser using the standard HTTP port.

Power of NGINX

NGINX is capable of handling large scale deployments and is highly configurable. While we’ve barely scratched the surface of what it can do, what we have here should give us a good starting point.

Up-and-running application

This is what the application looks like:

Note: To log in, use the username admin and password 123.