A codespace with clasp waiting

File 1 of 3

devcontainer.json, which builds the codespace

Save it as .devcontainer/devcontainer.json: a folder named .devcontainer at the top of your repository, with this file inside. GitHub reads it when you click Create codespace. Comments (the lines starting with //) are allowed in this file and ignored by GitHub.

Line by line

1. {

   Opens the file. JSON is a way of writing settings as name: value pairs between curly braces. The last line, }, closes it.

2. "name": "Apps Script with clasp",

   What the codespace is called in GitHub's list. Any words you like.

3. "image": "mcr.microsoft.com/devcontainers/javascript-node:22",

   The computer the codespace starts from. mcr.microsoft.com is Microsoft's public registry of such images; devcontainers/javascript-node is their Node one: Debian Linux with Node, npm, and git already installed; :22 picks Node version 22. clasp runs on Node, so this is the one line that matters most.

4. "postCreateCommand": "npm install -g @google/clasp",

   A command GitHub runs once, when the codespace is first created. This is the install itself, and it's the only line here that changes anything. It's broken down word by word in the commands section below. If you'd rather type it yourself and watch it run, delete this line and the codespace still works.

5. "postAttachCommand": "echo 'clasp is installed. …'"

   A command GitHub runs each time the editor connects. echo just prints the words that follow it in the terminal. It installs nothing; it's a note to your future self about what to type next. If you deleted the line above, change these words too.

Notice what's not here: no extensions and no other installs. That's deliberate, and it's what to look for in anyone else's devcontainer file before you open their repository in a codespace.

File 2 of 3

.gitignore, which keeps the token out

Save it as .gitignore at the top of the repository. The dot at the start matters. Git reads it before every commit and leaves out anything that matches.

Line by line

1. # Files Git must never save …

   A line starting with # is a note to people, not an instruction. Git skips it.

2. .clasprc.json

   The file clasp writes when you log in, holding a saved sign-in (a token) for your Google account's Apps Script projects. Naming it here means Git will refuse to stage it even if you select everything. This is the line this file exists for.

3. .DS_Store

   A hidden file macOS drops into folders. Harmless clutter; nobody wants it in a repository.

4. node_modules/

   A folder npm creates when a project installs packages locally. It can be thousands of files and is always rebuildable, so it never goes in a repository. The trailing / means “this folder and everything in it.”

File 3 of 3

README.md, which tells the next person what this is

Save it as README.md at the top. GitHub shows it on the repository's front page. It's words, not code, so there's nothing to break; change every line to fit yours. It repeats the commands below so they're there when you come back in a month.

What you'll type

Five commands, one word at a time

These go in the codespace's terminal, one at a time, in this order, after you've turned on the Apps Script API for the Google account you're practicing with (chapter 7, step 1). Each is shown, then taken apart. If you deleted the install line from devcontainer.json, type this first:

1. npm install -g @google/clasp

   npm is the installer that comes with Node. install is what you're asking it to do. -g means “for the whole codespace,” not just the current folder, so clasp works from anywhere. @google/clasp is the package's name: Google's, called clasp.

Then, in order

1. clasp login --no-localhost

   clasp login signs in to a Google account. Normally it opens a browser on the same computer; a codespace has no screen, so --no-localhost says “print me a link instead.” Open the link, choose the account you're practicing with, and paste the code it gives you back into the terminal. This is the moment .clasprc.json is written.

2. clasp clone-script <script-id> --rootDir src

   clone-script copies an Apps Script project down as files. <script-id> is the project's ID from Project Settings in the Apps Script editor; replace it, angle brackets included. --rootDir src puts the files in a folder called src instead of beside your README, which keeps the two kinds of file apart. clasp also writes .clasp.json at the top, holding the ID and the folder name; that one is fine to commit.

3. clasp pull

   Brings changes made in the browser editor down into src/. Run it before you push if anyone else, including you on another day, edited the project online.

4. clasp push

   Sends src/ up to Apps Script, replacing the whole online project with what you have. clasp only sends .js, .gs, .html, and appsscript.json; dotfiles and anything else stay here. Before the first push, read every file in src/ once: scripts often carry a spreadsheet ID or an email address.

5. clasp logout

   Deletes .clasprc.json, the saved sign-in. Type it before you close the codespace for the day. The codespace lives on GitHub's server; the key shouldn't.

Then commit from Source Control as in chapter 4. The staged list should show src/ and .clasp.json, and never .clasprc.json. If it ever does, stop: the .gitignore isn't where it should be.

Checked

The image and what it contains were read on its README on the date in the guide's Resources; the commands, what push sends and ignores, .clasp.json, and --rootDir on clasp's README on the date in the guide's Resources. Names drift; if a command here isn't accepted, clasp --help lists the current ones.