Mobile view

[algo-se]

Hi, when using ShinyProxy instead of deploying the apps directly through Docker, the responsiveness of the apps in mobile devices is lost.

I´ve seen there is a PR that tries to solve this. Any ETA on when this could be implemented?

[dseynaev]

Hi @algo-se,

the linked PR only makes changes to the default theme. You can achieve the same result with a custom theme. More info and examples here

there is also a workaround where you can use /app_direct/<app_name> endpoints which will serve the app content directly without the iframe that can cause issues on mobile.

[algo-se]

Oh I see, thank you for the clarification @dseynaev! So do you have to use a custom theme in order to enable app_direct endpoints in the landing page? Is there any other way, can you do it from the application.yml?

[dseynaev]

to have the landing page use app_direct links you would need a custom theme indeed. There is afaik no way to do it from the application.yaml (unless you only have one app, in which case you could use the landing-page setting to skip the landing page)

[algo-se]

I´ve followed these steps but I can´t see any changes.

To set up Shiny Proxy I used this tutorial , so I´m using Docker Swarm.

My folder structure is:
//home/myuser/shinyproxy-docker-swarm-demo/
├── application
│   ├── application.yml
│   └── templates
├── shinyproxy.yml
└── usagestats.yml

templates folder is the one from the shinyproxy-config-examples.

In the application.yml I added: template-path: ./templates/1col

In order to make the changes effective I restarted Shiny Proxy: docker service update shinyproxy_shinyproxy --force but everything stayed the same. Any ideas?

[dseynaev]

Looking at the tutorial you linked my guess would be that you need to mount the templates folder into the shinyproxy container (under volumes in the docker-compose configuration shinyproxy.yml)

[algo-se]

Awesome guess! 😉 That worked perfectly, thank you.

In case it´s useful for other people, here is what I've done:

1. Add ./application/templates:/opt/shinyproxy/templates to volumes in shinyproxy.yml
   

2. Add all the templates to the 1col folder.
   

3. Edit the head tag of all the templates:
   3.1. Add <meta name="viewport" content="width=device-width, initial-scale=1"> so that thymeleaf works well in mobile devices.
   3.2. Add bootstrap calls manually
   3.3. Add title manually
   3.4. Change the reference to css files according to the new folder structure.
   3.5 Add favicon reference (also see this for favicons when launching an app).
   

4. Edit the html templates to your liking, for example here is a nice trick to serve some apps in direct mode and some in iframe mode, if thats something you would like to do.

5. Add css files (to 1col/assets/css), 1, 2, 3

6. Add images for the apps and the favicon (to 1col/assets/img)

7. Add template-path: ./templates/1col to application.yml (right under proxy:)

8. Redeploy Shiny Proxy stack: cd shinyproxy-docker-swarm-demo/, export APP_DOMAIN=app.example.com and docker stack deploy -c shinyproxy.yml shinyproxy

9. Enjoy! 🚀