Shinyproxy: Mobile Ansicht

Erstellt am 9. Juli 2021  ·  6Kommentare  ·  Quelle: openanalytics/shinyproxy

Hallo, wenn Sie ShinyProxy verwenden, anstatt die Apps direkt über Docker bereitzustellen, geht die Reaktionsfähigkeit der Apps in mobilen Geräten verloren.

Ich habe gesehen, dass es eine PR gibt, die versucht, dies zu lösen. Irgendeine ETA, wann dies implementiert werden könnte?

Hilfreichster Kommentar

Tolle Vermutung! 😉 Das hat perfekt funktioniert, danke.

Falls es für andere nützlich ist, habe ich Folgendes getan:

  1. Fügen Sie ./application/templates:/opt/shinyproxy/templates zu volumes in shinyproxy.yml
    image

  2. Fügen Sie alle Vorlagen zum Ordner 1col hinzu.
    image

  3. Bearbeiten Sie das Tag head aller Vorlagen:
    3.1. Fügen Sie <meta name="viewport" content="width=device-width, initial-scale=1"> hinzu, damit Thymeleaf auf Mobilgeräten gut funktioniert.
    3.2. Bootstrap-Aufrufe manuell hinzufügen
    3.3. Titel manuell hinzufügen
    3.4. Ändern Sie den Verweis auf CSS-Dateien entsprechend der neuen Ordnerstruktur .
    3.5 Favicon-Referenz hinzufügen ( siehe auch für Favicons beim Starten einer App).
    image

  4. Bearbeiten Sie die HTML-Vorlagen nach Ihren Wünschen. Hier ist beispielsweise ein netter Trick , um einige Apps im Direktmodus und andere im Iframe-Modus bereitzustellen, wenn Sie dies tun möchten.

  5. CSS-Dateien hinzufügen (zu 1col/assets/css), 1 , 2 , 3
  6. Bilder für die Apps und das Favicon hinzufügen (zu 1col/assets/img)
  7. Fügen Sie template-path: ./templates/1col zu application.yml (direkt unter proxy: )
  8. Shiny-Proxy-Stack erneut bereitstellen: cd shinyproxy-docker-swarm-demo/ , export APP_DOMAIN=app.example.com und docker stack deploy -c shinyproxy.yml shinyproxy
  9. Genießen! 🚀

Alle 6 Kommentare

Hallo @algo-se,

Der verlinkte PR nimmt nur Änderungen am Standarddesign vor. Sie können das gleiche Ergebnis mit einem benutzerdefinierten Design erzielen. Mehr Infos und Beispiele hier

Es gibt auch eine Problemumgehung, bei der Sie /app_direct/<app_name> -Endpunkte verwenden können, die den App-Inhalt direkt ohne den Iframe bereitstellen, der Probleme auf Mobilgeräten verursachen kann.

Oh ich verstehe, danke für die Klarstellung @dseynaev! Müssen Sie also ein benutzerdefiniertes Design verwenden, um app_direct -Endpunkte auf der Zielseite zu aktivieren? Gibt es eine andere Möglichkeit, können Sie dies über die application.yml tun?

Damit die Zielseite app_direct -Links verwendet, benötigen Sie in der Tat ein benutzerdefiniertes Thema. Es gibt leider keine Möglichkeit, dies von application.yaml aus zu tun (es sei denn, Sie haben nur eine App, in diesem Fall könnten Sie die landing-page -Einstellung verwenden, um die Zielseite zu überspringen).

Ich habe diese Schritte befolgt, aber ich kann keine Änderungen feststellen.

Um Shiny Proxy einzurichten, habe ich dieses Tutorial verwendet, also verwende ich Docker Swarm.

Meine Ordnerstruktur ist:
//home/myuser/shinyproxy-docker-swarm-demo/
├── Anwendung
│ ├── Anwendung.yml
│ └── Vorlagen
├── shineproxy.yml
└── usagestats.yml

Der Ordner templates ist der Ordner aus den Shinyproxy-Config-Beispielen.

In application.yml habe ich hinzugefügt: template-path: ./templates/1col

Damit die Änderungen wirksam werden, habe ich Shiny Proxy neu gestartet: docker service update shinyproxy_shinyproxy --force aber alles blieb gleich. Irgendwelche Ideen?

Wenn ich mir das von Ihnen verlinkte Tutorial anschaue, würde ich vermuten, dass Sie den Vorlagenordner in den Shinyproxy-Container einhängen müssen (unter volumes in der Docker-Compose-Konfiguration shinyproxy.yml ).

Tolle Vermutung! 😉 Das hat perfekt funktioniert, danke.

Falls es für andere nützlich ist, habe ich Folgendes getan:

  1. Fügen Sie ./application/templates:/opt/shinyproxy/templates zu volumes in shinyproxy.yml
    image

  2. Fügen Sie alle Vorlagen zum Ordner 1col hinzu.
    image

  3. Bearbeiten Sie das Tag head aller Vorlagen:
    3.1. Fügen Sie <meta name="viewport" content="width=device-width, initial-scale=1"> hinzu, damit Thymeleaf auf Mobilgeräten gut funktioniert.
    3.2. Bootstrap-Aufrufe manuell hinzufügen
    3.3. Titel manuell hinzufügen
    3.4. Ändern Sie den Verweis auf CSS-Dateien entsprechend der neuen Ordnerstruktur .
    3.5 Favicon-Referenz hinzufügen ( siehe auch für Favicons beim Starten einer App).
    image

  4. Bearbeiten Sie die HTML-Vorlagen nach Ihren Wünschen. Hier ist beispielsweise ein netter Trick , um einige Apps im Direktmodus und andere im Iframe-Modus bereitzustellen, wenn Sie dies tun möchten.

  5. CSS-Dateien hinzufügen (zu 1col/assets/css), 1 , 2 , 3
  6. Bilder für die Apps und das Favicon hinzufügen (zu 1col/assets/img)
  7. Fügen Sie template-path: ./templates/1col zu application.yml (direkt unter proxy: )
  8. Shiny-Proxy-Stack erneut bereitstellen: cd shinyproxy-docker-swarm-demo/ , export APP_DOMAIN=app.example.com und docker stack deploy -c shinyproxy.yml shinyproxy
  9. Genießen! 🚀
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen