Chapter 6: Understanding push / pull

What you will be able to do in this chapter:

• Import cloud changes with clasp pull
• Iron rules to prevent "reversion" accidents
• First step of team development
• Time required: 10 minutes (reading only)
• Stumbling block: Editing in browser and losing data (It happens often)

I will explain the difference between clasp push and clasp pull, and clasp clone to copy an existing project. If you understand these, you will be able to synchronize code freely in any situation.

1. Imagine the flow of data

When using Clasp, the scariest thing is "file reversion (overwrite accident)". To prevent this, let's firmly imagine how data moves.

Push

• Direction: Your PC -> Google
• Meaning: "My code at hand is the latest. Please overwrite with this."
• Command: clasp push

Pull

• Direction: Google -> Your PC
• Meaning: "The code on Google is the latest. Please update the files at hand."
• Command: clasp pull

2. Bring an existing project to hand (Clone)

In Chapter 4, we created a new project with clasp create, but in practice, you will often want to edit "GAS already running" or "GAS linked to a spreadsheet".

In such cases, use clasp clone. This is a command to download the entire GAS project on the cloud to your PC.

When to use?

• When you want to manage GAS made in the browser in the past with VS Code in earnest.
• When you want to copy GAS made by a team member to your PC and help.
• When you replace your PC and rebuild the development environment.

Step 1: Find Script ID!

To clone, you need the Script ID which is the "address" of that GAS. It is not the URL.

1. Open the target GAS editor in the browser.
2. Click "Project Settings" (gear icon ⚙️) from the menu on the left.
3. Copy the long random string in the item "ID".

Step 2: Execute command

In the terminal, move to the folder (parent folder) where you want to place the project, and type the following.

# clasp clone <copied script ID>
clasp clone 1A2b3C4d5E6f......

If successful, a new folder is created in the current folder, and .js files and appsscript.json are downloaded into it. With this, preparation for local development is complete! Let's enter that folder with cd and start working.

3. "Dual Wielding" you must absolutely not do

The thing you must absolutely not do is "Edit in local (VS Code) while also editing in browser". If you do this, a tragedy will occur.

😱 Scenario of Tragedy

1. Make "Feature A" in Local.
2. clasp push. (Feature A is reflected in the cloud)
3. Open Browser, make a minor fix (Feature B) and save.
4. Return to Local and make "Feature C".
   • At this time, "Feature B" does not exist in Local!
5. clasp push.

Result: "Feature B" made in the browser disappears! Because Clasp assumes "local state is correct" and forcibly overwrites the cloud. By the way, even if the file on Google side disappears, it does not go into "Trash", so recovery is extremely difficult. (Details in Chapter 8)

4. Iron Rule: Keep One Way

There is only one rule to prevent accidents.

"Always edit code only in Local (VS Code)"

Please keep the browser editor only for "viewing" and "executing". Even if you want to tweak the code in the browser, hold back and open VS Code.

What if I corrected it in the browser by mistake?

There may be cases where you made an emergency fix from a smartphone or browser because you didn't have a PC while out. In that case, be sure to type the following command before resuming work.

clasp pull

With this, you can import the changes made in the browser to local.

[Preserved Version] Operation Template to prevent accidents

If you are anxious, be sure to follow this procedure before starting work.

1. Before starting work: clasp pull (Get the latest state just in case)
2. During work: Edit and save in VS Code
3. Work completion: clasp push (Reflect to cloud)
4. Before major changes: Commit with Git (Explained in Chapter 9)

"When working after a long time, first pull" If you keep this, 90% of accidents can be prevented.

5. Ignore File Settings (.claspignore)

As the project gets bigger, "files you don't want to upload to Google" will appear. For example, personal memos or test data.

What realizes this is a file called .claspignore. Create it directly under the project folder and write as follows.

# Write files and folders you want to ignore
memo.txt
test-data/**
.git/**
node_modules/**

Especially, the folder node_modules (place where libraries go) has a huge number of files, so trying to upload this will cause an error. This setting becomes essential when doing full-scale development.

6. Convenient Feature: Auto Push (watch)

Is it troublesome to type clasp push every time? In such a case, try using the following command.

clasp push --watch

While this is running, it "automatically pushes every time you save a file (Ctrl+S)". You can develop with the rhythm of save = reflect, just like a browser editor. (Stop with Ctrl + C when finished)

Frequently Asked Questions (Q&A)

Q. Is it okay if I just fix a little in the browser?

A. No! Carelessness like "It's just one character…" is the source of accidents. The moment you fix and save in the browser, a "contradiction" occurs with the local code. If you clasp push from local after that, the fix in the browser is mercilessly overwritten and disappears. Please thoroughly implement "Fix always in VS Code".

Q. Do I do clasp clone many times?

A. Basically only once at the beginning. Once you bring it to local, you just need to continue development in that folder. However, if you change PC or want to work in another folder, you can clone again.

Understanding Check Test

Up to here, you have mastered the basic usage of Clasp. From the next chapter, we will change the perspective a little and talk about practical things like "how to use in actual business".

What to do in the next chapter:

• Design a robot that "aggregates sales every morning at 9 and notifies Slack"
• Specific way to write code (blueprint)
• Points to note when using in practice

>> Next Chapter: Chapter 7 Image of using GAS for "Real Work"

Series Index

• [Pinned] Complete Clasp x GAS Guide for Absolute Beginners (ZIDOOKA!)
• Chapter 0: What are GAS and Clasp anyway?
• Chapter 1: Minimum things to know before using Clasp
• Chapter 2: Setting up the environment for Clasp
• Chapter 3: Connecting Google Account and Clasp
• Chapter 4: Creating your first GAS project
• Chapter 5: Writing GAS code
• Chapter 6: Understanding push / pull (Current)
• Chapter 7: Image of using GAS for "Real Work"
• Chapter 8: Points where beginners always get stuck
• Chapter 9: What to do next