How can I publish my app on a website like google site?

Hi, I was wondering if someone could give me a hand with my problem.

I have developed an app with bokeh and it works perfectly when I use the command ‘bokeh server–show my_app.py’.

I am trying to put this app on google sites in order to create an App that people can use. The problem, is that the easiest way seems to be to use the code in ‘html’ something that I had before introducing buttons, select and something else that modifies functions of my app in real time.

I understand that there might be a way to pass all my code written in python to html so I can upload it to google sites but I can’t find it.

Thanks in advance for the help.

Charlie.

As far as I know Google sites only hosts static HTML content, which means you will not be able to run a Bokeh server application there. There is ongoing work to take advantage of the cutting-edge “pyiodide” work for compiling Python into WASM but that is very early days, and nothing is released. You have two options:

• Create standalone HTML output with Bokeh, that only uses JS callbacks (no Python on_change)
• Host your Bokeh server app on some server somewhere that supports running python apps

Hello, thank you very much for your reply.

Regarding creating a standalone HTML was something I thought about but in my code right now I have both JS callbacks and Python on_change defined. In that sense, would it be possible to pass all interactions defined as Python on_change to JS callbacks? My understanding was that there was some limitation and that some interactions could only happen through Python on_change.

Regarding hosting my bokeh server app on another server where a python app can run, do you know of any that would be recommended? Looking at the Bokeh Apps I find on the official website I am totally impressed by how clean and good they look, they are awesome.

Thanks again in advance.

You would have to translate all your Python code into JavaScript code. That might be fairly easy, or it might be impossibly difficult. It depends entirely on what the Python code does, and what third-party libraries it calls out to. E.g. if your Python callbacks just do basic things then translating may be simple and straightforward. If your Python callbacks use OpenCV or TensorFlow then translating is difficult or impossible, because those things don’t exist in the browser.

Regarding hosting my bokeh server app on another server where a python app can run, do you know of any that would be recommended?

There are lot of options, I don’t really have anything specific to recommend. It depends entirely on your budget, any existing infrasructure or cloud services you might already use, etc.

Looking at the Bokeh Apps I find on the official website I am totally impressed by how clean and good they look, they are awesome.

Thanks for the kind words. For reference, those were created and deployed using AWS Elastic Beanstalk.

I have used Heroku to host my apps.

Heroku has (or at least had) a “free” tier and a hobby tier @ $7/month when last I checked.

I went with the hobby tier for my initial development bc it enabled me to use add-ons with databases, in-memory data stores, etc. useful to interact with user data in my particular applications.

If you decide to go that route, you can search this forum for setting up the server, and of course ask questions if you run into any issues.

Holoviz panel, which leverages the bokeh server also has info on their website about how to set up the configuration files to run a server on Heroku.

https://panel.holoviz.org/user_guide/Server_Deployment.html

If you want to use bokeh only without the panel layer, you would replace the panel serve ... syntax in the Heroku ProcFile with bokeh serve ....

There is also a requirements.txt file that Heroku uses to define which python packages and such are required to build your app. In that file, you would replace panel with bokeh for an app where you wanted to use only bokeh without the panel layer.

Hello, thank you very much for your help.

In principle I think I will try to pass it JS callbacks as it is a good exercise and google sites offers me enough flexibility, so I will give it a try.

I have some doubts about that part of the code, for that I have simplified the functions and I have some doubts for which I have thought to raise them in the forum so that all the members can see them, and if they have a solution, they could be of help to other people.

To continue with the good functioning of this forum, I have thought of opening new questions with another title to facilitate the access to other people.

Again, thank you for your help.

Best regards,

Charlie

Hello,

thanks for your comment.

As a test I tried to configure the Heroku page and I’m having some problems in the final part ‘git push heroku main’ but through some forum I hope I can solve it.

Again, thanks for the help.

Hi @Charlie

Sorry for your troubles with the Heroku deployment. Details on the specific nature of problems encountered will help others provide directed feedback.

If you login to the Heroku dashboard, do you see any logs/messages about what failed? This can help narrow down to problems building the application, launching the application, etc.

One of the most common reasons for a failure is that a required dependency is not included in the requirements.txt manifest of packages that your app uses. Without further details it is difficult to ascertain the problem in your setup.

For what it is worth, I did not use the “git push” method for updating builds on Heroku. I maintain a git repository for my development code, but when I want to specifically target it to Heroku, I used command line tools to do so.

I did my development on Mac OS X for these projects. In that environment, I used brew to install the heroku command line interface (CLI). The syntax was something like the following

brew tap heroku/brew && brew install heroku
heroku update
heroku plugins:install heroku-builds

From there, whenever I needed to rebuild an app, I navigated to the directory of my app under git version control and ran

heroku builds:create -a <my-app>

where my-app is the name of the application following bokeh’s directory structure.

Hello @_jm

I have tried several ways and I am a bit lost.

I have created a repository on Github with the following files:

‘Procfile’ where I put this:

web: bokeh serve --address=“0.0.0.0.0” --port=$PORT draft_html_short.ipynb --allow-websocket-origin=draftapp05032022.herokuapp.com

Then I have my ‘draft_html_short.ipynb’ file and a file called ‘requirements.txt’ where I have the libraries I define in the ‘draft_html_short.ipynb’ file.

Then I follow the instructions I see in Heroku and enter the following in my terminal:

$ heroku create draftapp05032022

$ heroku login

$ heroku git:remote -a draftapp05032022

$ git push heroku master

With this last step I get the following:

Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 8 threads
Compressing objects: 100% (12/12), done.
Writing objects: 100% (22/22), 7.44 KiB | 7.44 MiB/s, done.
Total 22 (delta 6), reused 20 (delta 6), pack-reused 0
remote: error: pathspec ‘.’ did not match any file(s) known to git.
remote:
remote: ! Heroku Git error, please try again shortly.
remote: ! See http://status.heroku.com for current Heroku platform status.
remote: ! If the problem persists, please open a ticket
remote: ! on https://help.heroku.com/tickets/new
remote: ! and provide the Request ID 460bd4af-3d98-4bbf-94f3-ac1e28b2d156
remote:
To https://git.heroku.com/test-app05032022.git
! [remote rejected] master → master (pre-receive hook declined)
error: failed to push some refs to ‘https://git.heroku.com/test-app05032022.git’

It doesn’t work either by changing ‘main’ to ‘master’, actually when I set:

$ git push heroku main

I found this:

error: src refspec main does not match any
error: failed to push some refs to ‘https://git.heroku.com/draftapp05032022.git’

But in the directory, the main branch is called ‘master’ so I understand that’s not the problem.

I’ve tried the example on the Heroku page containing the file ‘iris_kmeans.ipynb’ but I’m stuck with the same problem.

Thanks a lot again in advance.

Hi @Charlie

I do not typically work with notebooks. You mention the classical Iris clustering problem, and I see an example in the Holoviz panel directory.

I follow the example at GitHub - holoviz-demos/minimal-heroku-demo: This is a minimal example for deploying a Panel app on Heroku. verbatim and it successfully builds and deploys the app to a free dyno for me.

I only edited the Procfile to reflect the name of the app in the allowed websocket origin as enumerated in the readme for the example.

Screen Shot 2022-05-03 at 7.21.17 AM2262×856 76.2 KB

Hello,

the truth is that it is a bit strange because now I have been able to run to the end the example that we are discussing but the web page appears blank but I do not see any error.

Following this example, I should be able to publish my apps because in principle, unless you tell me otherwise, it would be the same process using any ‘python’ file (or jupyter notebook).

Heroku works fine although I don’t know if it would allow me to load ‘data.csv’ from the same repository, although I would still need to know what’s going on with the example that I’m not able to see.

Thanks for the help.

Hi @Charlie

Regarding the blank webpage, a possible cause is that the websocket origin does not match what is allowed as prescribed in your Procfile.

If you log in to the Heroku dashboard for your app, you should be able to see the application logs and it will tell you if that is the error (or if something else is causing the page to not render).

Data uploading mechanisms is a large topic in and of itself and is probably better started as a separate thread. It really comes down to what your specific requirements are - loading user provided data or canned data stored with your app, how big are the files, are there security considerations for the data, etc?

Hi, sorry for the delay in replying.

The page still comes up blank when I try it in Google Chrome but I don’t see any errors (I’m talking about the example we were discussing). I enter the app from my Heroku page and I don’t see anything strange, although something must be wrong because if I search for the page directly from Safari the app doesn’t appear.

The data I’m referring to will be a fixed dataframe with several variables and a lot of rows but it could be loaded as a .CSV from the beginning and I wouldn’t need to load it anymore.

Thanks!

If you log in to your Heroku dashboard, click on the app of interest (in case you have more than one), it should take you to a new view that includes all the top-level info for that application.

Along the righthand side, there should be a column labeled Latest Activity. This shows updates related to builds succeeding or failing, builds deploying, etc. Do you see anything there? If yes, does it all make sense and do you see that your application has been successfully built and deployed?

As a next step, there is a banner along the top of that same view for the selected app. At the far-right, there is a More widget, where you can see additional information. Select “View Logs”. This will pull up logs from the app server and show you any problems with it running, any connection attempts, and successful connections, etc.

Is that where you looked and reported “no errors”? Does the server not show any lines like the following, which I excerpted from my test case to deploy the iris example we’re discussing above. The connection messages on the server happen when a client uses their web browser to go to the site.

2022-05-06T21:34:34.481363+00:00 app[web.1]: 2022-05-06 21:34:34,481 WebSocket connection opened

2022-05-06T21:34:34.481786+00:00 app[web.1]: 2022-05-06 21:34:34,481 ServerConnection created

2022-05-06T21:53:57.030969+00:00 heroku[router]: at=info method=GET path="/iris_kmeans/ws" host=########.herokuapp.com request_id=6b64d763-5766-4b89-a830-bc05ca2b6e0d fwd="96.84.232.113" dyno=web.1 connect=0ms service=1162547ms status=101 bytes=18435 protocol=https

2022-05-06T21:53:57.028310+00:00 app[web.1]: 2022-05-06 21:53:57,028 WebSocket connection closed: code=1001, reason=None

Hello,

when I look at ‘view logs’ after having tried to enter the website and still seeing everything white, I don’t see anything similar to what you indicate. What I see are the following lines:

2022-05-07T09:56:37.094672+00:00 heroku[router]: at=info method=GET path="/static/js/bokeh.min.js?..

2022-05-07T09:56:37.137165+00:00 heroku[router]: at=info method=GET path="/static/extensions/panel/panel.min.js? …

2022-05-07T09:56:37.625035+00:00 app[web.1]: 2022-05-07 09:56:37,624 Refusing websocket connection from Origin ‘http://iris-kmeans-2.herokuapp.com’; use --allow-websocket-origin=iris-kmeans-2.herokuapp.com or set BOKEH_ALLOW_WS_ORIGIN=iris-kmeans-2.herokuapp.com to permit this; currently we allow origins {‘iris-kmeans.herokuapp.com:80’}

It’s quite weird because they won’t let me deploy by connecting the git hub to Heroku even if I authorize Heroku’s access to Github.

Thanks a lot!

Hi @Charlie

The logs are telling you there is a mismatch in the allowed connections per the comment in an earlier post.

This error in the logs specifically shows that you are trying to connect from iris-kmeans-2 but your Procfile seems to be set up to expect iris-kmeans. The URLs absolutely must match per bokeh’s requirements.

Hello,

I have finally seen the problem. It was a git hub issue, constantly linking the repository that didn’t contain the app.

Thanks for everything, it’s been a great help.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.