Python Playground

Run python code securely and quickly in the browser!

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation

About The Project

Python is one of the most notorius languages in the industry. Known for its flexibility and english-like syntax, Python serves as a great language for beginners. As beginners may not have adequate development environments, Python Playground acts as a simple tool to get started with python.

(back to top)

Features

• Excellent code editing experience
  • Powered by Monaco, the editor that powers VS Code
• Rich python intellisense and syntax highlighting
  • Powered WebSockets and a Python Language Server Protocol (LSP) implementation
• Containerized python runtime environments to bolster server security
  • Powered by Docker
• Resizeable editor and output panes
• Built-in package manager to use the most cutting-edge pip packages
• Download code from brower directly into .py files
• Modern UI with a variety of light and dark themes

Built With

Python Playground uses modern frameworks and technologies to provide an ideal user experience with adequate security.

• React.js
• Tailwind CSS
• Node.js
• Express.js
• Docker
• Monaco Editor
• Python LSP

(back to top)

Getting Started

Prerequisites

• Node.js (with npm) version 16+
• Docker version 18+
• Python (with pip)

Installation

1. Clone the repo

   git clone https://github.com/UPDATE_LINK

2. Install client npm packages

   cd client # from the root of the project
   npm install

3. Install server npm packages

   cd server # from the root of the project
   npm install 

4. Install python LSP

   pip install python-lsp-server
   pip install python-lsp-server[yapf]

5. Find path of python LSP

   which pylsp # save this output

6. Create a .env file in server put the path there as PYTHON_LSP_SERVER_PATH
7. Start client (cd into client)

   npm run dev

8. Start server (cd into server)

   npm start

If the ports used by Python Playground are already in use, you can change the frontend port in client/vite.config.ts and/or change the backend port in server/core/index.js

(back to top)