Hosting Pyodide on Azure Static Web App

The post is showing how we host Pyodide on Azure Static Web Apps.

What is Azure Static Web Apps?

Azure Static Web Apps is a new service on Azure announced at Microsoft Build 2020.

What is Pyodide ?

Pyodide enable us to run Python on Web browser via WebAssembly. It is a related project of Iodide.

I wanted to try Azure Static Web App but am not familiar with JavaScript Frameworks at all. Since I have Python experience a little bit, I tried Pyodide.

Create Your Azure Static Web Apps

First of all, you need to create your own Static Web Apps for hosting your Pyodide App. There are some Static Web App templates (Angular, React, Vue or Vanilla) on GitHub and you can folk them.

In case of Pyodide, I think vanilla-javascript is good place to start and try.

After you created your Static Web App, you will find your GitHub repo has .github/workflows folder. It contains yaml file for GitHub Actions.

GitHub Actions automate your Build and Deploy workflow. This time you don't need to edit this yaml file because we just want to deploy our static files.

Set up index.html with Pyodide

After deploying, you can see your Web App. I wrote index.html on my repo below.

When you call Python in <script> tag, pyodide.runPython is needed. When you want to use packages, you can use loadPackage such as

$('#matplotlib').on('click', function () {
      pyodide.loadPackage(['matplotlib', 'numpy']).then(() => {
        var plot = pyodide.runPython(`<your Python Code !!>

and available packages are listed in Pyodide repository.

Push and Deploy

When you finish local development, let's push your code to GitHub.
GitHub Actions automatically deploy your code to Azure Static Web App.

You can use matplotlib or numpy on your browser. Available packages are here.

Tips

By developer tool, you can check whether Pyodide is loaded successfully or not. If successfully loaded, Python initialization complete show up on console.
If Pyodide fails with this message Unchecked runtime.lastError: The message port closed before a response was received., you can try in Secret Browser.