Frontend and backend on the same server

1. Install Apache, Dotnet, modules for Reverse proxy

sudo apt install apache2 -y
sudo apt install -y aspnetcore-runtime-8.0
sudo a2enmod proxy proxy_http proxy_wstunnel rewrite headers

2. Enable Apache on startup

sudo systemctl enable apache2

3. App settings

Frontend

clientsettings.json:

  {
      "urlBackend": {
          "Development": {
              "HTTP": "http://localhost:4000",
              "WS": "ws://localhost:4000/websocket"
          },
          "Production": {
              "HTTP": "http://barryonweb.com/api",
              "WS": "ws://barryonweb.com/websocket"
          }
      }
  }

.env:
```
  VITE_ENV=Development
```
.env.production:
```
  VITE_ENV=Production
```

Backend appsettings.json:

  "CORS": {
      "AllowedOriginsFrontend": [
      "http://barryonweb.com"

4. App deployment

Create appRootDir in /var/www/
Grant permission
- Add user to www-data group
- Change owning group of /var/www to www-data
- Enable write permission for /var/www to owning group

5. Create virtual host for ASP.net to conf Reverse Proxy

Create app.conf in /etc/apache2/sites-available/:

<VirtualHost *:80>
    ServerName barryonweb.com

    # Proxy settings for Backend API
    ProxyPreserveHost On
    ProxyPass /api/ http://localhost:5000/
    ProxyPassReverse /api/ http://localhost:5000/

    # Proxy settings for WebSockets    
    ProxyPass /websocket ws://localhost:5000/websocket
    ProxyPassReverse /websocket ws://localhost:5000/websocket

    # Serve Frontend React App
    DocumentRoot /var/www/appRootDir/clientDir

    <Directory /var/www/appRootDir/clientDir>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted

        # Enable Rewrite Engine for SPA Routing
        RewriteEngine On

        # If a file or directory doesn't exist, serve index.html
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ /index.html [L]
    </Directory>

    # Logging
    ErrorLog ${APACHE_LOG_DIR}/combined-error.log
    CustomLog ${APACHE_LOG_DIR}/combined-access.log combined
</VirtualHost>

6. Apply new .conf file created

Enable site
```
  sudo a2ensite app.conf
```
Check syntax
```
  sudo apachectl configtest 
```

Restart Apache web server

  sudo systemctl restart apache2 
  sudo systemctl reload apache2

7. Install node

sudo apt install -y curl (required dep)
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash –
sudo apt-get install -y nodejs
node -v npm -v
which node which npm

8. Edge Browser for Playwright

Install

  npx playwright install msedge
  ls /opt/microsoft/msedge/msedge

9. Run backend dll

cd /var/www/appRootDir/serverDir
dotnet Server.dll

10. Test App

Test backend from Postman

  GET http://localhost:5000/ping
  GET http://localhost:5000/ep1

Test backend from Browser

  http://localhost:5000/ping
  http://localhost:5000/ep1

Test frontend connection from Browser
```
  http://barryonweb.com
          
```

Test endpoint from Browser

  http://barryonweb.com/api/ep1?key=value

11. Troubleshooting

Disable default site
```
  sudo a2dissite 000-default.conf
```

Get logs

  cat /var/log/apache2/frontend-error.log