Custom URL behind nginx and angular app

Support
1

Describe Your Question

  • A clear and concise description of what problem you are having.
    I am making an Angular application and want to open the ohif webapp in an iframe. I am using nginx to serve the application, and it works to retrieve index.html, but every file after that will return index.html content.

The static files are built using

  • Which OHIF version you are using?

What steps can we follow to reproduce the bug?

Initially, i tried with the development server variant, described here: iframe | OHIF making the iframe src value to point to https://[mydomain].com/ohif, and in nginx to have:

  location /ohif {
        root /usr/share/nginx/html/dicom-viewer;
        index index.html index.htm;
        add_header X-uri "$uri";

        try_files $uri $uri/ /index.html =404;
    }

The static files are built using this command: APP_CONFIG=config/my_config.js PUBLIC_URL=/ohif/ yarn run build
my_config.js contains routerBasename: '/ohif'

When loading the page containing the iframe, in the requests tab of the developer console, i can see that nginx is serving index.html correctly (every path is with /ohif/ in front), but when trying to serve app-config.js (or any other file referenced in index.html), the response I am getting is 200, but with the contents of index.html. In an attempt of debugging, I have found out that $uri from nginx is index.html for any file or API I am trying to serve.

If I try to set the source of the iframe to ./ohif and add the static files in a folder in the same place as the angular static files, an #document (https://[mydomain].com/ohif) is added in the iframe, making it go through nginx.

image
image723×58 4.99 KB

I should point out that I was able to make the iframe work without the use of nginx, by setting the src of the iframe with localhost:3000. The problems started when putting ohif behind NGINX. Any Ideas of what can I do?