How to make the new Genie work behind nginx about genie.jl HOT 12 CLOSED

When the BASEPATH var is set, all asset links generated by the app will have a base path inserted. When the user browser requests a link, the reverse proxy will look at the base path and direct the request to the appropriate app. If you intend to access the app directly instead of through the reverse proxy, you have to remove the BASEPATH variable.

I don't think there's a way for the Genie app to handle routes with basepath and without at the same time unless you implement some complicated logic. I believe this is the same for every framework out there. The way I do it is:

• Don't set the BASEPATH during development so that I can access the app at localhost:8000/
• Configure the BASEPATH when deploying since the app will be behind a reverse proxy

from genie.jl.

There is a description in the new doc: https://learn.genieframework.com/docs/reference/workflow/nginx-reverse-proxy.
I propose to add a link to this config also here: https://learn.genieframework.com/docs/guides/deploying-genie-apps

from genie.jl.

@MariusDrulea What was the issue with the blank page? Sounds like no sockets access maybe?

from genie.jl.

FYI @PGimenez

from genie.jl.

@MariusDrulea What was the issue with the blank page? Sounds like no sockets access maybe?

I've seen some comment about Genie v6 using HTTP instead of websockets. Is this correct?

from genie.jl.

@MariusDrulea What was the issue with the blank page? Sounds like no sockets access maybe?

I've seen some comment about Genie v6 using HTTP instead of websockets. Is this correct?

Web sockets is the most efficient method for real-time data sync and it's the default. There is AJAX (HTTP) fallback available (it's been available for a couple of years), mostly to be used with hosting that doesn't allow web sockets. We're also working on adding SSE support - it's already available in Genie (v5) for implementing routes and handlers over SSE. But there is no support yet for Stipple data sync.

from genie.jl.

@MariusDrulea @awojtas-r, I believe the issue here is that NGINX is not configured to handle websockets. Here's how to get it working:

1. Set the BASEPATHenv variable to the desired path prefix, e.g., BASEPATH="/genieapp"
2. Add websocket-specific configuration to the nginx config:

server {
  listen 80;
  listen [::]:80;

  server_name   test.com;
  root          /home/ubuntu/MyGenieApp/public;
  index         welcome.html;

  location /genieapp/ {
      proxy_pass http://localhost:8000/;
      #websocket specific settings
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
  }
}

from genie.jl.

@PGimenez thanks for the update.

The above setting works nicely when we use test.com/genieapp.

However, localhost:8000 no longer finds the css files and the page is without styling. And this is because the style files have the following link: link href="[/genieapp/stipple.jl/v0.27.17/assets/css/stipplecore.css]. However, this link only works fine through nginx and not through localhost.

During development, people might prefer to have both links available. So, how can we make both links work?

from genie.jl.

If I don't set the env basepath and in nginx have location / {...}, then both test.com and localhost:8000 do work nicely. So it seems to me genie shall be able to handle a /genieapp basepath.

from genie.jl.

Another thing, make sure that all links pointing to routes or assets in your app have the base path prefix. You can use Router.link_toto automatically handle this:

julia> @page("/foo/bar/baz", "nop")
julia> routes()
10-element Vector{Genie.Router.Route}:
 [GET] /foo/bar/baz => #5 | :get_foo_bar_baz
 
julia> Router.to_link(:get_foo_bar_baz)
"/foo/bar/baz"

julia> Genie.config.base_path = "/my/hosting/thing"  # use this to change the base path if Genie is already loaded. Otherwise set the BASEPATH env var before running the app
"/my/hosting/thing"

julia> Router.to_link(:get_foo_bar_baz)
"/my/hosting/thing/foo/bar/baz"

For example, we use this in the navigation links of the multipage app demo:

cell(style="display: flex; justify-content: space-between; align-items: center; background-color: #112244; padding: 10px 50px; color: #ffffff; top: 0; width: 100%; box-sizing: border-box;", [
    cell(style="font-size: 1.5em; font-weight: bold;",
        "Genie workshop"
    ),
    Html.div(style="display: flex; gap: 20px;", [
        a(href="$(Router.link_to(:get_eda))", style="text-decoration: none; color: #ffffff;",
            "Exploratory data analysis"
        ),
        a(href="$(Router.link_to(:get_ml))", style="text-decoration: none; color: #ffffff;",
            "Neural network training"
        ),
        a(href="$(Router.link_to(:get_api))", target="_blank", style="text-decoration: none; color: #ffffff;",
            "API"
        )
    ])
])

I'll add this info to the NGINX page in the docs

from genie.jl.

@MariusDrulea can we close this issue?

from genie.jl.

The setup works, the issue is fully solved.

from genie.jl.