Go back

How to get VSCode Cloud IDE on GCP(Google Cloud Platform)

This section describes how to launch and connect to VSCode Cloud IDE in a Google Compute environment.

  1. Open VSCode Cloud IDE listing on GCP Marketplace
  2. Click Launch.

/img/gcp/vscode/marketplace.png

  • It will take you to the agreement page. On this page, you can change the project from the project selector on top navigator bar as shown in the below screenshot.

  • Accept the Terms and agreements by ticking the checkbox and clicking on the AGREE button. /img/common/gcp_agreement_page.png

  • It will show you the successfully agreed popup page. Click on Deploy. /img/common/gcp_agreement_accept_page.png

  • Select a zone where you want to launch the VM(such as us-east1-)

  • Optionally change the number of cores and amount of memory. ( This defaults to 1 vCPUs and 3.75 GB ram)

  • Optionally change the boot disk type and size. (This defaults to ‘Standard Persistent Disk’ and 10 GB respectively)

  • Optionally change the network name and subnetwork names. Be sure that whichever network you specify has ports 22 (for ssh), 3389 (for RDP) and 443 (for HTTPS) exposed.

  • Click Deploy when you are done.

  • VSCode Cloud IDE will begin deploying.

/img/gcp/vscode/deployment-page.png

  1. A summary page displays when the compute engine is successfully deployed. Click on the Instance link to go to the instance page .

  2. On the instance page, click on the “SSH” button, select “Open in browser window”.

/img/gcp/jupyter-python-notebook/ssh-option.png

  1. This will open SSH window in a browser.
  2. Run below command to set the password for “ubuntu” user
sudo passwd ubuntu

/img/gcp/jupyter-python-notebook/ssh-passwd.png

  1. Now the password for ubuntu user is set, you can connect to the VM’s desktop environment from any local windows machine using RDP or linux machine using Remmina.

  2. To connect using RDP via Windows machine, first note the external IP of the VM from VM details page as highlighted below

/img/gcp/vscode/external-ip.png

  1. Then From your local windows machine, goto “start” menu, in the search box type and select “Remote desktop connection”

  2. In the “Remote Desktop connection” wizard, paste the external ip and click connect

/img/gcp/jupyter-python-notebook/rdp.png

  1. This will connect you to the VM’s desktop environment. Provide “ubuntu” as the userid and the password set in step 6 to authenticate. Click OK

/img/gcp/jupyter-python-notebook/rdp-login.png

  1. Now you are connected to out of box VSCode Cloud IDE environment via Windows machines.

/img/gcp/vscode/rdp-desktop.png

  1. To connect using RDP via Linux machine, first note the external IP of the VM from VM details page,then from your local Linux machine, goto menu, in the search box type and select “Remmina”.

Note: If you don’t have Remmina installed on your Linux machine, firstInstall Remmina as per your linux distribution.

/img/gcp/common/remmina-search.png 14. In the “Remmina Remote Desktop Client” wizard, select the RDP option from dropdown and paste the external ip and click enter.

/img/gcp/common/remmina-external-ip.png 15. This will connect you to the VM’s desktop environment. Provide “ubuntu” as the userid and the password set in step 6 to authenticate. Click OK

/img/gcp/common/remmina-rdp-login.png 16. Now you are connected to out of box VSCode Cloud IDE environment via Linux machine.

/img/gcp/vscode/rdp-desktop.png

  1. For accessing VSCode in browser, SSH to the VM as shown in Step 4 and run below command-
cat /home/ubuntu/vscode_pass.txt

Note down auto-generated password.

Note: If the password is empty in the file, wait for 2 minutes and check again.

/img/gcp/vscode/vscode-web-interface-passwd-file.png

  1. Go to https://VM_Public_IP. Make sure you type https and not http.

  2. You will see certificate warning, accept the warning to proceed for login /img/gcp/vscode/certificate-warning.png

  3. Use above auto-generated password from Step 17

Note: If you happen to see a blank screen in the browser after login or page load error, wait for 1-2 minutes and open again in new browser window to see VSCode load. /img/gcp/vscode/vscode-web-login.png

/img/gcp/vscode/vscode-in-browser.png

  1. We recommend to reserve the VSCode public ip address and make it static in order to access VSCode in browser over the same IP after VM restart.
    Having static IP will also allow the browser to save VSCode password across sessions and user will not have to enter password each time VSCode is opened in browser.
  • Below are the steps for reserving public IP and making it static:
  • Once the vm is up and running, go to VM instance details page and click on Edit option.

/img/gcp/vscode/static-ip-vm-edit-option.png

  • Scroll down to Network Interfaces and edit nic0.

/img/gcp/vscode/static-ip-vm-edit-nic0.png

  • From External IP dropdown select Create IP address

/img/gcp/vscode/create-ip-address.png

  • Give Name and Description and click on Reserve

/img/gcp/vscode/Reserve-new-static-ip.png

  • Click on Save at the bottom of the page.

/img/gcp/vscode/click-save-static-ip.png

  • Now Static IP is assigned to the VM.

/img/gcp/vscode/static-ip-on-vm-details-page.png

The VM now comes with AI assistance plugins installed out of the box, leveraging open source AutoPilot alternatives, offering intelligent code suggestions, enhanced error detection, and personalized productivity enhancements.

Note: While accessing the extensions page of Code server on google chrome or on microsoft edge , if you encounter Error loading webview: Error: Could not register service worker: SecurityError: Failed to register a ServiceWorker error, then please access the code server in mozilla firefox browser.

/img/azure/vscode/extension-error.png

Follow below steps to configure these plugins.

  1. Codegeeks:

Click on Codegeex icon from the left menu as shown below. It will open login window. Click on Login.

/img/azure/vscode/codegeeks-login.png

Click on Allow.

/img/azure/vscode/codegeeks-allow.png

It will ask to open the Codegeex link in browser. Click on Open.

/img/azure/vscode/codegeeks-open-3.png

On the Codegeex authentication page, click on Signup or you can login with the options given on this page as shown below.

/img/azure/vscode/codegeeks-signup-4.png

Once you are successfully logged in to the Codegeeks, go back to Code server page. You should see Codegeex Welcome page.

Note: If you don’t see the Welcome screen, please refresh the page.

/img/azure/vscode/codegeeks-welcome-page-5.png

Enjoy various Codegeex features like Code Generation and Completion, Code Translation, Comment Generation, AI Chatbot and more from the comfort of your Code Server window.

/img/azure/vscode/codegeeks-example-6.png

For more details on how to use Codegeex please refer to Codegeex official Documentation

  1. Cody AI:

Click on Cody icon from the left menu as shown below. It will open the instruction window. Click on Signup at sourcegraph.com option. Click on Open.

/img/azure/vscode/cody-1.png

It will take you to the Signup page on sourcegraph website.

/img/azure/vscode/cody-signin-options-2.png

Signup with your prefered option. Once successfully logged in to sourcegraph , click on Settings option available under your profile menu on top right corner.

/img/azure/vscode/cody-settings-options.png

On the Settings page, click on Access Tokens option from left menu and select Generate New Token as shown below.

/img/azure/vscode/cody-generate-access-token-4.png

Follow the instructions and generate the new token. Once ready, copy the token from this page.

/img/azure/vscode/cody-copy-token-5.png

Go back to Code server window and click on Add the Access Token to VSCode option. Paste the token in the top bar and Hit Enter as shown in below screenshot.

/img/azure/vscode/cody-enter-access-token-6.png

Now you should see Cody welcome screen.

Note: If you don’t see the Welcome screen, please refresh the page.

/img/azure/vscode/cody-welcome-screen-7.png

Start using various features of Cody ranging from autocomplete, AI chat, Commands, Debug code etc, right from your Code Server Window .

/img/azure/vscode/cody-example-8.png

For more details on how to use Cody please visit Cody official Documentation

Go back