# Basic Bonito app fails to be served

**URL:** <https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483>\
**Category:** Web Stack\
**Tags:** bonito\
**Created:** [November 11, 2024, 5:20am UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483 "2024-11-11T05:20:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cstjean](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cstjean/32/1444_2.png) [@cstjean](https://discourse.julialang.org/u/cstjean)\
**Post date:** [November 11, 2024, 5:20am UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483/1 "2024-11-11T05:20:13Z")

</div>

I’m trying to get a very simple Bonito (v4.0.0) app running, and I must be doing something horribly wrong because it’s not working well. Starting from [Deployment · Bonito (simondanisch.github.io)](https://simondanisch.github.io/Bonito.jl/stable/deployment.html)

```julia
using Bonito, Bonito.Observables
import Bonito.TailwindDashboard as D

app = App(DOM.div(D.Slider("nsamples", 1:200, value=100)), title="hello world")

port = 9384
url = "0.0.0.0"
server = Bonito.Server(app, url, port)

```

On [http://localhost:9384](http://localhost:9384), it works alright:

 ![{A4941084-E520-4D13-8D25-13A267C14EB3}](https://global.discourse-cdn.com/julialang/original/3X/9/8/98ff906c4c27b4051d8d5d1f4de1eb4b7d12c591.png)

but when I put in my own IP, as in http://MY\_IP\_ADDRESS:9384, it looks different, and the interactivity is broken (i.e. the nsamples number does not change when I move the slider)

 ![{246B31B9-3331-4668-8F8F-FFD1D32B8AE4}](https://global.discourse-cdn.com/julialang/original/3X/2/4/248a8c4040a0a7caf41816096234c7c073a279aa.png)

Am I missing something?

Disclosure: I am behind a firewall, but I have a non-firewalled colleague (@etpinard) who confirmed the above.

---

<div class="post-metadata">

**Author:** ![cstjean](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cstjean/32/1444_2.png) [@cstjean](https://discourse.julialang.org/u/cstjean)\
**Post date:** [November 11, 2024, 8:41am UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483/2 "2024-11-11T08:41:35Z")

</div>

I tried Genie, Oxygen, Mux (!) and Python’s Dash and they all have the same behaviour of loading a static page when accessed through `MY_IP_ADDRESS:port`. I’m going to blame the firewall unless new information comes to light.

---

<div class="post-metadata">

**Author:** ![etpinard](https://avatars.discourse-cdn.com/v4/letter/e/45deac/32.png) [@etpinard](https://discourse.julialang.org/u/etpinard)\
**Post date:** [November 11, 2024, 6:20pm UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483/3 "2024-11-11T18:20:47Z")

</div>

Using the simple script from the original post, this

![image](https://global.discourse-cdn.com/julialang/original/3X/9/2/92bad33e2c81712971f293286b467b9c76c691c4.png)

pops up in the devtools.

Looks like Bonito is trying to load something from `localhost`

---

<div class="post-metadata">

**Author:** ![blegat](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/blegat/32/217090_2.png) [@blegat](https://discourse.julialang.org/u/blegat)\
**Post date:** [March 9, 2025, 9:50am UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483/4 "2025-03-09T09:50:30Z")

</div>

You need to provide the `proxy_url` keyword argument to `Server`, e.g.

```julia
port = 9384
url = "0.0.0.0"
proxy_url = "http://132.10.187.234/"
server = Bonito.Server(app, url, port; proxy_url)

```

Of course, change the `proxy_url` to the url of your server

---

<div class="post-metadata">

**Author:** ![cstjean](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cstjean/32/1444_2.png) [@cstjean](https://discourse.julialang.org/u/cstjean)\
**Post date:** [March 10, 2025, 1:33am UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483/5 "2025-03-10T01:33:12Z")

</div>

Yes, see also [Serving an app with basic interactivity fails · Issue #270 · SimonDanisch/Bonito.jl](https://github.com/SimonDanisch/Bonito.jl/issues/270#issuecomment-2574406949)

It’s still not clear to me why one needs to specify the IP of the server (and why it’s called “proxy\_url”) 😟, but in any case it works now!

---

<div class="post-metadata">

**Author:** ![blegat](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/blegat/32/217090_2.png) [@blegat](https://discourse.julialang.org/u/blegat)\
**Post date:** [March 10, 2025, 8:05am UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483/6 "2025-03-10T08:05:56Z")

</div>

I don’t know how your server is setup but I following the [nginx guide in the docs](https://simondanisch.github.io/Bonito.jl/stable/deployment.html#nginx).  
So I have a nginx server block like:

```nginx
server {
    listen 8080;
    location /bonito/ {
        proxy_pass http://localhost:8081/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }
}

```

This means that when Bonito receives the request, it looks like `http://localhost:8081/` so it does not know what’s the server name. For all it knows, it looks like it’s being serving localhost so in the html page that it generates, it gets the javascript file with

```html
<script src="http://localhost:8081/assets/...-Bonito.bundled.js?..." type="module"></script>

```

But since your web browser that it reading that html file is not on the server where `localhost:8081` would work, you need to use `http://132.10.187.234`. By using the proxy setting, Bonito is aware that he’s seeing `localhost` only because it’s being redirected by `nginx` or similar and that in the webpage that is being served, it should use the original url instead.  
So it then writes the following which works:

```html
<script src="http://132.10.187.234/assets/...-Bonito.bundled.js?..." type="module"></script>

```

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [March 10, 2025, 3:32pm UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483/7 "2025-03-10T15:32:17Z")

</div>

I still wish to get rid of the proxy\_url with relative urls and maybe some JS magic, but even than it may be needed, e.g. for JuliaHub VSCode integration, where the plotpane is a div inside a huge complex html site (VSCode online) and the bonito connection needs to be proxied through a completely different URL…  
Unless we put the Bonito plotpane output in an iframe, but even than, how to figure out the URL of the iframe?  
But it could be still worth it to try reduce the cases where one needs to set it.

It’s just a bit of work, and I’ve noticed url schemes are quite sensitive to different browsers/contexts, since the way urls are interpreted doesn’t seem to be completely straightforward (note that this needs to work for Documenter, IJulia, VSCode, a Server, a fragment on a page, Pluto etc).

---

<div class="post-metadata">

**Author:** ![cstjean](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cstjean/32/1444_2.png) [@cstjean](https://discourse.julialang.org/u/cstjean)\
**Post date:** [March 11, 2025, 12:58am UTC](https://discourse.julialang.org/t/basic-bonito-app-fails-to-be-served/122483/8 "2025-03-11T00:58:46Z")

</div>

FWIW Genie.jl (as well as some Python package I tested) worked immediately on our server, without having to specify the server. Not sure how they achieve this.