Cannot get frontend to run on localhost. nginx docker nuxt/express

Question

I'm trying to configure nginx to serve frontend and backend of my app. My frontend is a nuxtjs application and my backend is django. I can access backend at localhost:8000 But I cannot access nuxt at localhost:3000

I'm using nginx as a reverse proxy.

When I run npm run dev which uses the "nuxt" command my project builds successfully.

I can't see anything in the logs and I don't know why localhost or 0.0.0.0 isn't getting any response or error when the frontend is build and running. How do I get the front to be mapped and served by nginx so I can access the api of django?

ℹ [HPM] Proxy created: /  ->  http://backend:8000/api
[HPM] Subscribed to http-proxy events:  [ 'proxyReq', 'proxyRes', 'error', 'close' ]
ℹ Listening on: http://172.19.0.5:3000/
ℹ Preparing project for development
ℹ Initial build may take a while
✔ Builder initialized
✔ Nuxt files generated
ℹ Compiling Client
ℹ Compiling Server
✔ Server: Compiled successfully in 11.82s
✔ Client: Compiled successfully in 19.09s
ℹ Waiting for file changes
ℹ Memory usage: 212 MB (RSS: 337 MB)
ℹ Listening on: http://172.19.0.5:3000/

docker-compose.yml

version: '3.3'

volumes:
    autobets_data: {}
    redis_data:

networks: 
    random_name:
      driver: bridge

services:
  backend:
    build:
      context: ./backend
    depends_on:
      - postgres
    volumes:
      - ./backend:/app
    command: /start.sh
    entrypoint: /entrypoint.sh
    restart: on-failure
    env_file: .env

  frontend:
    restart: always
    build: ./frontend
    environment: 
      - API_URI=http://backend:8000/api
  
    command: sh -c "npm install && npm run dev"  
    expose:
      - "3000"
    links:
      - backend
    volumes:
      - ./.env:/app/.env:ro
      - ./frontend:/app

    working_dir: /app
    restart: on-failure
    depends_on: 
      - backend


  postgres:
    image: postgres:10-alpine
    volumes:
      - autobets_data:/var/lib/postgresql/data
    env_file: .env


  nginx:
    image: nginx:alpine
    ports:
      - "8000:80"
    depends_on:
      - backend
    volumes:
      - ./backend/media/:/media/
      - ./backend/staticfiles/:/staticfiles/
      - ./nginx/dev.conf:/etc/nginx/nginx.conf:ro
    depends_on: 
      - frontend
      - backend  

dev.conf

user  nginx;
worker_processes  1;

events {
  worker_connections  1024;
}

http {
  include /etc/nginx/mime.types;
  client_max_body_size 100m;

  upstream backend {
    server backend:8000;
  }

  upstream frontend {
    server frontend:3000;
  }

  server {
    listen 80;
    server_name 0.0.0.0 localhost;
    charset utf-8;

    # frontend
    location / {
      proxy_redirect off;
      proxy_pass http://frontend;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
    }


    # backend
    location ~ ^/(admin|api) {
      proxy_redirect off;
      proxy_pass http://backend;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
    }

    # backend static
    location ~ ^/(staticfiles|media)/(.*)$ {
      alias /$1/$2;
    }
  }
}

api.js

const proxy = require('http-proxy-middleware')
const app = require('express')()

// API_URI should end in /api/, and we remove that part in the URL.
app.use(proxy({
  target: process.env.API_URI,
  prependPath: false,
  changeOrigin: true,
  auth: false,
  logLevel: 'debug',
  onProxyReq(proxyReq, req, res) {
    if (req.session.authToken) {
      proxyReq.setHeader('Authorization', 'Token ' + req.session.authToken)
    }
    // workaround for bodyParser incompat
    // https://stackoverflow.com/questions/25207333/socket-hang-up-error-with-nodejs/25651651#25651651
    if (req.body) {
      let bodyData = JSON.stringify(req.body)
      // in case if content-type is application/x-www-form-urlencoded -> we need to change to application/json
      proxyReq.setHeader('Content-Type','application/json')
      proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData))
      // stream the content
      proxyReq.write(bodyData)
    }
  },
  async onProxyRes(proxyRes, req, res) {
    // if the API returns a 401, the token can be considered invalid. Delete the token.
    if (proxyRes.statusCode === 401) {
      delete req.session.authToken
      await req.session.save()
    }
  }
}))

module.exports = {
  path: '/api',
  handler: app
}

Dockerfile

FROM node:latest
ENV HOST 0.0.0.0
ADD . /app
WORKDIR /app
RUN npm install