Develop Google Apps Script Locally in VSCode using CLASP

alright so in this video I'm gonna cover the basics of clasp so the reason you might need it if you do is when you want to develop app scripts application on your computer instead of using this beautiful interface from Google so very often you may have seen me writing new scripts when I go on their tools script editor for example under sheets you could create this under Docs you can actually create a separate script that is not attached to anything but as an example if I go to this brand new file tools script editor that opens the script editor I'm going to dismiss this and then you can just give this project some sort of name right and here's where you do all the magic so you go and create a new function call it say hello or something and then maybe we wanted to log this something meaningless doesn't matter so whatever code you would write if you have seen me doing some videos especially when you get to writing HTML files and things like that this editor is not the best so it's not easy to work in it and there's also issues of managing your code and things like that which we may talk about at some point but you might want to take this and actually have all these files locally on your computers so you can actually make changes to them instead of being in this web browser environment now this is mostly useful if you are on a web project if you're doing like web app or you're doing some sort of user form where you have to do a lot of HTML related things or if you simply just have a large project if you just use this for small snippets of code it's not gonna add a lot of value honestly to what you're doing you need to have a couple of things installed so one is gonna be some sort of text editor now for this as a demonstration I'm going to use Visual Studio code and if you're not already familiar with this sort of environments I suggest you grab the same thing so that would be code dot Visual Studio com you can go to this link you can download it for Windows Mac or Linux so he basically just click download and then run the installation next next next next next very easy installation like any other software so in addition to this you also need nodejs installed so this is where you can get it from nodejs org and for me it goes to slash en but it doesn't matter if you just go to node.js org it will take it to the right place then you want to go ahead and download nodejs I'm going with the recommended version you can also go with the current version it shouldn't matter this is available for Mac Windows or Linux you download run the installation next next next next next and you're done now once you have this installed you want to go ahead and open Visual Studio code this first one you do want to make sure you install both of these first once you open Visual Studio code this is something that it should look like it's not gonna be exactly the same screen but it's gonna be pretty similar so this point you want to make sure you have some folder on your computer designated for this so for me I have see this folder over here learn in this folder I'm gonna create another folder just for this project class tutorial so if I open this this should be a blank empty folder so what I want to do right now I want to make sure in my Visual Studio code this is my project folder so to do that if you have this open folder you can click on that if you don't on top in here which you probably don't see right now into recording there's the file menu on windows it will be more obvious on a Mac it's all the way up there so if you go under file on a Mac you're gonna do open I think on Windows they call this open folder that's the one you want to choose but it's the same thing so if you do have open folder choose that one if you don't just go open so I'm gonna go ahead and click open and what I need to do I need to just find that folder another option here if you don't want to do it this way what you could do you can simply just open that folder and if I go back this was that folder class tutorial I can simply just drag it over here and it will open that folder now I don't need this welcome screen I'm gonna close that so this is what you should see you should see that folder name on that left panel and you should have something like this on the right after you close that welcome screen now the other thing you want to do you want to turn on your integrated terminal here so this is where you can again go to that top menu on top so you have that file at it etc one of which is called view so under view you're gonna find terminal so if you click on that it's gonna open this in a bottom and basically this gives you an integrated terminal so what that is on a Mac it's actually called terminal if you're familiar with Mac's terminal or on Windows it's called command line and you can see how right now it shows that I'm in that class tutorial folder so this point the first thing you want to make sure you have node installed correctly so the way you can test this is by simply just typing node - V and hit enter and if you do have it installed this should give you the version of node you have installed if you get something like this command does not exist or unknown command something like that then something went wrong with your node installation so you want to go back and try to reinstall it maybe again and maybe just comment if you're getting any errors I'll try to help you out once it is installed this is also gonna install something that's called NPM which is a package manager it basically allows you to install other things using this command line now what I need to install I need to install that clasp if you go to their github this is the way it should look like and if you scroll down that's clasp and at some point there's gonna be a command to do the installation see install and then it gives you the line to actually install this so that's pretty much what I'm gonna do I'm just gonna copy this line go through that Visual Studio code paste it in this integrated terminal and hit enter so as you can see I'm getting some errors here but one thing you can do you can run this as an administrator that same command so if you're on a Mac system you should be able to do this by adding sudo or Linux that should work and do this NPM install and do the same command by adding sudo and that will ask you for your admin password now in Windows you have to run your command prompt as administrator and that means you're not gonna be doing it here in this environment let me see if I can find where you're gonna do that so if you go to your Start menu like to give you a short example here this would be like Windows 10 Start menu so if I go here and scroll down or you could search under search you should be able to find Windows system or you can just search for command prompt there this windows system command prompt when you see this thing instead of left clicking on this just right click and now I can go under more and run as administrator so that way you can run that as an admin and in that command prompt instead of this integrated terminal just type the same command again and try to get installed now as you can see after running this as an administrator I was able to get this whole thing installed with no errors it still gives us this warning that should be fine so now you should have clasp installed on your machine so you can get back to this terminal if you had to live it because of administrator privileges for Windows you can come back to it and check if everything was installed well by doing clasp - V and that should give you the version of clasp you have installed and as you can see it gave me this two point three point zero right now so I have now clasp installed so I can finally start doing what we're trying to do so what I'm trying to do I'm trying to manage this project in here now to do that you need to make sure you have Google Apps scripts API turned on the way you can do that is by going to this link so if you open that you'll see that in your settings your Google Apps Script API is turned off if it's on you don't want to turn it off so I'm gonna turn this on so what I want to do right now I just want to go to that project this is that project I had and you can get back to this if you opened it from your spreadsheet by going tools script editor or however you get to your script right now for this project you need that projects ID so to find it you can either get it here on top in this crazy long link what I like to do I like to have the idea of the project in a different way so I go under file project properties and then here see we have script ID which is basically your project ID so you want to make sure you have that handy because you're gonna need it now once you have the API turned on and you have all of this installed you should be able to log in with Google so what do you do you go back to this and you do clasp space and log in and when you hit Enter it's gonna prompt you with this window in your browser which is where it's gonna ask you for your account so whatever Google account you used to manage that script that's the one you should be using so I'm gonna open the account it's gonna ask for bunch of privileges you're giving this I'm gonna hit allow so see it says logged in you may close this page so close it now we're logged in with clasp now this point I want to get this project information to my computer so you could do this directly in the main folder here but generally speaking it's never a good idea you want to have a separate folder for all the files you'll be using in this project so what I'm gonna do I'm gonna click on the second icon to create a folder SRC for source you can call it anything you want it doesn't really matter so I'm gonna use this folder for all the project files and this main folder is gonna be for anything else I might need to use for example you will usually initialize a node project so you can do that by doing NPM space in it and basically this will create a package file for you it's a JSON file so it's gonna ask us what's the name of the package you want what's the version of the software what description you can type all of these things for me I'm just gonna hit enter for all of this and be done and you can see how it creates this package dot JSON now the next thing I want to do I need to finally get that project that I was trying to get so to do that I'm gonna do clasp and then clone and then you have to do the script ID that you're trying to clone now if you remember that was this script ID so you want to place this in quotes so you do quote that script ID in codes and other space and then you have to say which directory this needs to go to because if you don't do that it will automatically pick up this main directory but we want to use this SRC so to do this you do two dashes and then root there with the uppercase and then after the space provide the name of the folder my folder is called SRC that's what I'm gonna call this hit enter so see it went there it did some things now if I go to that source folder you see it has this code dot J S and it has this app script dot JSON now if I go to that code J s you'll see this is that same file that we had here in the script editor but you can see there is no second file that you can see which is this app script JSON this is right now not visible if I go back to this you can make it visible by going on there view and do this show manifest file and that's that file so by default it's just hidden in here that's why you can't see it but it's still there so there are these two files here that are available which are the same files that now we have in here in this source folder so the first thing you want to do you want to make sure you clone the project which I just did now before I talk about the next model I want to pay attention to something if you look at this file names this one is called Apps Script JSON and this one is called code AS now if I go to app scripts editor this one is still called Apps Script JSON but this one is called code dot so you want to make sure you pay attention to that in this editor these are called GS and when you download it to your computer this is gonna be J as for javascript extension so now if I go to that code J s let's say I've decided to change this code so I'm gonna copy this line and instead of saying hello I'm gonna say bye so you go here make some changes and you hit save which you can do by doing ctrl s command as or you can also do file save anyways so I'm gonna save this now at this point you probably think okay so we're done right we saved it now the problem is just because you save it on your computer that doesn't mean it's gonna be saved in here in the actual project so if i refresh this screen say it's still the same thing there are no changes so if you're trying to actually apply those changes what you need to do you need to go here run a command clasp push so this push you can think about it like really saving your changes I guess but what it's really doing it's taking your local version and it's basically sending it and overriding the other version that you have on the actual server with this so if I do clasp push just like that and hit enter it's gonna do this see it says two files pushed so now if I go back so I'm gonna do refresh and now you can see how we got by in here so we got those changes now in our actual project by running them on our local computer now we could also add new files to this so I can go to this SRC source folder and add another file to this and call this something like funk CAS really any JavaScript file now you want to make sure that's in this source folder not in this main folder right so that's going to be all our project files so here let's just create a quick function so now again if I want this to be available on the actual project I go here and I've run the same clasp push command which you could also by the way do by pressing the up arrow key on your keyboard it's always gonna grab the latest command you had so I'm gonna run this it's gonna again push this changes and what should happen now if I go back and reload this you see how I have this new file funks GS and maybe you go here and make some changes now on the server and you save it here on the server in this Google's environment so now if you go back to this that's not going to be available so even if you close this and reopen it see it's still the old stuff so if you want to get those changes from the server you need to pull that information so pushing is where you take the local one and apply it to the server and pulling is where you take the server's version and pull it back here so what do you do here you basically just do clasp pull and now if I run this see it shows the new line that was just done on a server now as you start working on this project more and let's say you do another change you soon may realize that because you want to test this for example you need to run this but this is not gonna have that updates yet so you need to constantly just push all these changes to the server so you have to constantly go here and do clasp push to get it done and this gets really annoying if you manually have to do this every time you make a change right so what you could do you can do this you can do clasp push and then you can do this - watch and if I do this what's going to happen actually it's not watch apparently just W so let me go correct that so like this so if I enter see right now it says it's pushing files and it's not getting out of this program it's stuck in this program and what it's doing right now it's waiting for any changes that I do here so what's gonna happen every time you go to this files and make some change and you save it every few seconds is gonna go and find those changes you did when you save it and see how it automatically just pushed it so now if I go and check without actually running this again I should be able to see another change or what I've misspelled so let me correct that and save it so once I save it again see in just a little bit it's running this again so I should be able to go back here and refresh and you'll see how I have that change now applied basically every time any change I do to any one of this project files it's automatically gonna happen on the project on the server too so again command s or control s see it's pushing those files now I go back and reload this and I should be able to see that change there this now one thing that's gonna be annoying if you're new to this is that once you're in this at some point you want to get out of this hole watch situation so what you can do you can simply just press control C while your clicked inside of this and if you're on a Mac you really want to press control not command it should be the same I believe on Windows but if it's not please somebody correct me in comment and that will get me out of this so now I'm back to my terminal so that's how we can push and pull and do this type of changes so the last thing I want to talk about here is that what you're going to notice now if I go to that server right here and I type something like spread sheet app and do dot well if I learn how to type C I get all of these properties and methods available for that and then if we do something like get active spreadsheet and you do dot you get all the methods on that all of that now if I go and try this on my local version right here and do spreadsheet AB dot you will see I'm not getting any of that stuff so if you want to be able to get that autocomplete you actually have some more things you need to have installed and for that we're gonna go back to that clasp website and here we're gonna go under docks and under docks we're gonna go to this typescript MD file and simply just scroll down so I'm not gonna go over what typescript actually is in this video but we're just trying to make our autocomplete work so if you see there's a QuickStart it says prerequisites and it says you have to do this which is this class v which basically just gives you what version you have and it says you want to make sure you probably have like a later version which you are going to have if you just install this and then it says run this so I'm gonna copy this line go to my terminal paste it and run it we ran all of that and then the next one says create a file called this to enable typescript features so I'm gonna skip that one for a second now I'm gonna go back to this let's try to write this C without doing anything else I'm just writing spreadsheet app see how this thing opened up and then I do dot and then I have my get active spreadsheet this one and then I can do dot and then we have our get range now these are not always gonna be accurate and match what you get in the editor but if you're new to this you're probably not gonna feel any difference whatsoever but keep in mind that these are manually being updated and if Google makes some changes this could be different here until they catch up and make changes on this side but now we have autocomplete and you could come in here and now add some HTML files if you have to editing HTML files is as simple as going to this folder creating a new file and just giving it dot HTML extension so here you can create your HTML files using all the features from visual studio code like Emmet so you can do stuff like this to populate this so let's just keep this simple let's create an h1 here and then you could now take this file in your script side and create some HTML service using this my HTML file which is what it's called I can create a function here you so basically we'll take this htmlservice go get that file cold my HTML and then we create HTML service out of this and then we provide that to the sidebar so we can add this HTML to our sidebar so if I go ahead and save this now because I'm not watching this anymore I have to manually push all this changes so I'll do class push now if I go back here and refresh my where is it editor you'll see I have that add to sidebar function and I can just run it and it's gonna again ask for all the permissions as usual if I go to my spreadsheet there is the sidebar right so see how we have that my HTML file here and we have all the rest of the files so this should give you I guess overall understanding of the workflow maybe I'll do follow-up video to show you some tricks you can do to make your workflow better but for this one that should be it thanks for watching please subscribe and I'll see the next one

Channel: Get __it Done!

Views: 8,336

Keywords: Apps Script, google, vscode, clasp, develop, local

Id: lwxiEB-Mnys

Length: 25min 56sec (1556 seconds)

Published: Thu May 07 2020