Web Development Unlimited

Deployment

Deployment for the Angular Template Website involves publishing both the Angular frontend (/ui-dev) and the Node backend (/api). Depending on the hosting provider (cPanel, VPS, Node hosting, or static hosting), the steps will vary.

1. Running Angular Locally

Navigate to the UI directory:

cd ui-dev
npm install
npm start

The app runs by default on: 

http://localhost:4200

2. Building Angular for Production

cd ui-dev
ng build --configuration production

Output is generated in:

ui-dev/dist/

These files can be uploaded directly to any static hosting environment or served by a reverse proxy (NGINX, Apache, etc.).

3. Deploying Angular on Shared Hosting / cPanel

Upload the contents of:

ui-dev/dist/

Into your public HTML folder:

public_html/
  index.html
  assets/
  *.js
  *.css

cPanel Angular Rewrite Rule

Place this in .htaccess to support Angular routing: 


RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

4. Deploying Angular on NGINX


server {
  listen 80;
  server_name example.com;

  root /var/www/angular/dist;

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

5. Deploying the Node API

The backend is deployed separately from the Angular build.

cd api
npm install
node index.js

For production, use PM2:


npm install pm2 -g
pm2 start index.js --name api
pm2 save
pm2 startup

6. Recommended Node Folder Structure (Production)

/var/www/
  angular/           ← Angular dist build
  api-server/        ← Node API
      ├── index.js
      ├── routes/
      ├── json/
      └── package.json

7. Reverse Proxy to Node API (NGINX)


location /api/ {
  proxy_pass http://localhost:3000/api/;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
}

Example Combined Configuration


server {
  listen 80;
  server_name example.com;

  # Angular App
  root /var/www/angular;
  try_files $uri $uri/ /index.html;

  # Node API
  location /api/ {
    proxy_pass http://localhost:3000/api/;
  }
}

8. Environment Variables

Create:

api/.env

Example:


PORT=3000
NODE_ENV=production
API_RATE_LIMIT=100

Angular Environment Config


// environment.ts
export const environment = {
  production: false,
  apiUrl: '/api'
};

9. SEO + Performance Recommendations


location ~* \.(js|css|png|jpg|jpeg|svg|ico)$ {
  expires 30d;
  add_header Cache-Control "public, immutable";
}

10. Summary