Python Playground

Interactive Playground for Python

Features

Open python files from public GitHub repository.
Demo
Unique URL for every python code/file.
Demo
Embeddable in the documentations.
Demo
Show the python traceback as a result if errors occur.
Demo
Autocompletion for Python builtins.
Export the code to .py file.
Mobile friendly.

Goal

The original goal of this project is to have interactive examples in the
documentation of the python projects like the documentations of the popular
JavaScript frameworks.

However since this app is running on the free tier of Netlify and Heroku, we
cannot install every python package due to the storage size, memory limit, and
version conflicting can occur, too.

So, instead we make a basic app with Python only and let the projects’
maintainers install the required dependencies for their python projects.

Usage

To use this app for the python projects:

Fork this repository.
Register an account for Netlify and
Heroku.
Put the extra python packages in api/requirements-extra.txt which needs to
be creted.
Deploy the frontend app on Netlify from your forked repository.
- Login with your account at https://app.netlify.com.
- Choose New site from Git.
- Choose GitHub.
- Choose your forked repository.
- Click Deploy site. (Do not worry about the build command and publish
  directory. Those are already preconfigured.)
- Change the site name in the Site Settings. (The site name will be used
  as the environment variable in the backend app)
Deploy the backend app on Heroku from your forked repository.
- Login with your account at https://heroku.com.
- Choose Create new app from New dropdown at the top right corner.
- Give an app name and Click Create app.
- Install Heroku CLI as per your OS.
- Type heroku login in the terminal.
- Type heroku stack:set container -a <your-app-name> in the terminal.
  Replace your-app-name with the previous given app name. This command set
  the stack of your heroku app to be container which is basically docker.
  (This step is required since we are going to deploy the backend app as the
  docker image)
- Choose Connect to GitHub. Choose the forked repository.
- Go to the app Settings. Click Reveal Config Vars.
  - Set KEY to be PG_FRONTEND_SITE_NAME.
  - Set VALUE to be your netlify site name. Only the site name is
    required. You can omit .netlify.app.
  - If the frontend app will be deployed from custom domain url, set
    CUSTOM_DOMAIN_URL as KEY and your custom domain url as VALUE.
    This custom domain url has to be full URL. If you are not sure
    about the custom domain url, use the output of location.origin in
    Console tab of DevTool in the browser.
- Go back to Deploy tab. Click Deploy Branch.
Go back to the frontend app on Netlify. Click Site settings.
- Click Build & Deploy in the left pane. Choose Environment.
- Set PG_BACKEND_SITE_NAME as key and the name of the backend app as value.
- And redeploy the site.
You have successfully deployed your own version of the Python Playground.
Since most python projects are using
Sphinx as a documentation generator,
we have made a sphinx extension –
sphinxcontrib-playground.
Refer to
its documentation for
the usage.
To open a python file from GitHub, append the Playground URL + ? in front
of the github url. For example, if the github url is
https://github.com/toyai/python-playground/blob/main/api/main.py, then the
playground url to open that file will be like:
https://python-playground.netlify.app/?https://github.com/toyai/python-playground/blob/main/api/main.py.

NOTE

? is required. https:// can be omitted if you wish though not required.

Tech Stack

Contribution

See Contributing Guide.

Acknowledgements

This project is heavily inspired by (alphabetically):

License

MIT