DEV Community

Jan Stamer

Posted on Jul 17, 2023 • Edited on Jan 6

Simplest WebServer for Angular in 6 Lines

#angular #webserver #beginners #spa

How do you serve your Angular app? Learn to build a web server for your Angular app in 6 lines of code. Throw in 8 more lines and you have a multi stage Docker build for your web server along with it.

Angular Web Server in 6 Lines

6 lines of code, that's all it takes for a simple Angular WebServer powered by Caddy:

:4200 {
        root * /usr/share/caddy
        encode gzip
        try_files {path} /index.html
        file_server
}

Multi Stage Docker Build in 8 Lines

Now let's throw in another 8 lines of code to get a multi stage Docker build for our Angular frontend.

As a result you'll get a Caddy powered container of your Angular app.

# 1. Frontend Builder
FROM node:18 as builder
WORKDIR /app
ADD . /app
RUN npm ci && npm run build

# 2. Frontend Container
FROM caddy:2.6.4-alpine
EXPOSE 4200
COPY Caddyfile /etc/caddy/Caddyfile
COPY --from=builder /app/dist/frontend/* /usr/share/caddy