Frontend deployment

The Brautcloud frontend is an Angular 21 application built with Tailwind CSS that provides the user interface for wedding event management and photo sharing.

Prerequisites

Install Node.js

The frontend requires Node.js (version 18 or higher recommended). Verify your installation:

node --version

You should see Node.js v18 or higher.

Install npm

npm comes bundled with Node.js. Verify the installation:

npm --version

Backend API running

Ensure the backend API is deployed and accessible. See the backend deployment guide for details.

Install dependencies

Navigate to the frontend directory and install the required npm packages:

cd brautcloud-frontend
npm install

This will install all dependencies defined in package.json, including:

Angular 21.1.0 - Core framework
RxJS 7.8.0 - Reactive programming library
Tailwind CSS 4.1.12 - Utility-first CSS framework
Angular CLI 21.1.1 - Build and development tools

The project is configured to use npm as the package manager. This is specified in angular.json.

Environment configuration

Configure the API endpoint for your backend. The frontend needs to know where to send API requests.

The current implementation uses hardcoded API endpoints. For production deployments, you should implement environment-specific configuration.

Recommended approach

Create environment configuration files:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080/api'
};

Then use these in your services:

import { environment } from '../environments/environment';

const API_URL = environment.apiUrl;

Runtime configuration

For runtime configuration (without rebuilding), you can use a configuration file loaded at startup:

public/config.json

{
  "apiUrl": "https://api.yourdomain.com/api"
}

Load this configuration in your app initialization and use it throughout the application.

Development server

Run the development server for local testing:

npm start

This will:

Compile the Angular application
Start a development server at http://localhost:4200
Watch for file changes and auto-reload

The development build includes:

Source maps for debugging
Unminified code
Hot module replacement

The development server is not suitable for production. Always use production builds for deployment.

Build for production

Create an optimized production build:

npm run build

This executes ng build with production configuration, which:

Optimizes the bundle - Minifies JavaScript and CSS
Tree-shakes unused code - Removes dead code
Generates hashed filenames - Enables cache busting
Applies build budgets - Warns if bundles exceed size limits

The output is generated in the dist/brautcloud-frontend/browser directory.

Build budgets

The project enforces bundle size limits:

Bundle Type	Warning	Error
Initial bundle	500kB	1MB
Component styles	4kB	8kB

If your build exceeds these limits, you’ll see warnings or errors. Consider code splitting or lazy loading to reduce bundle sizes.

Build output

After building, the dist/ directory contains:

dist/brautcloud-frontend/browser/
├── index.html
├── main-[hash].js
├── polyfills-[hash].js
├── styles-[hash].css
└── assets/

Deployment options

Static hosting
Nginx
Docker

Deploy the dist/brautcloud-frontend/browser directory to any static hosting service:

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod --dir=dist/brautcloud-frontend/browser

Deploy behind an Nginx web server:

nginx.conf

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/brautcloud/dist/brautcloud-frontend/browser;
    index index.html;

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

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

Deploy the files:

# Copy build to server
scp -r dist/brautcloud-frontend/browser user@server:/var/www/brautcloud/

# Restart Nginx
sudo systemctl restart nginx

Create a Docker container with Nginx:

Dockerfile

# Build stage
FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Production stage
FROM nginx:alpine
COPY --from=build /app/dist/brautcloud-frontend/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and run:

docker build -t brautcloud-frontend .
docker run -p 80:80 brautcloud-frontend

Configure routing

Angular uses client-side routing. Configure your web server to redirect all requests to index.html:

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

This ensures that refreshing the page or accessing routes directly works correctly.

Performance optimization

Enable compression

Configure Gzip or Brotli compression on your web server to reduce bundle sizes:

gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;

Set cache headers

Configure aggressive caching for hashed assets:

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

Use CDN

Serve static assets through a Content Delivery Network (CDN) for faster global delivery.

Implement lazy loading

Load feature modules on demand to reduce initial bundle size:

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

Security considerations

Always implement proper security measures for production deployments.

HTTPS only: Serve the application over HTTPS
Content Security Policy: Configure CSP headers to prevent XSS attacks
CORS configuration: Ensure backend CORS settings match your frontend domain
Environment variables: Never commit sensitive data to version control

Security headers

add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

Troubleshooting

Build fails

If the build fails:

Clear node modules and reinstall: rm -rf node_modules && npm install
Clear Angular cache: rm -rf .angular/cache
Check Node.js version compatibility
Review error messages for missing dependencies

API calls fail

If API requests don’t work:

Verify the backend URL is correct
Check CORS configuration on the backend
Ensure the backend is accessible from the frontend domain
Check browser console for network errors

Routing doesn’t work after refresh

If routes return 404 errors:

Configure web server to redirect all requests to index.html
Verify the base href in index.html is correct
Check that hash routing isn’t required for your hosting setup

Next steps

Backend deployment

Deploy the Spring Boot backend API

Database setup

Configure PostgreSQL database and schema

Get Started

Core Features

Deployment

Prerequisites

Install dependencies

Environment configuration

Recommended approach

Runtime configuration

Development server

Build for production

Build budgets

Build output

Deployment options

Configure routing

Performance optimization

Security considerations

Troubleshooting

Build fails

API calls fail

Routing doesn’t work after refresh

Next steps

Backend deployment

Database setup

Build docs developers (and LLMs) love

Get Started

Core Features

Deployment

​Prerequisites

​Install dependencies

​Environment configuration

​Recommended approach

​Runtime configuration

​Development server

​Build for production

​Build budgets

​Build output

​Deployment options

​Configure routing

​Performance optimization

​Security considerations

​Troubleshooting

​Build fails

​API calls fail

​Routing doesn’t work after refresh

​Next steps

Backend deployment

Database setup

Build docs developers (and LLMs) love

Prerequisites

Install dependencies

Environment configuration

Recommended approach

Runtime configuration

Development server

Build for production

Build budgets

Build output

Deployment options

Configure routing

Performance optimization

Security considerations

Troubleshooting

Build fails

API calls fail

Routing doesn’t work after refresh

Next steps