In this project, I’ll show you how we can run Visual Code Editor in a web browser and also see how to run an angular project and host the live preview on default port 4200.
How to run VS Code Editor in the browser
First, if you are using Google Cloud Platform then create a new VM Instance. Or if you are using any other Platform like AWS or Digital Ocean just create a new Virtual Machine running Ubuntu 16.04 or latest.
- Copy the link of the binary file
wget [link of tar/zip file]command
- run a
tar -xvfz code-serverto extract the zip file
- Make the code-serve file executable by running
chmod +x code server
./code-serverto run the binary file
You will be shown the password in the terminal and the default port it will be accessible is port 8443.
Just enter the IP of the VM
https://18.104.22.168:8443 and paste your generated password.
If you get your connection not private error then just click on proceed to continue. To fix this issue map your IP to a domain and install an https certificate.
And voila! You’re running VS Code Editor in your browser.
You can tweak a few of the parameters while executing the code editor. Like you can set a custom password, custom port of default port is busy or a user folder to store user settings so that you can resume the work easily.
./code-server -p 2087 -d userdata/ --password=mypassword"
-p flag to set a custom port -d flag is to set directory to save settings of VS Code Editor --password flag to set a memorable custom password
Just running the code editor is not cool you know what’s cool? Running your project live in the browser powered by your VM.
So, for this case, we will run an Angular project so let’s start by installing node.js.
How to install Node.js and npm
curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
- And then finally install Node.js by running
apt-get install nodejs
You can also verify the Node.js version and npm version.
Use npm to install angular-cli to install & run an angular project.
npm install -g @angular/cli
ng new my-project
ng serve --host=0.0.0.0
Note: --host flag is mandatory to host your project on an ip and to make sure it is accessible on the internet. You can enter 0.0.0.0 to make it accessible to everyone or just enter your wifi/internet public IP so that only you can see the preview.
Tip: You can update the package.json file to add the --host flag and use npm start command to quickly run your project.
After compiling the project, you can visit the IP address of VM with port default port 4200. Make sure you are using http:// and not https:// in the address bar. And unblock the port if any firewall is enabled on VM.
And now you are successfully running an angular project and live preview in a web browser. You can also map your DNS entry to open the VS Code Editor using a custom domain and also use a program like
pm2to keep running code-server in background.
From here the sky is the limit. You can write and run any project right in your web browser. If you find any difficulty in setting up you can drop your questions in the comments below, I’ll try to help.