Hosting PlutoSliderServer on Digital Ocean

Hi there,
I have been using @fonsp 's Pluto for a bit and I am quite satisfied with it.
My next objective is setting up an interactive PlutoSliderServer to show some projects I have been working on.

In order to achieve this goal, I have tried following this guide and the ReadMe of the official repository, failing.

Here are the precise steps I have followed.

  1. Created a Droplet on DigitalOcean, with Ubuntu.
  2. Downloaded the following repo, in order to use the template notebook, GitHub - JuliaPluto/static-export-template: Demo page:
  3. Following this snippet, I have created a julia env and installed PlutoSliderServer inside it.
  4. Installed nginx and enabled it.
  5. Updated all packages and installed Julia following this snippet
  6. Created the service and the startups scripts, then enabled and started them.
  7. Checked if everything is running. Pluto looks to be running.

Now, I have several questions/problems.

  1. In this moment, I haven’t deployed the test notebooks on GitHub Pages. As far as I understand, it is possible to put the static HTML on GH Pages and run the server from a cloud service or host everything in the same place. Which is the recommended approach?
  2. After I start the pluto service, if I get disconnected (this maybe due to a poor internet connection) and I try to reconnect to the Droplet, I cannot reconnect: connection timed out.
  3. I don’t know understand exactly what I have to do. I don’t even have an error message to show to you. I have no experience with web development and so I do not even know what I should ask to you.

Is there any updated tutorial that I can follow? Btw, if you have suggestion on what I should be doing, I will follow your suggestions.

Thank you for your help,
Marco

3 Likes

That’s great to hear @marcobonici !

The blog post by Connor Burns is awesome, it gives a good overview of what the different parts are, and how they interact, but the installation instructions are outdated. I would recommend destroying the digitalocean droplet, creating a new one, and following the “Sample setup” from the PlutoSliderServer README. (Be sure to read the entire readme before you start!) I have recently followed these instructions on a digitalocean droplet and it worked great!

If you get disconnected after starting the service, this might be a sign that your droplet ran out of RAM, and it crashed and rebooted. You can verify this by going to your droplet’s page on digitalocean.com and looking at the memory graph. Do you see the memory spike up to 100%, and then drop down again? That means that you are running out of memory. A sawtooth wave pattern means that it is happening on every reboot.

And about question 1: I would start off not using GitHub Pages, and only using your digitalocean server. Later, when you are more comfortable with the setup, you could use a separate github pages setup (or better yet: netlify) to host the HTML pages, which link to your digitalocean server for interactive bond requests (using the Export_slider_server_url configuration, example).
The advantage would be reduced downtime (the website stays online if your digitalocean server crashes), permanent archival (github pages is free, so you can keep the non-interactive notebook online for a long time) and faster page load times (netlify has a fast, global CDN).

3 Likes

First of all, I want to thank fonsp and all the other developers for the very wonderful work they have been doing. I have been very impressed with the Computational Thinking course website at MIT and now I am thinking of doing something similar for a course I will teach in the Spring. I was following the Sample Setup instructions with a Vultr VM and this repo.

I believe I have been able to successfully run the SliderServer within the VM. Using run_directory("myfile.jl"), I am able to ssh tunnel into the VM and confirm that the slider server is indeed functioning as it should.

However, now I am lost on how to connect this server with a Netlify deployment. I have spent the better part of a week without any success.

I cannot find any instructions or tutorials on how to use Netlify with the PlutoSliderServer. Can someone point me in the right direction?

Sorry I missed the message @iabraham ! Next time, feel free to tag @fonsp or to reach out some other way! We definitely don’t want you to struggle for a week! Just send us an email, issue, or join our weekly video call :slight_smile:

If you open your netlify app https://mriqc-demo.netlify.app/mriqc.html with Chrome and press F12, you can see the error in the console: you site is server over https (:+1:), but the PlutoSliderServer is served over http (:-1:). For CORS security, a site on https is not allowed to request a resource over http.

Your PlutoSliderServer is currently directly using an IP address (http://45.63.65.124/). The easiest way to get HTTPS is to buy a domain name (you can use https://njal.la/ or other registrars), and set it up with CloudFlare DNS to get their https proxy.

It also looks like the two are out of sync: http://45.63.65.124/ and https://mriqc-demo.netlify.app/mriqc.html are not listing the same notebooks.

Alternatively, you can set up your site without netlify, and just use the PlutoSliderServer as your only server. This setup is simpler, easier to maintain, less error-prone. The netlify setup is better if you want to really optimize page load speeds, and you are expecting large amounts of traffic.

An example of this setup is GitHub - ClimateMARGO/interactive: Interactive Pluto notebooks about ClimateMARGO.jl , which I set up by following the sample setup in GitHub - JuliaPluto/PlutoSliderServer.jl: Web server to run just the `@bind` parts of a Pluto.jl notebook.