Tuesday, February 4, 2025
Latest:
Linux serverlinux web serverNETWORK ADMINISTRATIONS

Build Your Own Cloud Web IDE | Repl.it Clone

Hey everyone, In this video, we are going to build our own Cloud based web IDE similar to Repl.it, Codesanbox, Stackblitz, etc. We’ll understand how these power full cloud IDE works under the hood.

Quick Links
Full Stack Twitter Clone https://learn.piyushgarg.dev/learn/twitter-clone
Docker Course https://learn.piyushgarg.dev/learn/docker
Master NextJS 14 https://learn.piyushgarg.dev/learn/nextjs-14

Source Code: https://github.com/piyushgarg-dev/cloud-ide

Timestamps
00:00 Introduction
00:30 Exploring Projects
02:15 System Design
07:00 Coding Server
18:15 Setting up React Code
19:00 Building Web Terminal
31:25 Displaying Code Files and Folders
57:00 Code Editor
1:20:00 Testing our IDE
1:20:40 Outro

Video Titles
– How to build cloud ide
– How Web IDE works
– How to build Repl.it editor
– How to build Web IDE

Hashtags
#nodejs #react #socketio #webdevelopment #fullstackwebdevelopment #docker #codign #development #programming

source

by Piyush Garg

linux web server

You May Also Like

🛑 LIVE 🛑 AMA With Crypto Master 🛑 BTC & ALT Market watch 🛑 Malayalam Crypto|Crypto Tribe

Setting Up and Configuring a DHCP Server in Ubuntu

Alice AUSTIN

DNS High-Availability Tools – Open-Source Load Balancing Solutions

48 thoughts on “Build Your Own Cloud Web IDE | Repl.it Clone”

  • 12:20 while installing node-pty I have got my life's biggest error:

    npm ERR! code 1

    npm ERR! path D:Web Devweb-ide-piyush-gargnode_modulesnode-pty

    npm ERR! command failed

    npm ERR! command C:Windowssystem32cmd.exe /d /s /c node-gyp rebuild

    npm ERR! gyp info it worked if it ends with ok

    npm ERR! gyp info using node-gyp@10.0.1

    npm ERR! gyp info using node@20.11.0 | win32 | x64

    npm ERR! gyp info find Python using Python version 3.12.3 found at "C:Python312python.exe"

    npm ERR! gyp ERR! find VS

    npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config

    npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt

    npm ERR! gyp ERR! find VS checking VS2022 (17.9.34728.123) found at:

    npm ERR! gyp ERR! find VS "C:Program Files (x86)Microsoft Visual Studio2022BuildTools"

    npm ERR! gyp ERR! find VS – found "Visual Studio C++ core features"

    npm ERR! gyp ERR! find VS – missing any VC++ toolset

    npm ERR! gyp ERR! find VS checking VS2022 (17.9.34728.123) found at:

    npm ERR! gyp ERR! find VS "C:Program FilesMicrosoft Visual Studio2022Community"

    npm ERR! gyp ERR! find VS – found "Visual Studio C++ core features"

    npm ERR! gyp ERR! find VS – missing any VC++ toolset

    npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use

    npm ERR! gyp ERR! find VS not looking for VS2015 as it is only supported up to Node.js 18

    npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8

    npm ERR! gyp ERR! find VS

    npm ERR! gyp ERR! find VS ************************************************************

    npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio

    npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.

    npm ERR! gyp ERR! find VS For more information consult the documentation at:

    npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows

    npm ERR! gyp ERR! find VS ************************************************************

    npm ERR! gyp ERR! find VS

    npm ERR! gyp ERR! configure error

    npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use

    npm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:Users2017cAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gyplibfind-visuals

    tudio.js:113:11)

    npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio (C:Users2017cAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gyplib

    find-visualstudio.js:69:17)

    npm ERR! gyp ERR! stack at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

    npm ERR! gyp ERR! stack at async createBuildDir (C:Users2017cAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gyplibconfigure.js:69

    :26)

    npm ERR! gyp ERR! stack at async run (C:Users2017cAppDataRoamingnpmnode_modulesnpmnode_modulesnode-gypbinnode-gyp.js:81:18)

    npm ERR! gyp ERR! System Windows_NT 10.0.17134

    npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\2017c\AppData\Roaming\npm\node_modules\npm\node_modules\nod

    e-gyp\bin\node-gyp.js" "rebuild"

    npm ERR! gyp ERR! cwd D:Web Devweb-ide-piyush-gargnode_modulesnode-pty

    npm ERR! gyp ERR! node -v v20.11.0

    npm ERR! gyp ERR! node-gyp -v v10.0.1

    npm ERR! gyp ERR! not ok

    npm ERR! A complete log of this run can be found in: C:Users2017cAppDataLocalnpm-cache_logs2024-05-09T07_07_23_580Z-debug-0.log

    What the heck?? How do I solve it?? although I have done so many things in last two days installing vc, some tools, liberaries, etc. But I'm still getting this error!!

  • can you please teach us how to upload file to AWS s3 with Aws lambda function using MERN stack sir

  • Was waiting for the use of Docker , but I think this video doesn't has it.

  • Main ne video dekhna start hi kiya hai lekin abhi se Thank You Very Much bol raha hun Piyush Bhai…kyun ki mai ek project pe kaam kar raha hun jismein mai ek cloud IDE provide karna chahata thaa aur aap video le aaye…THANK YOU VERY MUCH and LOTS OF LOVE FROM ODISHA ❤

  • Ek system design ki playlist mil jaati aapke channel se to hm logo ka bhi bhala ho jata because your explanation is different from other and I love it♥️

  • I think CORS is a very good topic. You must need to make a video on that.

  • why is node-pyt not installing
    anyone's having the same issue?

  • Comes with another video on how we can spin up docker container for every user? Because if multiple use is going to use same folder then its going to be messy

  • You are PRO for building the Best System😎
    Next Build Own Devin Ai🤑😱

  • What a class bro,
    1) superb communication
    2) Great system design
    3) simple & easy to understand

    Thank you piyush bhai ❤ respect to you

  • Great explanation but, We'll ensure to integrate Docker for easier deployment and consider storing the code on S3 instead of the server.
    Regarding security, we'll address the root directory access issue and implement safeguards to prevent unauthorized deletion of the server or access to other users' code.

    Also Build your own – "app,eraser,io"

    Make a video on that bro. It will be helpful.

  • Please make a video for explaining how you research to create development tools

  • Can someone please tell can we use these projects for the resume? This one and last others built by him

  • What a awesome video. I beg you to please do a video explaining how can we learn the same thing or be like you, please don't ignore this comment and create a roadmap for nooobs like us. Please

  • @piyush > I'm not a backend guy but i have been constantly watching your videos from a long journey.whenever i watch your videos i feel motivated to start! Thanks for uploading such peak content man 🤝 highly appreciate your efforts

  • Around 24:00

    UseEffect render twice in development mode? I wasn't aware of this. If it for Vite only?

  • Uska content or knowledge kisi bhi paid courses walo se aachha hai

  • you believe or not but I think about it next video will be about vs code or extension kind of thing.

  • Most under rated youtuber
    Content is 100x better than bhaiya didi paid courses where they taught only crud e commerce app

  • Hey, I want the code to retrieve public IP of container you start on demand.

Comments are closed.