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.

• 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.

• It will show you the successfully agreed popup page. Click on Deploy.

• On deployment page, give a name to your deployment.

• Tick the existing account radio button and select your existing service account from the "Select a service account" dropdown as shown below.

• If you don't see the service account in "Select a service account" drop down, then please follow the below steps to add one. if you can see a service account in the dropdown, skip ahead to the next step to select the region for your deployment.
below steps are one time only and you need appropriate IAM permissions to execute these steps. If you encounter IAM permission errors, reach out to your organization's IAM admin to execute these steps :
1. Note Project id : First note down the project-id of the project where you are deploying our solution . Project id can be found by clicking on the project dropdown and copying id from the poped up window.


2. Activate cloud shell by clicking the shell icon at the top right corner.

3. In the cloud shell, run below command to switch to the project where you are deploying this solution , replace PROJECT_ID with the actual project id copied in step a.

gcloud config set project "PROJECT_ID"

4. Then run below command to create new service account, replace highlighted bold text with suitable values.

gcloud iam service-accounts create "your-service-account-name" --description="service account for your-google-cloud-login-emailid " --display-name="your-service-account-name"

5. Then run below command to associate the newly created service account with your google cloud login id, replace highlighted bold text with values provided in above steps

gcloud iam service-accounts add-iam-policy-binding your-service-account-name@projectid-copied-in-step-a.iam.gserviceaccount.com --member="user:your-google-cloud-login-emailid" --role="roles/iam.serviceAccountUser"

6. Then run below 3 commands one after the other , replace highlighted bold text with your service account name provided in previous steps.

gcloud projects add-iam-policy-binding PROJECT_ID --member=serviceAccount:your-service-account-name@projectid-copied-in-step-a.iam.gserviceaccount.com --role=roles/config.agent

gcloud projects add-iam-policy-binding PROJECT_ID --member=serviceAccount:your-service-account-name@projectid-copied-in-step-a.am.gserviceaccount.com --role=roles/compute.admin

gcloud projects add-iam-policy-binding PROJECT_ID --member=serviceAccount:your-service-account-name@projectid-copied-in-step-a.iam.gserviceaccount.com --role=roles/iam.serviceAccountUser

7. Once the above steps are done, wait for 60 seconds then refresh the deployment page and you should see the newly created service account in "Select a service account". Continue with the next steps below.

• 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.

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

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

5. This will open SSH window in a browser.
6. Run below command to set the password for “ubuntu” user

sudo passwd ubuntu

7. 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.

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

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

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

11. 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

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

13. 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.

14. In the “Remmina Remote Desktop Client” wizard, select the RDP option from dropdown and paste the external ip and click enter.

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

16. Now you are connected to out of box VSCode Cloud IDE environment via Linux machine.

17. 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.

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

19. You will see certificate warning, accept the warning to proceed for login

20. 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.

21. 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.

• Scroll down to Network Interfaces and edit nic0.

• From External IP dropdown select Create IP address

• Give Name and Description and click on Reserve

• Click on Save at the bottom of the page.

• Now Static IP is assigned to the VM.

You can install various AI assistance plugins. We recommend Codegeex and CodyAI extensions, 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.

To install these extension, open extension page from left pane of vscode, search for these extensions in search bar and install them.

Once these extensions are installed in the VSCode , Follow below steps to configure these plugins.

1. Codegeex:

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

Click on Allow.

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

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

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.

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.

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

2. 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.

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

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

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

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

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.

Now you should see Cody welcome screen.

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

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

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