Nginx | Notion

Code:

https://github.com/nhuthuynhphu/nginx-react

To configure NGINX for serving a React static build on Windows 11, follow these steps:

Install NGINX on Windows 11:
- Download the NGINX binary from the official NGINX website.
- Extract the downloaded zip file to a preferred location, e.g., C:\\\\nginx.
Prepare React Static Build:
- In your React project, run the following command to generate a static build:
```
npm run build
```
- The output will be in the build directory by default. You can change this directory name if needed.

Configure NGINX:

Navigate to the NGINX configuration directory, e.g., C:\\\\nginx\\\\conf.

Open nginx.conf in a text editor and update it with the following configuration:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   C:/path/to/your/react/project/build;
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   C:/nginx/html;
        }
    }
}

Replace C:/path/to/your/react/project/build with the actual path to your React static build directory.

Start NGINX:
- Open a Command Prompt with administrative privileges.
- Navigate to the NGINX directory, e.g., cd C:\\\\nginx.
- Start NGINX with the following command:
```
nginx.exe
```
Verify the Configuration:
- Open a web browser and navigate to http://localhost.
- You should see your React static site served by NGINX.

Additional Tips:

Restarting NGINX: If you make changes to the nginx.conf file, you need to restart NGINX to apply the changes. Use the following commands:
```
nginx.exe -s reload
```
or
```
nginx.exe -s stop
nginx.exe
```
Logs and Debugging: NGINX logs are useful for troubleshooting. Check the logs directory in the NGINX installation path for error.log and access.log.

By following these steps, you should have NGINX configured to serve your React static build on Windows 11.

Untitled

To configure a custom domain like demo.local on your local machine and serve a React static build using NGINX on Windows 11, follow these steps:

Open Notepad or another text editor with administrative privileges.
Open the hosts file located at C:\\Windows\\System32\\drivers\\etc\\hosts.
Add the following line to map demo.local to localhost:
```
127.0.0.1   demo.local
```

Untitled