This project provides a powerful web-based development environment with a code editor and terminal. It supports multiple files, a file explorer, resizable editor, terminal window(connected to a container's shell), a live preview and a persistent session management.
JWT has been used for Authentication & Authorization.
The frontend is built with React and TypeScript, using Monaco Editor for the code editor and xterm.js for the terminal emulation. Each user session is containerized using Docker and the terminal on the frontend is connected via websockets to this container's shell.
- Monaco Editor Integration: Provides a rich coding experience with support for multiple files.
- Resizable Windows: Users can resize the editor and terminal windows to suit their preferences.
- Persistent Code Storage: Code files are automatically saved on the backend as docker volumes, ensuring that no work is lost even after the browser is refreshed.
- Terminal Emulation: A terminal window powered by xterm.js allows users to compile code, run scripts, and interact with a shell directly from the browser.
- Docker Containers: Each user session is containerized, allowing for isolated and secure coding environments for multiple simultaneous users.
- Preview Window: Users can see the output of their HTML, CSS, and JavaScript code in real-time within a preview window.
- Frontend: React.js, TypeScript
- Code Editor: Monaco Editor
- Terminal: xterm.js
- Backend: Node.js, Express (for API handling and session management)
- Authentication & Authorization: JWT
- Realtime Connection: WebSockets (for realtime connection between xterm & corresponding docker container's shell)
- Database: MongoDB (for persisting user data), AWS S3 (User's source code files)
- Containerization: Docker (to isolate and manage user sessions)
- Node.js
- Yarn
- Docker
- MongoDB
-
Clone the repository:
git clone git@github.com:ascyrax/codedamn_pg.git cd codedamn_pg
-
Install dependencies:
backend
cd backend yarn install
frontend
cd ../frontend yarn install
-
Start the MongoDB server (ensure Docker is running if using a containerized instance):
Before starting MongoDB, ensure that it is properly installed on your system. You can download and install MongoDB from the official MongoDB website.
For macOS users who installed MongoDB using Homebrew:
brew services start mongodb-community
For Windows users, MongoDB can be started as a service if it was set up during installation. To start MongoDB using the Command Prompt:
net start MongoDB
If MongoDB was not installed as a service, you can start it manually with:
mongod --dbpath "C:\\path\\to\\data\\db"
Make sure to replace "C:\path\to\data\db" with the actual path to your data directory.
For Ubuntu users, if MongoDB was installed using the official MongoDB repository, it can be started with systemd:
sudo systemctl start mongod
To ensure MongoDB starts automatically on boot:
sudo systemctl enable mongod
sudo docker run --name mongodb -d -p 27017:27017 mongo:6.0
If MongoDB fails to start, check the MongoDB log files for any errors. The default location for log files is usually /var/log/mongodb on Linux and within your specified dbpath directory on Windows.
For more detailed installation and management instructions, refer to the official MongoDB documentation.
-
Start the Docker daemon
Before starting Docker, ensure that it is properly installed on your system. You can download and install Docker from the official Docker website.
For macOS users who installed Docker Desktop:
- Open the Docker Desktop application from your Applications folder.
- Docker will start automatically when the application runs. You can see the Docker icon in the menu bar, indicating that Docker is running.
For Windows users who installed Docker Desktop:
- Open Docker Desktop by clicking the Docker icon on your desktop or from the Start menu.
- Docker starts automatically with the application. The Docker icon in the system tray will show Docker's status.
For Linux users, Docker can be managed via the command line. Here's how to start Docker using the terminal:
- Open your terminal.
- Start Docker by running:
sudo yum install docker sudo systemctl start docker
sudo systemctl enable docker
If Docker fails to start, check the Docker log files for any errors. You can also restart Docker Desktop or your computer to resolve many common issues.
For more detailed installation and management instructions, or to troubleshoot issues, refer to the official Docker documentation.
-
Configure .env file for the backend
Create a .env file of your own which contains these 3 variables:
PORT=3000 MONGODB_URI=mongodb://localhost:27017/codedamn SECRET_KEY="YOUR_SECRET_KEY"
-
Run the backend server:
cd backend yarn dev
-
Run the frontend application:
cd frontend yarn dev
-
Open the Application: Navigate to
http://localhost:3000
in your web browser. -
Login / Register: Register if your are a new user. Login after registering.
-
Edit Files: Use the Monaco editor interface to edit the existing files. All changes are saved automatically to the database.
-
Resize Windows: Drag the borders of the code editor and terminal windows to resize them according to your preference.
-
Use the Terminal: Interact with the terminal to execute commands. Each command's output will be displayed within the terminal window. Files can be added or removed through the terminal. Live changes will be visible all across the editor.
-
Refresh the Page: Refresh the browser to test the persistence feature. Your code should be restored to the last saved state.
-
Preview Your Code: For web technologies like HTML, CSS, and JavaScript, use the preview window to see your code rendered in real-time.
-
FOR TESTING THE PREVIEW OF THE REACT APP PRESENT BY DEFAULT IN EACH NEW USER'S EDITOR FILES,
cd react yarn install && yarn dev --host
NOTE: YOU MUST DO yarn dev --host instead of just yarn dev. Reason is the usage of docker containers & how they expose their ports on the host.
YOU MIGHT NEED TO REFRESH THE PREVIEW SECTION (ONLY) TO SEE THE LIVE REACT APP.
- Docker Containers Not Starting: Ensure Docker is running and that you have the necessary permissions to start containers.
- Database Issues: Verify that MongoDB is running and accessible. Check the connection string in the backend configuration.
- Editor or Terminal Not Loading: Check the console for any errors. They may be related to dependency issues or misconfigurations in the setup.