Configuring NGINX for localhost

Configuring NGINX for localhost

I had a little trouble finding a simple way to set NGINX up to work locally, so I wanted to write up some quick instructions here. I’m using NGINX with Windows Subsystem for Linux (WSL).

First, I installed NGINX in WSL with ‘sudo apt-get install nginx’

Then, I created a symlink to my frontend directory in my home directory in WSL.

In /etc/nginx/conf.d, I created basic config file localhost.conf:

server {
    listen       8080;

    location / {
        root   /home/username/frontend_directory;
        index  index.html index.htm;
    }

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

The only thing you should need to change is the bolded frontend_directory. Keep in mind the path may differ depending where you keep your files. I restructured my front end after setting up Webpack to include a dist/ folder and broke this config before modifying this line again.

To start NGINX (I have to do this every time I restart the computer): ‘sudo nginx’

Then go to 127.0.0.1:8080 and your site should be live!

If you need to make changes to your configuration, you should first try: ‘sudo service nginx reload’ which will give you a ‘hot’ reload instead of restarting the server.

If you do need to restart the server, you can do so with ‘sudo service nginx restart’.