diff --git a/README.md b/README.md index 1f8ecbc..6097003 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ -## React + Google Apps Script +## React + Google Apps Script *Use this demo project as your boilerplate React app for HTML dialogs in Google Sheets, Docs and Forms.* This project uses labnol's excellent [apps-script-starter](https://github.com/labnol/apps-script-starter) as a starting point, adding support for React. It demonstrates how easy it is to build React apps that interact with Google Apps server-side scripts. Simply clone this project and modify the source code to get started developing with React for Google Apps Script client-side dialogs. ![Google Apps Script / React development](https://i.imgur.com/0yYQoYj.jpg "Start a React project for Google Apps Script") -*The demo app for Google Sheets shows insertion/deletion/activation of sheets through React-built HTML dialog.* +*The demo app for Google Sheets shows insertion/deletion/activation of sheets through React-built HTML dialog.* ## Installation @@ -23,19 +23,16 @@ Paste the **scriptId** into the .clasp.json file as below: {"rootDir": "dist", "scriptId":"...paste scriptId here..."} ``` +If you have not enabled Google's Apps Script API, do so by visiting https://script.google.com/home/usersettings. Log into CLASP to push code to the server from the command line: ``` npx clasp login ``` -Modify the server-side and client-side source code in the `src` folder using ES6/7 and React. Change the scopes in `appsscript.json` if needed. When you're ready, build the app! +Modify the server-side and client-side source code in the `src` folder using ES6/7 and React. Change the scopes in `appsscript.json` if needed. When you're ready, build the app and deploy! ``` -npm run build +npm run deploy ``` -Webpack will display any linting errors, and then bundle your files in `dist`. Finally, push your files to Google's servers using CLASP: -``` -clasp push -``` - +Webpack will display any linting errors, bundle your files in `dist`, and push your files to Google's servers using CLASP. You can run `npm run build` to just build. ## The sample app Insert/activate/delete sheets through a simple HTML dialog, built with React. Access the dialog through the new menu item that appears. You may need to refresh the spreadsheet and approve the app's permissions the first time you use it. @@ -98,7 +95,7 @@ This project includes support for GAS definitions and autocomplete through a [Te Tern provides many indispensable tools for working with Google Apps Script, such as autocompletion on variables and properties, function argument hints and querying the type of an expression. -- Autocomplete example. Lists all available methods from the appropriate Google Apps Script API: +- Autocomplete example. Lists all available methods from the appropriate Google Apps Script API: ![tern support](https://i.imgur.com/s1OrQNr.png "autocomplete and intelligent type detection with Tern") - Full definitions with links to official documentation, plus information on argument and return type: @@ -131,4 +128,4 @@ const clientConfig = Object.assign({}, sharedConfigSettings, { { ``` ## Suggestions -Open a pull request! \ No newline at end of file +Open a pull request! diff --git a/package-lock.json b/package-lock.json index 1ad16ad..0118ebe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -140,9 +140,9 @@ } }, "@google/clasp": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/@google/clasp/-/clasp-1.5.2.tgz", - "integrity": "sha1-p8f+EaOZr3qn8+CxFIKXzyalJpY=", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@google/clasp/-/clasp-1.5.3.tgz", + "integrity": "sha512-rnDx6LS8KttymesRJtpPekrQWM0EsObI99PmZLpIGqcnmU+P7PP0cgXo7zfZJNBt7E4abqv81d+w8gqow8/Srw==", "dev": true, "requires": { "anymatch": "1.3.2", @@ -181,12 +181,12 @@ "integrity": "sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=", "dev": true, "requires": { - "globby": "6.1.0", - "is-path-cwd": "1.0.0", - "is-path-in-cwd": "1.0.1", - "p-map": "1.2.0", - "pify": "3.0.0", - "rimraf": "2.6.2" + "globby": "^6.1.0", + "is-path-cwd": "^1.0.0", + "is-path-in-cwd": "^1.0.0", + "p-map": "^1.1.1", + "pify": "^3.0.0", + "rimraf": "^2.2.8" } }, "globby": { @@ -195,11 +195,11 @@ "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { - "array-union": "1.0.2", - "glob": "7.1.2", - "object-assign": "4.1.1", - "pify": "2.3.0", - "pinkie-promise": "2.0.1" + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" }, "dependencies": { "pify": { @@ -666,7 +666,7 @@ "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", "dev": true, "requires": { - "follow-redirects": "1.5.2", + "follow-redirects": "1.5.8", "is-buffer": "1.1.6" } }, @@ -1977,9 +1977,9 @@ "dev": true }, "capture-stack-trace": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz", - "integrity": "sha1-Sm+gc5nCa7pH8LJJa00PtAjFVQ0=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz", + "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==", "dev": true }, "chain-function": { @@ -2747,7 +2747,7 @@ "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=", "dev": true, "requires": { - "capture-stack-trace": "1.0.0" + "capture-stack-trace": "1.0.1" } }, "create-hash": { @@ -4119,9 +4119,9 @@ } }, "follow-redirects": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.2.tgz", - "integrity": "sha512-kssLorP/9acIdpQ2udQVTiCS5LQmdEz9mvdIfDcl1gYX2tPKFADHSyFdvJS040XdFsPzemWtgI3q8mFVCxtX8A==", + "version": "1.5.8", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.8.tgz", + "integrity": "sha512-sy1mXPmv7kLAMKW/8XofG7o9T+6gAjzdZK4AJF6ryqQYUa/hnzgiypoeUecZ53x7XiqKNEpNqLtS97MshW2nxg==", "dev": true, "requires": { "debug": "3.1.0" @@ -4915,7 +4915,7 @@ "integrity": "sha512-+EuKr4CLlGsnXx4XIJIVkcKYrsa2xkAmCvxRhX2HsazJzUBAJ35wARGeApHUn4nNfPD03Vl057FskNr20VaCyg==", "dev": true, "requires": { - "node-forge": "0.7.5", + "node-forge": "0.7.6", "pify": "3.0.0" }, "dependencies": { @@ -5426,7 +5426,7 @@ "lodash": "4.17.10", "mute-stream": "0.0.7", "run-async": "2.3.0", - "rxjs": "5.5.11", + "rxjs": "5.5.12", "string-width": "2.1.1", "strip-ansi": "4.0.0", "through": "2.3.8" @@ -6444,9 +6444,9 @@ } }, "node-forge": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", - "integrity": "sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ==", + "version": "0.7.6", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.6.tgz", + "integrity": "sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw==", "dev": true }, "node-libs-browser": { @@ -7873,9 +7873,9 @@ } }, "rxjs": { - "version": "5.5.11", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.11.tgz", - "integrity": "sha512-3bjO7UwWfA2CV7lmwYMBzj4fQ6Cq+ftHc2MvUe+WMS7wcdJ1LosDWmdjPQanYp2dBRj572p7PeU81JUxHKOcBA==", + "version": "5.5.12", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz", + "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==", "dev": true, "requires": { "symbol-observable": "1.0.1" diff --git a/package.json b/package.json index 0d92b58..6cdcdf4 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "test": "test", "start": "webpack --mode development", "build": "webpack --mode production", - "deploy": "clasp push" + "deploy": "npm run build && npx clasp push" }, "keywords": [ "react", @@ -19,7 +19,7 @@ "license": "MIT", "dependencies": {}, "devDependencies": { - "@google/clasp": "^1.5.0", + "@google/clasp": "^1.5.3", "@types/google-apps-script": "0.0.26", "babel-cli": "^6.26.0", "babel-core": "^6.26.3",