Ionic Components not loading in Docker Container

Ionic Framework Ionic Angular
1

I have an Angular web app using Ionic components. When I run the app locally, all Ionic components load without any issues. However, when I run the app inside my Docker container, none of the Ionic components are loaded.

They are shown in the DOM but are not displayed correctly.

Has anyone encountered this issue before?

Thanks in advance!

Dockerfile:

FROM node:lts AS node

# Defines the build environment (one of: {production, staging})
ARG BUILD_ENVIRONMENT=production

WORKDIR /Crew8Events-Webapp

COPY package.json package-lock.json* ./
RUN npm ci && npm cache clean --force
COPY . .

RUN npm run build:webapp:${BUILD_ENVIRONMENT}

FROM caddy:2.7.6-alpine

# Re-stating environment for new process
ARG BUILD_ENVIRONMENT=production

COPY config/Caddyfile-${BUILD_ENVIRONMENT} /etc/caddy/Caddyfile
COPY --from=node Crew8Events-Webapp/www /srv/crew8-events-webapp

EXPOSE 80
EXPOSE 443
2

When running locally, are you running with a dev env or prod? If dev, try prod. I bet it won’t work locally either. Usually when it works “locally” but not prod, something isn’t imported correctly.