Using Project IDX to write Google Apps Script
Google have released a cloud-based IDE this year called Project IDX. It looks and feels like VS Code but is tailored for a Full Stack Developer experience and optimised for developing on Google Cloud.
Project IDX allows you to use all your favourite IDE extensions and themes, but also offers AI assistance through tools like Gemini Code Assist. It also has one-click integration to many Google products such as Firebase Hosting or deploying your app to Cloud Run.
A really handy feature of IDX is the ability to share a workspace with a colleague so you can collaborate and develop together in real time!
This feature has made it a desirable IDE and there’s no reason that people who aren’t seasoned developers but perhaps use Google Apps Script to automate some of their workload, can’t reap the benefit of this collaboration.
This guide will demonstrate how to develop your Apps script code from within Project IDX, and we will even touch on how to enable Google’s AI Code Assistant to get extra help when writing your App scripts.
Step 1 — Getting Started with Project IDX
To start using Project IDX — you can go to idx.google.com. That really is as easy as it gets, you are now in a full IDE in your browser.
On the right hand side of the page you will see a number of templates Google have created to allow you to dive straight into full-stack development of an application such as:
- Angular
- NextJS
- Flutter
- Gemini API
- Go
- Python
Project IDX also allows you to import your own repositories from Github.
If you want a blank page to get started with, which we do for Apps Script, you can click See all templates and then click Blank Workspace under the Misc heading.
It may take a few minutes for Google to set up your Workspace as they are spinning up virtual machines and getting the environment suited for you.
Step 2 — Installing Clasp
Clasp is a tool from Google which allows you to manage your Apps Script projects from a terminal as well as develop them locally.
This is a great tool for those who want the benefit of all the features and extensions in their own IDE, rather than using the native code editor of Apps Script. The installation instructions on the Google documentation work great for your laptop, but don’t quite work on Project IDX.
For that we need some extra steps.
In your Project IDX window, click the hamburger in the top left, then navigate to Terminal and New Terminal.
In the terminal which has appeared, write the following command then press Enter to run it, it may take a couple of minutes to complete:
npm install @google/clasp -gNPM (Node Package Manager), is a tool used for handling third party packages for Javascript. This command is telling the tool to install all the background code to use Clasp.
Next we need to log in to Clasp with our Google account. Run the following command in the terminal window:
clasp login⚠️ This may open up a new tab in your browser which has an error message in it — close this tab and return to Project IDX.
There will be a very long URL in the terminal — this is what we use to authenticate our account.
There is a problem with this URL — it works great for local environments (like your laptop) but not cloud environments (like Project IDX). Copy this URL to your clipboard (you can right click on it and copy) and open a new tab and go to this URL.
This will take you through a Google Authentication flow asking you to grant access to specific scopes:
Once you click Allow the page will be redirected to a new page, which should show an error. Don’t worry about this, it’s to be expected. Copy the URL of this page with the error (it should start with localhost)
Now, we need to open a 2nd terminal window. To do that you click the plus icon in the top right of the terminal:
In this terminal you are going to run the command:
curl <<your copied url>>This is just curl followed by a space then your URL, you don’t need the pointed brackets around it. Curl is a tool for fetching the content of websites in a terminal.
This will write a bunch of HTML back into the terminal and you will see the last line which says Logged in!:
Go back to the original terminal and you will notice it now says Authorization Successful.
You can now use Clasp 🎉
Step 3 — Getting your Apps Script into IDX
Now that you have Clasp set up on IDX — it’s time to bring an Apps Script into your Editor.
Go to https://script.google.com and open up any script you want to use. In the URL of the script, you will see a long string of random characters — this is the Script’s ID, as highlighted below:
https://script.google.com/u/0/home/projects/<<THIS PART IS THE ID>>/edit
Copy this to your clipboard. Go back to the terminal on IDX and run the following command:
clasp clone <<YOUR SCRIPT ID>>This will bring your Apps Script files into IDX. Again, paste the URL without the poitned brackets around it. On the left hand file menu, you will see some new files including Javascript files where your code lives.
Clicking on one of these opens your code in the editor:
If you make any changes to the files, you can write these files back to the source on Apps Script side by running the following command in the terminal:
clasp pushThis updates the live script with the version you have in IDX.
Similarly, if you know there have been changes made on the server side and you want to update the version you have in IDX, you can run the following command in the terminal:
clasp pullBonus Step — Using Gemini Code Assist
You can now edit Apps Script files in IDX and use all your favourite extensions and IDE tools — but why not leverage the full power of IDX and that’s with Gemini Code Assist!
Gemini Code Assist is Google’s product for developers to use AI to suggest code completion inline and offers a full chat window where you can chat with Gemini about your code and it will explain what is happening, offer suggestions and alternatives, and generate test cases etc.
To use Gemini Code Assist to give us a helping hand with our Apps script code, we need to click the IDX logo in the left hand navigation pane to see all the integrations and options Google have streamlined for you. There should be an Add Gemini API option.
Click Add Gemini API.
Now you will see Gemini API in the Workspace area of this menu, with the option to Authenticate. Clicking this will open up a pop-up box asking you to select which Google Cloud project you wish to use.
⚠️ Note — once you select a project and enable the API you will be billed for using Gemini Code Assist so if your Google account belongs to an organisation, you should speak to the IT department or bill payer first. Pricing can be found here: https://cloud.google.com/products/gemini/code-assist?hl=en#pricing
Now, as you type code in the editor you will notice that Gemini starts to offer suggestions as to what you may be trying to do. Create a function name and it may complete the function for you. To accept a suggestion, press the tab key on your keyboard
This is a really powerful AI assistant and will help you get your Apps Scripts from zero to complete in no time.
If you click the Gemini logo in the top right hand corner of IDX and select Chat with Gemini it will open up a chat window for you to ask it questions about your code. It can offer suggestions, explain errors, generate tests etc.
As with any generative AI technology, you should use it carefully and understand that the technology is still experimental results generated aren’t guaranteed to be 100% accurate. However, so far I have found it a really great tool which speeds up development.
Even when speaking to developers in organisations writing production code on large systems, they have commented on how helpful it’s been in their daily workflows!
