Develop Google Apps Script Locally in VSCode using CLASP

Learn how to use clasp to develop Google Apps Script projects in your favorite editor. We'll be using Visual Studio Code in this tutorial.
Install NodeJs & VSCode
• Install Node JS & Visu...
github.com/goo...

[@reubenmarkgorda3518]

This is the video I've been waiting for. It's really hard to find videos/tutorials that utilizes Apps Script for Web Applications and it's even harder to find videos that uses something like Vue/React that interacts with Sheet as database. Really appreciate your videos man!

[@getitdonetube]

thanks!

[@philipevangelista3020]

I know your voice too well. Watched tons of your videos in Learn Google Spreadsheets, which helped me a lot in my work. I'm really glad I stumbled upon this channel (something to binge watch/learn). Thanks so much!

[@getitdonetube]

I appreciate that!

[@leonardoantiqui999]

I just found out you have this channel. I am leaving this comment to thank you for all your contributions. Very helpful.

[@snoopydoo8979]

You made my day with this video - your channel on GAS is by far the best I've come across so far (for me as an absolute GAS beginner). For those of you who also want to set up this workflow and need to install all those programs on their machines for the first time: it seems to be essential that you have to initialise npm first, before you can install CLASP. Otherwise you'll receive an error message like "package.json is missing" (I am using Windows 10). When I swapped the sequence of steps, I finally managed to get that confirmation message for a successful CLASP installation.

[@dainiusstankevicius5567]

Don't know why, but after `clasp clone --rootDir src`, the .clasp.json file appeared inside of `src` folder. That did not allow to do `clasp push` correctly, but after moving it out one folder above, everything worked fine. Maybe that helps someone too.

[@rainardopuster]

Thanks!! Got the same problem with clasp push, but after moving claps.json it's working like charm! Cheers!

[@russellgregory1537]

OK, that was the best CLASP video on KZbin. I’m not sure you could watch this and have any questions how to setup CLASP on a Mac. Thanks man, clear, concise instructions. Keep it up, I’m off to check out your other videos.

[@getitdonetube]

Glad you enjoyed it!

[@stevebolman6518]

Still the best Clasp Intro out there.

[@bang-naim]

You're the best. I started from your Google sheets video and now here I am. Thank you so much!

[@getitdonetube]

Great to hear!

[@maelstrom57]

Thanks a lot for this. Makes me want to build lots of new apps now that I can use TypeScript and a proper code editor. :)

[@wmaxsen]

This video is really super well explained, step by step, with what is required to code Google Apps Script in VS Code. The new GAS Script Editor is much better than its predecessor, but it doesn't compare to what VS Code offers. Thank you so much for taking the time to create this video. Really appreciated it. Looking forward to more Google Apps Script videos!

[@LukeMartinVideo]

Every 6 month or so i come back to THIS video as i have to update our SHEETS workflow XD

[@paperpotato91]

Thank you so much for this! I stumbled across your video - looking forward to pouring through the rest :) :)

[@isaiasfrederick]

Very useful this tutorial and this tool. Develop a script on GAS using that poor web interface is expensive and uncomfortable. Thanks!

[@man_vs_life]

Seems very clear, thank you. Now to try it out...

[@mwKanj]

Great tutorial! Thank you very much!

[@zacharygrammon223]

Great work! I hadn't noticed the --watch flag before, so super helpful.

[@getitdonetube]

Thanks for watching!

[@LatamEnglih]

Thank you very much from Venezuela

[@amir_lutfi]

Thank you for your best tutorial 🤝

[@LukeMartinVideo]

Thank you. Great job !

[@user-dz6qx2fq4h]

thank you, you saved my life

[@user-ld8wn9kq6c]

thanks!

[@iancarr3923]

Excellent, thanks!

[@denisradovanovic8778]

I followed everything to a T and I got this error when I try to do "clasp push": No valid ~/appsript/.clasp.json project file. You may need to `create` or `clone` a project first. And yet I have it as I followed everything. Any inputs?

[@denisradovanovic8778]

OK found the solution. For people that are struggling - Cloning clones everything into src directory but ".clasp.json project file" has to be outside of it for "clasp push" to work. Just move the file outside of SRC folder and it would work like a charm.

[@basiccomponents]

@@denisradovanovic8778 thanks a lot!

[@marsidev]

Thanks 🤩

[@VikasSingh-uc3yv]

This is really helpful. Thank you so much for making it! I have a question - is it possible to run the code inside VSCode instead of using the Google Script Editor?

[@getitdonetube]

Yes, but it's pretty complicated and not exactly sure if it's worth it.

[@VikasSingh-uc3yv]

@@getitdonetube I'm still interested. Can you please share the steps?

[@getitdonetube]

The steps are here github.com/google/clasp/blob/master/docs/run.md Note that this requires a self managed project and once you switch, there is no way back. So maybe make a copy and try it on the copy if you're doing this for the first time.

[@VikasSingh-uc3yv]

@@getitdonetube Understood. Thanks for sharing the link. I appreciate it.

[@LatamEnglih]

Hi my bro, I get this error when executing the push command: No valid D:\Proy Act\3.Google\Google Apps Script\Fdo\IEva\evcPRD\.clasp.json project file. You may need to `create` or `clone` a project first. you can help?

[@getitdonetube]

Did you check the path?

[@manolosolalinde]

Autocomplete is not working for me. I followed the exact steps. :(

[@getitdonetube]

Just restart VSCode and see if it works.

[@valentinsarmagal]

@@getitdonetube same here, restarted and nothing...

[@direxp1757]

Many thanks for this great video. I followed all the steps until cloning and got this message : Could not find script. Did you provide the correct scriptId? Are you logged in to the correct account with the script? I can answer YES to both questions. I tried with an empty GAS ans also an empty GAS created from a Sheet. Same result. Any Idea ?

[@getitdonetube]

Make sure you use the same Google account for both.

[@hernanbalderas2791]

Hey bro, I got a problem because it doesnt recognize clasp comands. When I try to check the version after the installation, it shows the error ""bash: clasp: command not found" I have node v16.13.1 and npm v8.1.2. Do you know a possible solution to this?

[@getitdonetube]

You need to install clasp. If you did then it didn't work, so try again.

[@alwinvarghese2132]

Any syntax highlighter for Google script in vscode?

[@getitdonetube]

I'm not aware of any. JavaScript is not good enough for you?

[@stukey9751]

Still quite new to this but, if you made a web app with a form that updated a spreadsheet, could you run it on a text editor local host server and it would still update the spreadsheet from there?

[@getitdonetube]

Yes, you can.

[@stukey9751]

@@getitdonetube thanks for the reply. I've tried it but it doesnt seem to be working, think I am missing a few things do I need a google apps script api? When I inspect the page on the local host im getting an error saying 'google is not defined' I think this is referring to the google.script.run.withSuccessHandler function in my code, is this because apps script is executed on the google cloud server so therefore cant be executed locally, any help would be really appreciated?

[@getitdonetube]

You can't run the HTML locally. You can make changes to the code, but you still have to open Google's dev url for your Web App in the browser to test it.

[@BB-um4hp]

Can pls help me its very urgent. I have installed clasp and it is in C:\Users\Admin\AppData\Roaming but my Virtual Studio workspace is E:\workspace. I have put those folder in E: but still I am not able to run it on Virtual Studio Can pls pls help me

[@getitdonetube]

Refer to this video how to properly install node and vscode kzbin.info/www/bejne/aoa8lmiXgq2LnNU

[@getitdonetube]

And then use vscode terminal to do everything

[@bocobox]

stuck in clasp clone.. windows should go with command prompt?

[@getitdonetube]

Check this out first kzbin.info/www/bejne/aoa8lmiXgq2LnNU

[@getitdonetube]

Let me know if you still have problems after that.

[@bocobox]

@@getitdonetube finally get it done. frustrating with set-up as a beginner. This thing "Set-ExecutionPolicy" hold me back. Anyway, now I am excited to follow up your new channel. really appreciated it. and hope your new one attract more viewers.

[@sousomaisumsilva]

I had some problems with my installation. Basically the system informs that the script execution is disabled in system: " clasp : O arquivo C:\Users\myComputer\AppData\Roaming pm\clasp.ps1 não pode ser carregado porque a execução de scripts foi desabilitada neste sistema. Para obter mais informações, consulte about_Execution_Policies em go.microsoft.com/fwlink/?LinkID=135170. No linha:1 caractere:1 + clasp -v + ~~~~~ + CategoryInfo : ErrodeSegurança: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess

[@skywallalp]

You may try with cmd terminal in vscode or command prompt in windows instead of powershell terminal.

[@riverscuomo]

I had to install an older version of Clasp to get it to work. npm install -g @google/clasp@2.3.1 The latest version didn't work--at least for me, on Windows. EDIT: then I got an error at the step for installing TypeScript definitions for Apps Script in my project's folder. (After this command: - `npm i -S @types/google-apps-script`.) I managed to fix this by reinstalling Python. (I noticed that somewhere in the process of installing npm, another copy of Python had been installed in another location and was causing some confusion.)

[@waitwhat7373]

Great tutorial! Thanks a lot!