{"id":21349118,"url":"https://github.com/piavgh/apps-script-react-navigation-sample","last_synced_at":"2025-07-12T18:32:16.084Z","repository":{"id":44088669,"uuid":"190715431","full_name":"piavgh/apps-script-react-navigation-sample","owner":"piavgh","description":"A sample Google Apps Script project with React + React-router","archived":false,"fork":false,"pushed_at":"2023-01-13T23:19:47.000Z","size":1519,"stargazers_count":5,"open_issues_count":19,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-11-04T20:10:33.676Z","etag":null,"topics":["apps-script","react","react-router","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piavgh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-07T09:00:22.000Z","updated_at":"2023-08-19T15:26:15.000Z","dependencies_parsed_at":"2023-02-09T17:46:32.422Z","dependency_job_id":null,"html_url":"https://github.com/piavgh/apps-script-react-navigation-sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piavgh%2Fapps-script-react-navigation-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piavgh%2Fapps-script-react-navigation-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piavgh%2Fapps-script-react-navigation-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piavgh%2Fapps-script-react-navigation-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piavgh","download_url":"https://codeload.github.com/piavgh/apps-script-react-navigation-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225834498,"owners_count":17531468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apps-script","react","react-router","reactjs"],"created_at":"2024-11-22T02:42:18.440Z","updated_at":"2024-11-22T02:42:18.988Z","avatar_url":"https://github.com/piavgh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## React + Google Apps Script\n*Use this demo project as your boilerplate React app for HTML dialogs in Google Sheets, Docs and Forms.*\n\nThis 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.\n\n![Google Apps Script / React development](https://i.imgur.com/0yYQoYj.jpg \"Start a React project for Google Apps Script\")\n*The demo app for Google Sheets shows insertion/deletion/activation of sheets through React-built HTML dialog.*\n\n## Installation\n\n Clone the sample project and install dependencies:\n```\ngit clone https://github.com/enuchi/React-Google-Apps-Script.git\ncd React-Google-Apps-Script\nnpm install\n```\nThen [create a new Google Sheets spreadsheet](https://sheets.google.com). Open the Script Editor and copy the script's scriptId. [**Tools \u003e Script Editor**, then **File \u003e Project properties**].\n\nPaste the **scriptId** into the .clasp.json file as below:\n```\n// .clasp.json\n{\"rootDir\": \"dist\",\n \"scriptId\":\"...paste scriptId here...\"}\n```\nIf you have not enabled Google's Apps Script API, do so by visiting https://script.google.com/home/usersettings.\nLog into CLASP to push code to the server from the command line:\n```\nnpx clasp login\n```\nModify 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!\n```\nnpm run deploy\n```\nWebpack 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.\n\n## The sample app\nInsert/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.\n\n## How it works\n\"[Google Apps Script](https://en.wikipedia.org/wiki/Google_Apps_Script) is based on JavaScript 1.6 with some portions of 1.7 and 1.8 and provides subset of ECMAScript 5 API.\"\n\nThat means many JavaScript tools used today in modern web development will not work in the Google Apps Script environment, including `let`/`const` declarations, arrow functions, spread operator, etc.\n\nThis project circumvents those restrictions by transpiling newer code to older code that Google Apps Script understands using Babel, and also bundles separate files and modules using Webpack.\n\nOn the client-side, there are restrictions on the way HTML dialogs are used in Google Apps (Sheets, Docs and Forms). In web development you can simply reference a separate css file:\n```\n\u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n```\nIn the Google Apps Script environment you need to use [HTML templates](https://developers.google.com/apps-script/guides/html/templates), which can be cumbersome. With this project, all files are bundled together by inlining .css and .js files. Using a transpiler and bundling tool also allows us to use JSX syntax, and external libraries such as React.\n\n## Features\n- Support for JSX syntax:\n```\nreturn \u003cdiv\u003eName: {person.firstName}\u003c/div\u003e\n```\n- Support for external packages. Simply install with npm or from a file and `import`:\n```\n$ npm install react-addons-css-transition-group\n```\n```\n// index.jsx\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group';\n```\n- `import` CSS from another file:\n```\nimport \"./styles.css\";\n```\n - Make server calls in React with `google.script.run`:\n ```\ncomponentDidMount() {\n   google.script.run\n      .withSuccessHandler((data) =\u003e this.setState({names: data}))\n      .withFailureHandler((error) =\u003e alert(error))\n      .getSheetsData()\n}\n  ```\n- Use newer ES6/7 code, including arrow functions, spread operators, `const`/`let`, and more:\n```\nconst getSheetsData = () =\u003e {\n  let activeSheetName = getActiveSheetName();\n  return getSheets().map((sheet, index) =\u003e {\n    let sheetName = sheet.getName();\n    return {\n      text: sheetName,\n      sheetIndex: index,\n      isActive: sheetName === activeSheetName,\n    };\n  });\n};\n```\n## Tern support\nThis project includes support for GAS definitions and autocomplete through a [Tern](http://ternjs.net/) plugin. Tern is a code-analysis engine for JavaScript, providing many useful tools for developing. See Tern's site for setup instructions for many popular code editors, such as Sublime, Vim and others.\n\nTern 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.\n\n- Autocomplete example. Lists all available methods from the appropriate Google Apps Script API:\n![tern support](https://i.imgur.com/s1OrQNr.png \"autocomplete and intelligent type detection with Tern\")\n\n- Full definitions with links to official documentation, plus information on argument and return type:\n![tern support](https://i.imgur.com/yg5VwAC.png \"definitions with links to official documentation make developing with Google Apps Script\")\n\n\n\n## Extending this app\n- You can split up server-side code into multiple files and folders using `import` and `export` statements.\n- Make sure to expose all public functions including any functions called from the client with `google.script.run` as well as onOpen. Example below shows assignment to `global` object:\n```\nconst onOpen = () =\u003e {\n  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.\n        .createMenu('Dialog')\n        .addItem('Add sheets', 'openDialog')\n        .addToUi();\n}\n\nglobal.onOpen = onOpen\n```\n- You may wish to remove automatic linting when running Webpack. You can do so by editing the Webpack config file and commenting out the eslintConfig line in client or server settings:\n```\n// webpack.config.js\n\nconst clientConfig = Object.assign({}, sharedConfigSettings, {\n  ...\n  module: {\n    rules: [\n      // eslintConfig,\n      {\n```\n## Suggestions\nOpen a pull request!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiavgh%2Fapps-script-react-navigation-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiavgh%2Fapps-script-react-navigation-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiavgh%2Fapps-script-react-navigation-sample/lists"}