{"id":18214339,"url":"https://github.com/rjanain/react-google-appsscript-boilerplate","last_synced_at":"2025-08-24T06:07:34.288Z","repository":{"id":260905065,"uuid":"882587067","full_name":"rjanain/react-google-appsscript-boilerplate","owner":"rjanain","description":"A boilerplate project for building multipage React applications integrated with Google Apps Script (GAS). This setup uses Vite , React Router for navigation, and dynamic theming with React Bootstrap and Bootswatch. Designed to easily connect to Google Sheets as a backend and support custom server functions using GAS library","archived":false,"fork":false,"pushed_at":"2024-11-03T14:01:04.000Z","size":598,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T21:29:28.251Z","etag":null,"topics":["appsscripts","bootswatch","google","react","react-bootstrap","vitejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rjanain.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-03T07:38:01.000Z","updated_at":"2025-04-06T19:41:44.000Z","dependencies_parsed_at":"2024-11-03T14:26:00.910Z","dependency_job_id":"6b3e6b22-124f-4d17-ac1a-1db41a152075","html_url":"https://github.com/rjanain/react-google-appsscript-boilerplate","commit_stats":null,"previous_names":["rjanain/react-google-appsscript-boilerplate"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rjanain/react-google-appsscript-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanain%2Freact-google-appsscript-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanain%2Freact-google-appsscript-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanain%2Freact-google-appsscript-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanain%2Freact-google-appsscript-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rjanain","download_url":"https://codeload.github.com/rjanain/react-google-appsscript-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rjanain%2Freact-google-appsscript-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271803804,"owners_count":24824511,"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","status":"online","status_checked_at":"2025-08-24T02:00:11.135Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["appsscripts","bootswatch","google","react","react-bootstrap","vitejs"],"created_at":"2024-11-03T16:03:46.225Z","updated_at":"2025-08-24T06:07:34.235Z","avatar_url":"https://github.com/rjanain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Vite Google Apps Script Boilerplate\r\n\r\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white) \r\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\r\n![NodeJS](https://img.shields.io/badge/node.js-%2343853D.svg?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\r\n![Vite](https://img.shields.io/badge/Vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\r\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\r\n![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)\r\n![React Bootstrap](https://img.shields.io/badge/React_Bootstrap-%23563D7C.svg?style=for-the-badge\u0026logo=bootstrap\u0026logoColor=white)\r\n![Bootswatch](https://img.shields.io/badge/Bootswatch-%23563D7C.svg?style=for-the-badge\u0026logo=bootstrap\u0026logoColor=white)\r\n![Google Spreadsheet](https://img.shields.io/badge/Google%20Sheet-4285F4?style=for-the-badge\u0026logo=googlesheet\u0026logoColor=white)\r\n![Google AppsScript](https://img.shields.io/badge/Google%20AppsScript-4285F4?style=for-the-badge\u0026logo=googleappsscript\u0026logoColor=white)\r\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)\r\n\r\n\r\n## Table of Contents\r\n\r\n- [Introduction](#introduction)\r\n- [Features](#features)\r\n- [Screenshots](#screenshots)\r\n- [Installation](#installation)\r\n- [Theme Customization](#theme-customization)\r\n- [Using JSON Server for Local Development](#using-json-server-for-local-development)\r\n- [Build Date with `setBuildDate` Script](#build-date-with-setbuilddate-script)\r\n- [Deployment](#deployment)\r\n- [Contribution](#contribution)\r\n- [License](#license)\r\n\r\n## Introduction\r\n\r\nThis boilerplate project provides a foundation to build a React web application integrated with Google Apps Script for backend functions, specifically for interacting with Google Sheets. It uses Vite for development and builds, React Router for multipage support, and supports dynamic theming with React Bootstrap and Bootswatch.\r\n\r\n## Features\r\n\r\n- **Multipage Routing**: Powered by React Router.\r\n- **Dynamic Theming**: Allows switching themes using Bootswatch themes.\r\n- **Google Apps Script Integration**: Backend communication with Google Sheets and other Google services.\r\n- **JSON Server**: Mock backend API for local development.\r\n- **Optimized Builds**: Single-file output using Vite for seamless Google Apps Script deployment.\r\n\r\n## Screenshots\r\n\r\nHere are some screenshots demonstrating the application in action:\r\n\r\n### Homepage and About\r\n\r\n\u003cdiv style=\"display: flex; justify-content: space-around;\"\u003e\r\n  \u003cimg src=\"screenshots/1.png\" alt=\"Homepage\" width=\"45%\"\u003e\r\n  \u003cimg src=\"screenshots/2.png\" alt=\"Dashboard\" width=\"45%\"\u003e\r\n\u003c/div\u003e\r\n\r\n\r\n### Various Themes\r\n\r\n\u003cdiv style=\"display: flex; justify-content: space-around;\"\u003e\r\n  \u003cimg src=\"screenshots/3.png\" alt=\"Settings Page\" width=\"45%\"\u003e\r\n  \u003cimg src=\"screenshots/4.png\" alt=\"Theme 1\" width=\"45%\"\u003e\r\n\u003c/div\u003e\r\n\u003cdiv style=\"display: flex; justify-content: space-around;\"\u003e\r\n  \u003cimg src=\"screenshots/5.png\" alt=\"Theme 2\" width=\"30%\"\u003e\r\n  \u003cimg src=\"screenshots/6.png\" alt=\"Theme 3\" width=\"30%\"\u003e\r\n  \u003cimg src=\"screenshots/7.png\" alt=\"Theme 3\" width=\"30%\"\u003e\r\n\u003c/div\u003e\r\n\r\n## Installation\r\n\r\n### Prerequisites\r\n\r\n- Node.js (v14 or higher recommended)\r\n- Google Apps Script CLI (CLASP)\r\n\r\n### Setup\r\n\r\n1. **Clone the repository**:\r\n\r\n    ```bash\r\n    git clone https://github.com/yourusername/react-google-appsscript-boilerplate.git\r\n    cd react-google-appsscript-boilerplate\r\n    ```\r\n\r\n2. **Install dependencies**:\r\n\r\n    ```bash\r\n    npm install\r\n    ```\r\n\r\n3. **Configure Google Apps Script**:\r\n\r\n    - Login with CLASP:\r\n      ```bash\r\n      npm run login\r\n      ```\r\n    - Check your login stauts with CLASP:\r\n      ```bash\r\n      npm run loginStatus\r\n      ```\r\n    - Create a new Apps Script project (or link an existing one):\r\n    While creting a new apps script make sure you have used webapp from the dropdown menu.\r\n     \r\n      ```bash\r\n      npm run create\r\n      ```\r\n      or, to specify a custom title and root directory:\r\n\r\n      ```bash\r\n      npm run create -- --title \"Custom Project Title\" --rootDir \"./dist\"\r\n      ```\r\n\r\n    - Move `.clasp.json` to the root directory if created in `dist`.\r\n\r\n4. **Google Apps Script Scopes**:\r\n\r\n   Update `public/appsscript.json` with necessary scopes as per your requirements, such as:\r\n\r\n   ```json\r\n   {\r\n     \"oauthScopes\": [\r\n       \"https://www.googleapis.com/auth/spreadsheets.currentonly\",\r\n        \"https://www.googleapis.com/auth/userinfo.email\"\r\n       \"https://www.googleapis.com/auth/script.external_request\"\r\n     ]\r\n   }\r\n   ```\r\n\r\n### Development Server\r\n\r\n1. Start the development server:\r\n   ```bash\r\n   npm run dev\r\n   ```\r\n\r\n   The app will be accessible at `http://localhost:5173`.\r\n\r\n2. **Start JSON Server**:\r\n   To mock API requests locally, run:\r\n   ```bash\r\n   npm run json-server\r\n   ```\r\n\r\n   JSON Server will start at `http://localhost:3001`, and you can adjust data in `data/db.json` for testing. See the section [using JSON Server for Local Development](#using-json-server-for-local-development) on how to create a local database in `data/db.json`.\r\n\r\n## Theme Customization\r\n\r\nThis boilerplate includes support for dynamic theming with React Bootstrap and Bootswatch. You can change themes by updating the dropdown in your app to apply different Bootswatch themes.\r\n\r\n## Using JSON Server for Local Development\r\n\r\nDuring local development, this project uses JSON Server to mock API requests, allowing you to simulate data responses that would typically come from Google Apps Script functions. The `data/db.json` file in the data directory serves as the mock database.\r\n\r\n### Setting up`db.json`\r\n\r\nCreate a `data/db.json` file with Keys to match function names, thatb is, each key in `db.json` should exactly match the name of the corresponding function in Google Apps Script. This allows the application to seamlessly switch between using local mock data and real data from Google Apps Script without code changes. Here is one such example. \r\n\r\n```json\r\n{\r\n  \"getData\": [\r\n    { \"id\": 1, \"name\": \"Alice\" },\r\n    { \"id\": 2, \"name\": \"Bob\" }\r\n  ],\r\n  \"getUserInfo\": {\r\n    \"userId\": \"12345\",\r\n    \"name\": \"John Doe\",\r\n    \"email\": \"johndoe@example.com\"\r\n  }\r\n}\r\n```\r\n\r\nRun the server with:\r\n\r\n```bash\r\nnpm run json-server\r\n```\r\n\r\nYou can then access the mock API at `http://localhost:3001/getData` or `http://localhost:3001/getUserInfo`.\r\n\r\n\r\n## Build Date with `setBuildDate` Script\r\n\r\nThe `set-build-date` script automatically sets the current build date and time in the `.env` file before building the project. This can be useful for tracking build versions or displaying build information in the application.\r\n\r\n### How It Works\r\n\r\n1. **Define Date and Time**: The script gets the current date and time in ISO format, then extracts the date (YYYY-MM-DD) and time (HH:MM).\r\n2. **Update or Insert**: The script reads the `.env` file content, looks for an existing `VITE_BUILD_DATE` entry, and updates it with the new date and time. If the entry doesn’t exist, it appends a new line with `VITE_BUILD_DATE=\u003ccurrent_date_and_time\u003e`.\r\n3. **Write Back to File**: The updated content is saved to `.env`.\r\n\r\n### Usage\r\n\r\nThe `setBuildDate` script is run automatically before each build through the `prebuild` script in `package.json`. This setup ensures that the build date is always up-to-date before deployment.\r\n\r\n## Deployment\r\n\r\n### Important Checks\r\n\r\n- `public` Directory: This directory must contain `appsscript.json`, which defines the Apps Script configuration. Additionally, any JavaScript files that interact with Google Sheets (e.g., `doGet.js` for serving the frontend, `getData.js` for fetching data) should be stored here.\r\n\r\n\r\n1. **Build for Google Apps Script**:\r\n   ```bash\r\n   npm run build\r\n   ```\r\n\r\n   This will output files into the `dist` directory, compatible with Google Apps Script.\r\n\r\n2. **Deploy with CLASP**:\r\n   ```bash\r\n   npm run publish\r\n   ```\r\n\r\n3. **Open in Apps Script**:\r\n   ```bash\r\n   clasp open\r\n   ```\r\n\r\nTo deploy as a web app, go to **Deploy** \u003e **Test deployments** in the Apps Script editor.\r\n\r\n## Contribution\r\n\r\nContributions are welcome! Fork the repository and submit pull requests with your proposed changes.\r\n\r\n## License\r\n\r\nThis project is licensed under the [MIT License](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frjanain%2Freact-google-appsscript-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frjanain%2Freact-google-appsscript-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frjanain%2Freact-google-appsscript-boilerplate/lists"}