I am able to see the outputs of voila or voici on my Desktop.How can I deploy it to my GitHub using index.html?I have tried changing .ipynb file to .html and deploy but it deploys it as code but not as output?
Not following what you mean because neither Voila or Voici would involve index.html?
It would help to talk specifics here. Voici is the most direct to deploy on GitHub Pages as it is supported and there is a guide. (The newer guide is here. I have used it to make several tests you can access from the link here.) However, while it mostly works, Voici development is still at an early stage and has several quirks. JupyterLite deployed on GitHub pages though is more developed and so if you don’t mind the code showing, it would be a better route for deploying useable strategies via GitHub pages these days. If you can use it, I’d recommend the xeus-python + JupyterLite demo because it supports pre-installing packages and so more stuff will work on start-up for your users without them needing to run install commands. I have used that to make my own repo here where ipycanvas works in sidecar to give a flavor of the possibilities. The guide for the pyodide-flavor of JupyterLite is here. You can try it in your browser using this link to get a feel for the possibilities and approaches needed.
Last I knew Voila wasn’t supported on GitHub Pages because it needs an active kernel and so a static site deployment, like GitHub pages, won’t work. If you want to use temporary MyBinder-served remote machine sessions to serve your repo, you can use Voila though fairly easily. I have several examples working here. The first example under ‘Direct Links’ there should work if you click on it and are patient, as I just tried it and it is confirmed working fine at present. (Alternatively, click here.)
So the two are very different and so conflating them in a single post is just adding to confusion about what you really want help with?
2 Likes
So voici or voila doesn’t need index.html to deploy. What are the files needed for the binder?
On the sample repos page of the Binder documentation, there’s a section ’ Interactive dashboard from notebook with Voilà’. If you examine the URL for the launch badge, you’ll see the demonstration repo is here. (It seems to be an oversight that there is no direct link to that repo, as there is for all the other examples.) That sample Voila repo should give you a good idea of what are the files needed to be used for deploying Voila from a repo on Github using MyBinder. In fact, it is even easier because you can just use that repo as a template to make a new repo. If you do that and edit the code to change the launch URL(s) for the badges accordingly, launches should work from your new repository that you’ll get using that as a template. (Just tried that here and you can look at the commits to follow the steps that happened).) Then you can further edit the content and packages to start to match what you need.
That section also links to Voila’s documentation on deploying to Binder.
1 Like
I am able to deploy using index.html but the output looks different for both.The cropping part looks missing for the jupyter deployment.
Before we get to my many questions and concerns below, can we take a step back? I tried to request to bring in specifics in one of my last replies.
Can you please include that when posting things like those screenshots? You basically just dropped two screenshots and expected us to understand what is going on. Your first one looks like you have something working but I am not familiar with the buttons on the side there? (But maybe there is a very new version of something I haven’t come across yet?) Can you describe what that is and what you followed to set it up?
This isn’t a route to active deployment that I know of. The app should serve the .ipynb file as an application at a URL. Voila and Voici make .ipynb files available as apps/dashboards. (Using the correct URL to serve derived file with an .html extension is though involved with Voici, but not inside in Jupyter in my experience.)
As I said in my reply just above your latest post, the sample repo should give you an idea of what types of files are involved and you’ll see that a .html is not one.
The kernel backing the active .ipynb is necessary. There’s no kernel tied to the .html as far as I know.
For your latest post:
I’d suggest that isn’t a ‘deployment’ in your second screenshot in your last post. It just looks like you opened the HTML inside Jupyter. Maybe I am misunderstanding?
Is that in Voici or Voila? In Voila when correctly installed & deployed alongside Jupyter, you can open the .ipynb file that will be the app/dashboard in Jupyter and get a preview of the app/dashboard rendering of the .ipynb file using the Voila icon.
Under my example Voila deployment here I have links of examples that will both open the .ipynb file in Jupyter in the session and go directly to the app/dashboard rendering. If you choose the .ipynb route, after it opens you should see the Voila icon that is a yellow wiggly line over a green one and you can choose that and see the app/dashboard rendering alongside the notebook in Jupyter.
However, you are on github.io in that first screenshot and so I assume probably you are using Voici? In my use, there are only .ipynb files. You can see the example repo content here. I have my own deployment here. You can see the app/dashboard rendering of mine using here and clicking through. You’ll note these do have .html extensions but you’ll also see they URL includes voici/render/ like in this example endpoint https://fomightez.github.io/voici-demotestMay24/voici/render/demo.html?. Your opening ofthat html in your second screenshot in your last post won’t have that type of URL and so I don’t expect it to work.
However, maybe I am misunderstanding Voici myself. I find iterating on developing in Voici to be slow because of no preview. Maybe you are suggesting there should be that possibility via the route in your second screenshot? I would imagine definitely need to trust the HTML which is something you haven’t done in that last screenshot.