quarto-ext / shinylive

Quarto extension to embed Shinylive for Python applications
https://quarto-ext.github.io/shinylive/
MIT License
150 stars 8 forks source link

Issue generating example shinylive output on windows 10 #3

Open Dariom92 opened 2 years ago

Dariom92 commented 2 years ago

I am unable to get the example code shown on the readme to correctly render as a shiny app on windows 10. I created a quarto project with the below files an ran quarto render and got the following output:

pandoc
  to: html
  output-file: ShinyQuarto.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png

metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: Quarto Basics

WARNING: Specified QUARTO_DENO does not exist, using built in deno
Output created: ShinyQuarto.html 

The rendered .html just shows the code in the shinylive python cell as plain text rather than showing the app itself.

Quartro version: 1.2.247 python version: 3.9.13

ShinyQuarto.qmd

```
---
title: Quarto Basics
format: html
filters:
  - shinylive
---

This is a Shinylive application embedded in a Quarto doc.

```{shinylive-python}
#| standalone: true

from shiny import *

app_ui = ui.page_fluid(
    ui.input_slider("n", "N", 0, 100, 40),
    ui.output_text_verbatim("txt"),
)

def server(input, output, session):
    @output
    @render.text
    def txt():
        return f"The value of n*2 is {input.n() * 2}"

app = App(app_ui, server)
```

_quarto.yml

project:
  title: "ShinyQuarto"
filters:
  - shinylive
wch commented 2 years ago

If you open up the Javascript console in your browser, what does it say?

Also, what files are in the docs/site_libs/quarto-contrib/ subdirectory? There should be shinylive-0.0.11 and shinylive-quarto-css.

Dariom92 commented 2 years ago

If you open up the Javascript console in your browser, what does it say?

Also, what files are in the docs/site_libs/quarto-contrib/ subdirectory? There should be shinylive-0.0.11 and shinylive-quarto-css.

You are correct there were some errors in the javascript console please see below.

I am not sure what "docs" folder are you referring to sorry. The extension is in the same folder as the quarto project under _extensions if that's what you mean.

EDIT: Sorry I have found two folders with the names you mention in the project area under ShinyQuatro_files/libs/quarto-contrib

JavascriptErrors

wch commented 2 years ago

I think the problem is that you're trying to open the file directly (via a file:/// URL) instead of through a web server (via http:// or https:// URL). You can use quarto preview to load it with a web server.

For security reasons, more and more modern JS and WASM code needs to be loaded through a web server.