DEV Community

WangGithub0
WangGithub0

Posted on

1

Try to run python in a Pure Browser-Based Web App running on Cloudflare

In the ever-evolving landscape of web development, the ability to run various programming languages directly in the browser has become a sought-after feature. Thanks to advancements in WebAssembly System Interface (WASI), developers can now explore new possibilities for running languages like Python, Go, and TypeScript in a pure browser-based web application.

WASI, short for WebAssembly System Interface, provides a standardized interface for running WebAssembly modules outside of a web browser. This allows developers to execute code written in different languages in a secure and efficient manner, opening up a world of possibilities for web applications.

Recently, there has been a push to enable support for languages like Python, Go, and TypeScript via WASI. By leveraging tools like esbuild wasm and integrating projects like python-wasi, developers can now run arbitrary Python code directly in the browser.

One of the key projects in this space is python-wasi, developed by nalgeon. This project provides a way to run Python code using WASI, enabling developers to execute Python scripts in a browser environment. By fetching the python.wasm file from a specified URL and providing the Python script to execute, developers can seamlessly run Python code and see the output in real-time.

I successfully tested it by using the following code snippet:

const url = "https://unpkg.com/@antonz/python-wasi/dist/python.wasm";

const pythonScript = `
a = 1
b = 2
c = a + b
print(c)
print("Hello World!")
`;

import("@antonz/runno").then(({ WASI }) => {
    WASI.start(fetch(url), {
        args: ["python", "-c", pythonScript],
        stdout: (out) => console.log(out),
        stderr: (err) => console.error(err),
    }).then(result => console.log(`exit code = ${result.exitCode}`));
});
Enter fullscreen mode Exit fullscreen mode

I guess I can combine it with ChatCraft in this way. But still need help to make sure if I need support the "function" and "run code".

This week I also fix a small bug "Show More..." button's text is improperly layered and visible through the options menu", I found the button uses zIndex={10}, so I just try to use zIndex={11} at first. Thanks Amnish provided a more suitable way by using Chakra theme theme.zIndices.dropdown.

Next week, I will keep working on combine python.wasm in ChatCraft.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay