DEV Community

Cover image for Simplest WebServer for Angular in 6 Lines
Jan Stamer
Jan Stamer

Posted on • Edited on

Simplest WebServer for Angular in 6 Lines

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 } 
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

Check it out live and working in our Github repo below (folder frontend). Have fun and enjoy!!

GitHub logo crossnative / cloudland-rps

Cloud native Rock, Paper, Scissors Workshop @CloudLand






Top comments (0)