0

I have a fairly basic lit-html app that works locally when it's not build. However when I build it using polymer build using the following config:

{
    "entrypoint": "index.html",
    "shell": "src/school-home.js",
    "sources": [
    "src/**.js",
    "package.json"
    ],
    "extraDependencies": [
    "node_modules/@webcomponents/webcomponentsjs/bundles/**"
    ],
    "builds": [
    {"preset": "es6-bundled"}
    ]
}

This results in a successful build but for some reason I keep getting an error:

enter image description here

I just don't get why it doesn't work. This like the basics of the basics yet it doesn't get found?

Aside: I use nginx for windows since I want to test E2E with my developed APIs.

An additional issue is that I keep getting CORS error for my API calls even though they are on the exact same location?!!

Please help.

Edit:

My NGINX config:

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       cors-settings.conf;
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;


    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }

    server {
        listen       8000;
        server_name  localhost;    

    location /school {
        root /html/ing-school;
        try_files $uri $uri/ $uri.html /index.html;
    }   
    
    location ~ ^/(api|login|logout) {
        proxy_pass http://localhost:8080;
        proxy_set_header Connection "";

     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
    if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-    With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-    Range';
     }
       }

        location /ws {
            proxy_pass http://127.0.0.1:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}
reaper_unique
  • 2,916
  • 3
  • 28
  • 48
  • This error is related to your nginx config. What is in your nginx error log? – Ivan Shatsky Jun 19 '20 at 20:27
  • Are you sure you're serving the right build artifacts? That fetch request seems to indicate that there are imports in the code even though an `es6-bundled` build shouldn't have any. As for CORS: are the frontend and the APIs served on different ports? – Umbo Jun 21 '20 at 13:24
  • I added my nginx config. About the artifacts. I have a package.json with a build script that just runs polymer build and the build settings are the ones you see above. The missing favicon is because I don't have one so that's fine. As for the CORS, I made sure the reverse proxy points to the spring boot localhost. So in the front-end I /do a call /api and nginx should then pass it through to the spring boot localhost on 8080. – reaper_unique Jun 22 '20 at 06:30

0 Answers0