How to Set Up a Web-based Code Server on Linux

featured img

Imagine coding on your phone, tablet, or even a borrowed computer anywhere, anytime. Ditch the laptop lugging! Code-server is your personal, self-hosted cloud IDE, packing the full power of VS Code into your browser. Forget generic cloud IDEs; this is YOUR coding kingdom, securely hosted on your homelab server. Code-server means consistent development, accessible from any device, with your code and data always under your watchful eye.

What is Code-Server and Why Self-host It?

Imagine VS Code, unleashed from your desktop, accessible anywhere. That’s code-server. It’s like having a powerful coding machine in the cloud, accessible via your browser. Forget sluggish tablets; code-server shifts the heavy lifting to a remote server, delivering a responsive VS Code experience with full functionality: auto-completion, debugging, Git integration, and your favorite extensions. Develop on the go, maintain a consistent environment, and turn any device into a lean, mean coding machine.

Tired of digital landlords? Self-hosting unleashes total control: Your data, your rules. Build your digital fortress, complete with custom domain, impenetrable HTTPS encryption, and granular access controls. Scale your empire effortlessly, adapting to your every need.

Unleash your inner coding ninja! VS Code keyboard shortcuts are your secret weapon to warp-speed productivity. Grab this cheat sheet and prepare to level up your workflow!

Set Up code-server on Linux

Installing code-server is easy. We will be using Docker for the installation.

Run the following command to download the official code-server image from Docker Hub:

“`

sudo

docker

pull codercom

/

code-server “`

It ensures you have the latest version of the image available locally before creating a container.

Download Code Server Docker Image

Next, start a new code-server container in the background with a custom password and persistent storage:

“`

sudo

docker

run

-d

–name

code-server

-p

8443

:

8080

-v

$HOME

/code-server-data:/home/coder/project”

-e

PASSWORD

=

“my_password”

codercom

/

code-server “`

Start Code Server Container

Ready to launch your coding fortress? Once code-server is up and running, point your browser to http://localhost:8443. The gatekeeper awaits! Just punch in the password you created during thedocker runsetup and click “Submit” to unlock your personalized coding environment. Prepare for liftoff!

Access Code Server

Get Started With Code Server

Step into VS Code, anywhere. The familiar desktop experience unfolds before you, instantly accessible. Let’s explore what awaits:

File Explorer

Unleash the power of project exploration! Dive into a world of organized folders, instantly accessible files, and effortless creation. The Explorer isn’t just a tool; it’s your intuitive guide to mastering project structure, transforming chaos into seamless workflow.

File Explorer

Editor

The editor is the center area and serves as your main workspace. When you open a file, it appears here.

Code Editor

Here, you can write, edit, and format code just like in the desktop version of VS Code.

Terminal

The terminal is located at the bottom of the code server. You can open it from the top menu “Terminal ->New Terminal” or by pressingCtrl+ “`.

You can also use the keyboard shortcut keyCtrl+Shift+Cto access your terminal within code server.

Built In Terminal

Extensions

VS Code’s true power lies in its extensions. Think of them as superpowers, easily accessible through the Extensions tab. Transform your editor with sleek themes, enforce code quality with linters, and unlock support for any language imaginable – all just a click away. Unleash VS Code’s full potential.

Extensions

Supercharge your experience in a snap! Find the perfect extension with a quick search, then unlock its power with instant activation adding fresh features and boosting existing capabilities in a heartbeat.

Customizing Your Browser-based IDE

Open Settings

Now, a list of available themes will appear. Click on a theme to preview and apply it.

Select Theme

Moreover, you can easily install your preferred theme from the Extensions tab and activate it right away.

How to Set Up a Web-based Code Server on Linux

Want to fine-tune your coding environment even further? Dive into personalized settings! Just hunt down the gear icon – your gateway to a world of customization options. Click it, select “Settings,” and prepare to tailor your code server to perfection.

Customize Code Server

From here, you can customize editor behavior, font size, format, and much more.

Create and Run Your First Program in code-server

Create a new text file from theExplorerpanel or by pressing the shortcut keyCtrl+Alt+N:

Create New File

Click onSelect a languageor pressCtrl+K, thenMto select the desired language, such as Python.

Select Language

Now, paste the following code into it to print “Welcome to maketecheasier.com” three times on the console:

“`

for

i

in

range

(

3

)

:

print

(

“Welcome to maketecheasier.com”

)

“`

Got Python installed? Great! Next, hitCtrl+S– think of it as giving your creation a secret identity – and name it something memorable before hitting “OK” to unleash it into the digital world.

Save File

Now, pressCtrl+ “` to open the terminal and then run the Python script using the following command:

python3 mteExample.py

Run Python Script Code Server

Code-server’s humming on your Linux box – time to unleash its full potential! Think browser-based brilliance: personalize your coding cave with slick themes and powerful extensions. Code in any language, from Python to Javascript, right in your browser. Ready to level up? Secure your server with a custom domain and HTTPS. But the adventure doesn’t stop there. Picture this: seamless Git workflows, rock-solid SSL encryption for production, and a homelab bursting with tools like JupyterLab, Docker, and Portainer. This isn’t just development; it’s your personalized, web-powered command center. What are you waiting for? Dive in!

Thanks for reading How to Set Up a Web-based Code Server on Linux

Getairo
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.