Angular behind NGINX blank page

TLDR:- Try your site in edge OR reset your cache like so:

Click on the hamburger menu

Click settings

In the search box enter “cache”

You should see the option to “Clear Data” click this!

Now you should be fetching all fresh data. And if the issue is resolved, the page should load. Otherwise likely your issue is somewhere else.

---

I was serving up an Angular application using static files hosted in the hosts file system and nginx pointing to the root angular index file. But wanting to take it a step further, and using docker, I migrated to angular sitting behind nginx in a nice little docker file. For reference (and in case it helps anyone else😉) here is the dockerfile:

### STAGE 1: Build ###
FROM node:current-alpine3.16 AS build
WORKDIR /usr/src/app
COPY package.json ./
RUN npm i -g @angular/cli

# Install app dependencies:
RUN npm i

COPY . .
RUN npm run build

# Stage 2: Serve app with nginx server

# Use official nginx image as the base image
FROM nginx:latest

# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/src/app/dist /usr/share/nginx/html
COPY --from=build /usr/src/app/default.conf /etc/nginx/conf.d/default.conf

# Expose port 80
EXPOSE 80

Im running angular 13 FYI

Notice that im copying over the nginx.conf so that I can point to the dist section of the files 👍

And here is my docker-compose file

version: '3'

services:

  app:
    build:
      context: .
      dockerfile: dockerfile
    ports:
      - 90:80

    restart: unless-stopped

Now all good! I run, I publish to the server and reconfigure from pointing to physical files, to the server port, in my case its port 91

location / {

        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass http://localhost:91;
    }

Turns out Firefox holds onto something, it must cache to an extra degree. When we load in edge, its working!

I just wanted to post this in case you were having a similar issue, maybe just try in edge before banging your head against a wall! 😂

If your interested in checking out the site, its located here:

https://www.easydataconverter.com/