Hosting Your Own Web Application: A Beginner's Guide with Nginx
Published: 2023-03-23 19:38:53

**#Introduction**

Have you ever desired you could develop a web application locally on your computer without having to pay for web hosting or a virtual private server (VPS)? Or perhaps you just want to explore web development in a safe setting without worrying about public access to your application. Nginx is a perfect pick for hosting your web application on localhost, regardless of your reasons. The opensource, high-performance web server Nginx has been well used by both system administrators and developers. Nginx is a wonderful option for hosting your own web application for a number of reasons like, high-performance, scalability, security, open-source, flexibility.

**#Prerequisites**
• One Ubuntu 18.04 server set up by following [this initial server setup for Ubuntu 18.04 tutorial,](https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04) including a sudo non-root user and a firewall.
• Nginx installed by following: (https://docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/)

**Table of content**

In this article, we'll provide a beginner's guide to hosting your own web application using Nginx.

1. How to install nginx
2. How to configure and start nginx in your local machine
3. Steps to host your own web application
4. How to test your web application

**HOW TO INSTALL NGINX**

Step 1 : Installing Prebuilt Debian Packages
Update the Debian repository information:
$ sudo apt-get update
1. Install the NGINX Open Source package:
$ sudo apt-get install nginx
2. Verify the installation:
$ sudo nginx -v


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj6vlt0sbzyfqq25jl9q.png)

Successful!!!

**HOW TO CONFIGURE AND START NGINX ON A LOCAL MACHINE**

Use the following commands to check if everything is working perfectly and to check
the status of your ngnix
$ curl -I http://eunice (your localhost)
$ systemctl status nginx (to check ngnix status)
$ systemctl reload nginx (to reload nginx)
$ systemctl start nginx (to start nginx)
use $ cd etc/nginx to configure your nginx


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e30njt6q7vzbul41mdbx.png)

cd (change directory) to your site-enable to make the necessary configuration.
Note that it will be automatically updated on the site-availiable.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89o1a9v5ed88rjf4ci4y.png)

**NB:** you can change your localhost to your preferable name.
The default html folder displayed on your web browser after installation can be located using this command 
$ cd var/www and can be edited to your preferable content


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l995q4xqkcrexgrk6krm.png)

**STEPS TO HOST YOUR OWN WEB APPLICATION
**
Step 1: $ cd var/www 
Locate where your web application is being stored in your device through your terminal and copy the folder to your nginx folder root directory. Use $pwd to write out the full path name of your current directory


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty9o1st7dmmxzsuc3bl7.png)

step 2: Copy the root directory and navigate to your web application folder directory. Use this command to copy your application folder to the nginx directory
$ sudo cp (your application folder name) -r /var/www
Now you can delete the default html folder inside the nginx directory.

Step3: cd to your application folder under the directory and copy the path. The name of the web application folder here is “shielding kids”.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45anfdvmakh49n88eswm.png)

/var/www/Shielding-Kids

step 4: Use $ cd etc/nginx to configure the two folders:
site-enable and site available, configure the default file. Past your path inside the default file “/var/www/Shielding-Kids” by changing the default root that’s linked to the initial html


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9ai95jkuq5jvo3j3ilo.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sol94o0j2pdflujxivfi.png)

use ctrl x, press y and enter then, save the updated file
NB: The site-available will be updated automatically.
After following the above steps carefully, then reload your nginx using the command below to update the latest changes
$ systemctl reload nginx.service

**HOW TO TEST YOUR WEB APPLICATION**

use the $ curl http://localhost  command to test

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy21hbgqd5olz010xzn6.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8r0hn14y42h9lpzgxv3.png)



This guide will help you take control of your web hosting and build your applications on your own terms,Whether you're a seasoned developer or just getting started with web development

**#conclusion**
In conclusion, using Nginx to host your own web applications locally is a strong and adaptable option for web developers. You can quickly set up a high-performance web server to host your application by following the instructions in this article, all without the need for an expensive hosting service or VPS.Of fact, this guide just scratches the surface of Nginx's features. You can explore more slightly like load balancing, SSL/TLS encryption, and others as you get more accustomed to the software. 

Also, you'll discover that having total control over your hosting environment can be very beneficial as you continue to develop your web application.
We sincerely hope that this guide has helped you get started with Nginx and local web hosting. With these resources at your disposal, you may create and deploy web applications at your own pace. Happy hosting!