Having a proper local development environment is crucial for building and testing applications efficiently. One tool that can really enhance your local dev environment is Nginx.

In this post, I'll explain how to install Nginx and configure it for local development with HTTPS enabled.

What is Nginx?

Nginx can help you to run multiple local development servers. For example, you may have a React app running on port 3000 and a C# API running on port 5000. In this case, it acts as a reverse proxy to route requests to these different services.

We can also adding a SSL certificate to specific domain such that the website traffic can be served via HTTPS.

Some Practical Scenarios in Local Development

There are a few scenarios where using HTTPS in local development is a must:

• Testing functionality that requires a secure context like SSO login, service workers, Geolocation API etc.
• Avoiding mixed content warnings when loading scripts, styles, images etc.

Enabling HTTPS for local development helps address these issues and improves the development experience.

Installation

Mac

Use homebrew to install Nginx:

brew install nginx

After that, add it as a service to start Nginx automatically:

brew services start nginx

• Installation directory: /opt/homebrew/bin/nginx
• Document directory: /opt/homebrew/var/www

Windows