Serving Asupice with NGINX

General
1

Hi I would like to know how i can display the auspice tree in my website via iframe? I am trying to use nginx with this config for

 location /auspice {
        proxy_pass http://127.0.0.1:4000/auspice;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

and in frontend i am calling the api via “/auspice/dataset/cov” (data is in localhost:4000/auspice/cov)

but the tree isn’t visible in my website! please help!!! (please let me know if you need more information)

2

Hi @mhananda, welcome. I’m not sure I’m clear on your exact setup, but if you can access Auspice directly (on the same host) at http://localhost:4000/auspice/cov and see your tree, then with the reverse proxy config above I’d expect it to be visible at /auspice/cov, not /auspice/dataset/cov, e.g.:

<iframe src="/auspice/cov" …></iframe>

If that’s not getting you in the right direction, then can you share more of your configuration, server logs, and screenshots of what you’re seeing in the browser (including address bar)?

3

image
image1573×737 60.8 KB

my apologies. here is the image provided for the frontend code. and

and this is the nginx config file

location /auspice {
proxy_pass http://127.0.0.1:4000/auspice;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

i am using a javascript code to keep running the auspice server (localhost:4000) via pm2.

here is the pm2 log

1|auspice- | 2025-03-11T10:03:05: Auspice: GET DATASET query received: prefix=avian/flu
1|auspice- | 2025-03-11T10:03:07: Auspice: GET AVAILABLE returning locally available datasets & narratives
1|auspice- | 2025-03-11T10:03:07: Auspice: GET DATASET query received: prefix=avian/flu&type=root-sequence
1|auspice- | 2025-03-11T10:19:03: Stopping Auspice server…
1|auspice- | 2025-03-11T10:19:03: Starting Auspice with datasetDir: /home/website/backend/auspice
1|auspice- | 2025-03-11T10:19:04: Auspice:
1|auspice- | 2025-03-11T10:19:04:
1|auspice- | 2025-03-11T10:19:04: ---------------------------------------------------
1|auspice- | 2025-03-11T10:19:04: Auspice: Auspice server now running at http://localhost:4000
1|auspice- | 2025-03-11T10:19:04: Serving auspice version 2.62.0
1|auspice- | 2025-03-11T10:19:04: Looking for datasets in /home/website/backend/auspice
1|auspice- | 2025-03-11T10:19:04: Looking for narratives in /home/website/backend
1|auspice- | 2025-03-11T10:19:04: ---------------------------------------------------
1|auspice- | 2025-03-11T10:19:04:
1|auspice- | 2025-03-11T10:19:04:

and sadly, I am seeing nothing in the iframe, its blank!

some background information about the project

I am running a mern app. and the tree is a component in the website. and i am hosting that website via nginx.
also noteworthy, i am running auspice as auspice view, haven’t built it yet (auspice build). in my developer console, i see the api gets 200 status.

I don’t know where to find the /dist directory and where to put then.

I am sorry I am new to this,
thank you!

4

That’s helpful info, thanks. I see what you’re trying to do now.

Reverse proxying Auspice at a subpath, e.g. /auspice, is a bit complicated because Auspice very much expects to be at the root path, e.g. /, and will make client-side requests from JS based on the client-side path. It takes building a customized version of Auspice and the right bits of reverse proxy configuration and dataset naming to get all the paths to line up properly to work thru the proxy. Doable, but a bit of work. Unfortunately we don’t have a complete example of this at hand, or I’d point you to it.

It’s often easier to allow direct access to Auspice on the same frontend host but another port (or a different host). Then iframing it is straightforward; it’s just like you do in dev_mode in your code screenshot but with a publicly-accessible host instead of localhost.

Is that an option for you?

5

I am sorry i am having a little hard time getting it to work. I do have a different domain/host which i can use. (e.g. auspice.mhananda.com). i am using this in the iframe src. but how do i proxy this to localhost:4000? i am trying nginx but its showing 404 for the link(auspice.mhananda.com)!
Thanks!

6

I finally got it to work!!!