# CLASP - Google Apps Script tutorial

 [CLASP](https://github.com/google/clasp) is a command-line application developer by Google to develop and manage the Google Apps Script project easily. You can always use the built-in Script Editor to write App Scripts, however, it becomes difficult to manage the project when it becomes larger. For example, if you have multiple server-side functions or HTML files, it's always better to use CLASP to develop, debug & test the App Script projects. I used *clasp* for  [my previous project](https://gum.co/payroll-sheet) and *clasp *helped me heavily to debug and test the project on my local machine. 

Features:
- Easy to use if you know the basics of Git.
- Provides code formatting, debugging, and word completion in a normal IDE way.
- Develop locally.

## How to install CLASP?

Make sure you have installed the  [Nodejs](https://nodejs.org/en/)  environment. 

I will recommend using  [VS Code](https://code.visualstudio.com/) for editing code.

Also, enable Google Apps Script API permission from here, https://script.google.com/home/usersettings

![Screen Shot 2021-06-29 at 12.27.46 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624949881996/cmuLq-8HB.png)

Now, run the below command. npm is a package manager which already installed if you have Nodejs already.
```
npm install -g @google/clasp
```
After that,
```
$ clasp 
```
Great. If you have any issue like *command not found*, check npm prefix path. I used *npx clasp* to run before when I had some issues with the project. * [npx](https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/) * execute the package from the local or remote package.

## How to use clasp?


### Connect your Google Account 
```
$ clasp login
```
Now, log in using your Google account. 

## Pull the script from Google Sheet using Script id

If you need to create a separate project, use the below command to create the standalone script.
```
clasp create
``` 
In this tutorial, I am showing *clasp* clone from Google Sheet. You need the Script ID to get the script from Google Sheet. 

### Get Script ID
Open your Google Sheet, open Tools > Script Editor, this will open the Apps Script page. Then, click on the settings from the sidebar and copy Script ID.

![Screen Shot 2021-06-29 at 12.55.44 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624951586148/aBy4jDzHf.png)

### Project Structure
 After getting the project script ID, now you need to create a local project. I would suggest cloning the remote project to a separate folder like the below code which will help you to separate src files and Nodejs files. 

Note that, all the *.gs* files now be converted into *js* files.

![Screen Shot 2021-06-29 at 1.05.43 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624952173723/rmAYkfplj.png)

### Clasp Clone
Now, clone the project using the command:
```
clasp clone "SCRIPT ID" --rootDir src/
```
This will pull the script as well as create an appscript.json.

### Clasp Pull
Pull the project from the remote using the Script ID. 
```bash
#Pull from remote
clasp pull  
#Pull from remote using version number
clasp pull  --versionNumber 2
```
### Clasp Push
Push the project to the remote.
```bash
#Push to remote
clasp push  
```
 ## Install autocomplete 

Go to  [https://github.com/google/clasp/blob/master/docs/typescript.md](https://github.com/google/clasp/blob/master/docs/typescript.md) which talks about how to install Google Apps Script specific types on VS Code.

```
npm i -S @types/google-apps-script
```

## Conclusion
I hope this tutorial helped you to set up a clasp-based project. It is always much efficient to use clasp based on the project rather than the inbuilt script editor.


## Useful Resources

-  [Youtube Video](https://www.youtube.com/watch?v=4Qlt3p6N0es)  - Step by step instructions

-  Gas-client ( [https://github.com/enuchi/gas-client](https://github.com/enuchi/gas-client) )
   - A client-side utility class to call server-side Google Apps Script functions. You can use in local development. 

-  React-Google-Apps-Script 
     - A Boilerplate React project to develop Google Workspace addons.