Feature/update clasp (#106)

* update to @google/clasp@2.4.0

- Add npm run open command
- Update readme to explain how to add existing script and document which works with npm run open
- Remove npm run setup:use-id command

README.md

@@ -104,17 +104,21 @@ Alternatively, you can use an existing Google Spreadsheet and Script file instea
 <details>
   <summary>See instructions here for using an existing project.</summary>
 
-1. Copy your existing script project's `scriptId`. You can find it by opening your spreadsheet, selecting **Tools > Script Editor** from the menubar, then **File > Project properties**.
+You will need to update the `.clasp.json` file in the root of this project with the following three key/value pairs:
 
-2. Run the command below using your project's `scriptId`:
+```json
+{
+  "scriptId": "1PY037hPcy................................................",
+  "parentId": ["1Df30......................................."],
+  "rootDir": "./dist"
+}
+```
 
-   ```bash
-   npm run setup:use-id your_script_id_here
-   ```
+- `scriptId`: Your existing script project's `scriptId`. You can find it by opening your spreadsheet, selecting **Tools > Script Editor** from the menubar, then **File > Project properties**, and it will be listed as "Script ID".
 
-   This command will add the existing project's `scriptId` to your`.clasp.json` file. See [here](https://github.com/google/clasp#setting) for working with `clasp`.
+- `parentId`: An array with a single string, the ID of the parent file (spreadsheet, doc, etc.) that the script project is bound to. You can get this ID from the url, where the format is usually `https://docs.google.com/spreadsheets/d/{id}/edit`. This allows you to run `npm run open` and open your file directly from the command line.
 
-<img width="100%" src="https://i.imgur.com/VYl3JHx.gif">
+- `rootDir`: This should always be `"./dist"`, i.e. the local build folder that is used to store project files.
 
 </details>
 
@@ -132,7 +136,7 @@ npm run deploy
 
 The deploy command will build all necessary files using production settings, including all server code (Google Apps Script code), client code (React bundle), and config files. All bundled files will be outputted to the `dist/` folder, then pushed to the Google Apps Script project.
 
-Now open Google Sheets and navigate to your new spreadsheet (e.g. the file "My React Project"). Make sure to refresh the page if you already had it open. You will now see a new menu item appear containing your app!
+Now open Google Sheets and navigate to your new spreadsheet (e.g. the file "My React Project"). You can also run `npm run open`. Make sure to refresh the page if you already had it open. You will now see a new menu item appear containing your app!
 
 <img width="100%" src="https://i.imgur.com/W7UkEpv.gif">
 
@@ -152,10 +156,10 @@ There are two steps to getting started: installing a certificate (first time onl
 
    ```bash
    # mac:
-    $ brew install mkcert
+   brew install mkcert
 
    # windows:
-    $ choco install mkcert
+   choco install mkcert
    ```
 
    [More install options here.](https://github.com/FiloSottile/mkcert#installation)
@@ -163,7 +167,7 @@ There are two steps to getting started: installing a certificate (first time onl
    Then run the mkcert install script:
 
    ```bash
-    $ mkcert -install
+   mkcert -install
    ```
 
    Create the certs in your repo:

package.json

@@ -10,7 +10,7 @@
     "test": "test",
     "login": "clasp login",
     "setup": "rimraf .clasp.json && clasp create --type sheets --title \"My React Project\" --rootDir ./dist",
-    "setup:use-id": "clasp setting rootDir dist && clasp setting scriptId",
+    "open": "clasp open --addon",
     "setup:https": "mkdirp certs && mkcert -key-file ./certs/key.pem -cert-file ./certs/cert.pem localhost 127.0.0.1",
     "build:dev": "cross-env NODE_ENV=development webpack",
     "build": "cross-env NODE_ENV=production webpack",
@@ -50,7 +50,7 @@
     "@babel/polyfill": "^7.10.4",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
-    "@google/clasp": "^2.3.0",
+    "@google/clasp": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-add-module-exports": "^1.0.2",