When deploying React applications in subdirectories rather than root paths, developers often encounter resource loading issues. The main symptom is the browser trying to fetch assets (JS, CSS) from the wrong path, resulting in errors like "Uncaught SyntaxError: Unexpected token <". This happens because:

• Webpack defaults to assuming root path deployment
• Browser interprets relative paths from current URL
• Nginx needs special handling for single-page applications

Here's the proper configuration for serving a React app from /reactapp directory:

server {
    listen 80;
    server_name domain.net;
    root /var/www/vhosts/domain.net/httpdocs;

    location / {
        # Regular root location handling
        try_files $uri $uri/ =404;
    }

    location /reactapp/ {
        alias /var/www/vhosts/domain.net/httpdocs/reactapp/;
        try_files $uri $uri/ /reactapp/index.html;
        
        # Handle static files with proper cache headers
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public";
            try_files $uri =404;
        }
    }
}

For Create React App or similar Webpack-based setups, you must configure these settings:

// In package.json or webpack.config.js
{
  "homepage": "/reactapp",
  "scripts": {
    "build": "PUBLIC_URL=/reactapp react-scripts build"
  }
}

// For custom webpack configurations:
output: {
  publicPath: '/reactapp/',
  path: path.resolve(__dirname, 'build')
}

React Router needs special configuration when running in subdirectories:

// In your main app component
<BrowserRouter basename="/reactapp">
  <App />
</BrowserRouter>

// Or for HashRouter:
<HashRouter basename="/reactapp">
  <App />
</HashRouter>

After implementing these changes:

1. Run npm run build with the new configuration
2. Verify all generated asset paths in build/index.html include /reactapp/ prefix
3. Check the browser's Network tab to confirm proper asset loading
4. Test all client-side routes to ensure they work with page refreshes

If problems persist:

• 404 Errors: Ensure nginx alias points to the correct physical directory
• Blank Page: Check console for "Unexpected token <" errors indicating JS loading issues
• CSS Not Loading: Verify Webpack's publicPath matches your subdirectory
• Router Issues: Confirm basename prop matches your subdirectory exactly

Many developers encounter issues when trying to serve a React application from a subdirectory instead of the root domain. The common error is Uncaught SyntaxError: Unexpected token <, which occurs when the browser tries to load JavaScript or CSS files from the wrong path.

The issue typically stems from three main factors:

• Incorrect Nginx configuration for subdirectory routing
• Missing base path configuration in the React app
• Webpack not being configured for subdirectory deployment

Here's the proper Nginx configuration to serve a React app from a subdirectory:

server {
    listen 80;
    server_name domain.net;

    root /var/www/vhosts/domain.net/httpdocs;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /reactapp/ {
        alias /var/www/vhosts/domain.net/httpdocs/reactapp/;
        try_files $uri $uri/ /reactapp/index.html;
        
        # Handle static files with proper caching
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public";
            try_files $uri =404;
        }
    }
}

For Create React App, you need to set the homepage property in package.json:

{
  "name": "my-app",
  "homepage": "/reactapp",
  ...
}

If using React Router, configure the basename:

<BrowserRouter basename="/reactapp">
  <App />
</BrowserRouter>

For custom Webpack configurations, set the publicPath:

output: {
  path: path.resolve(__dirname, 'build'),
  filename: 'static/js/[name].[contenthash:8].js',
  publicPath: '/reactapp/'
}

After implementing these changes:

1. Rebuild your React application
2. Restart Nginx (sudo systemctl restart nginx)
3. Verify all assets are loading from the correct paths

Use browser developer tools to check network requests and ensure all resources are being served from /reactapp/ rather than root.

For production deployments, consider these enhancements:

• Implement HTTPS with Let's Encrypt
• Add proper caching headers for static assets
• Configure gzip compression in Nginx
• Set up proper error pages