Google Apps Script WEB APP with React JS and Router Tutorial 

React JS Series ru-vid.com/group/PLRmEk9smitaUg1eDmUKgCeJD9IavqurZ- CLASP ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lwxiEB-Mnys.html

This is absolutely amazing and exactly what I was looking for. Been a huge follower of all your "Learn Google Speadsheets", but I'm just now discovering this channel.

Great video! Thanks for the clear tutorial on using Google Apps Script with React JS and Router. It's really helpful to see this kind of integration in action. I'm curious, do you think similar functionality could be achieved using NextJS without SSR? Would love to see a tutorial on that if it's possible. Keep up the awesome work!

Wow!!! Thank you very much! I was struggling for a long time with including additional libraries and frameworks into Apps Script

Oh aren't you the Learn Google Spreadsheets guy? :) What a great video. Well done. Thanks a lot. First time seeing this channel. Subscribed.

23:00 Important note for anyone following this in May 2024, Parcel v2.12.0 requires a named import for React DOM in index.js. Your import statements at the top in `index.js` should look like this, otherwise when you run `npm start` you will not see anything in your browser window. import { createRoot } from "react-dom/client" import App from "./App"

My head is blown away by the quality of your tutorial man.. never thought this was possible in Google Apps Script.. So it's possible to build full stack app in Google Spreadsheet alone yeah? Would you do follow-up videos on styling? I'd love to watch them, hell, I'd pay for them. You are one awesome teacher my dude.

This is awesome! You are so good at clearly communicating how to do these things! Would you be able to show a similar setup for VUE JS (3)? Thank you for all your great work!

It's amazing, is it possible you can dig deeper on using backend functions in the React App?

Hi, how to use google spreadsheet data as the backend data source for this React JS webapp example? Hope you could consider making this additional tutorial.

Teacher! I have made many web apps with apps script thanks to your videos. But a few hous ago, suddenly it shows this error in console. This document requires 'TrustedHTML' assignment. Uncaught TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment. and it stops. Is it something that Google changed its policy? I need urgent help. Please can you help me out?

Excellent tutorial!!! Congratulations! Could you make a tutorial using VITE JS? 👏👏👏👏

Awesome tutorial. Thank you!

import { createRoot } from "react-dom/client" import App from "./App" const container = document.getElementById("app") const root = createRoot(container) root.render() Hi, in the latest parcel doc, the react docs gave this instead, i followed the steps but once i created App.js under src folder, it underlines "./Apps" as error in index.js

Curious- will a public folder for image assets be compiled if it is outside of the src folder with parcel

Thank you very much. Exactly the video I needed.

In his previous video for cloning the project he used --rootDir ./src instead of ./apps-script on this one. For anyone who did the cloning from prior video it is important to change the rootDir for it to work.

what is this app that makes your cursors grow bigger for some seconds and then go back normal again ?

Hi! I have tried to use VueJS 3 and Parcel JS to implement this kind of thing, but the problem is, when it gets pushed to GAS, it will just display a blank page and an error in console like this: "Uncaught SyntaxError: missing ) after argument list userCodeAppPanel:5486" Hope you can help me. Thanks!

I followed all steps still not getting CSS working in Google script app but my localhost working what could be the reason?

Never thought this could be done! 👍

would have been good if you showed us how to setup tailwindcss

This was a great tutorial! What I would like to do would be to clasp push code either to a different script project, or multiple script projects at the same time. Is there a way to do that?

how can i access google function in the frontend react js

Thank you so much!

what about file upload method my all string entry going into sheet but somehow only uploaded file path going into sheet as string how to upload files using react with apps script its working with vanilla js but not react js why? any inside

Very helpfull. Thanks a lot

Hello! I'm trying to upload an app to appscript, I'm using tailwind and in local works fine, but when I upload to google it shows blank, what could it be? 😢

sir, clasp create not able to create file name 'React Test Project', instead just creating 'React

Great video ! Can u make autofill for website video ??

Thank you for this tutorial! I have one issue though. When i update the react app, the changes are pushed to apps script but the dev link disappears. So the only way I can see the changes on the web side of things, is to re-deploy a new version of the app every time. For some reason after the changes are pushed, the dev link gets deleted, not sure if this is a new bug in apps script.

Wow! This is a game changer

Teacher how to make crud? with sheet google

Hi, sorry, could you make a tutorial how to use tailwindcss and ant desing with react in a proyect and push it to google apps script?

Tried following this, but my build script generates a bunch of weird partial files like "index.88584e4c.js.33620.1" or "index.html.33620"

Hi! I followed your tutorial and it is great! I'm currently writing an addon for Gmail using react and wanted to ask you a question. I successfully generated an HTML file from my react using parcel, now I wish to include this HTML code in my card that's located in my doGet() function. The problem is, it doesn't let me include any code that's in a tag. How do I overcome this problem? At the moment I'm just trying to write "hello world" using react in a Gmail addon card.

Thank you so much.

what is the oldest version of Node JS this will work on if we can not upgrade?

Thanks!

Hello, is it possible to do RTC React with Google text editor

Man you are awesome

Hi, can we use functions such as google.script.run within the react frontend?

how to add bootstrap CDN in this ?

Sir how to overcome initial fear to learn new technologies ? Deep respect for you from INDIA

Hello! great video! It's possible use jwt in Google app script?

Good 😊😊😊😊

React with router in gap

be regular .

Hi, thanks so much for this tutorial. I tried to follow it to the letter but when I run the npm start command I get the following error. I am really stuck with it. Please help! Error: Cannot find module './artifacts/index.win32-ia32-msvc.node' I hope this will shed some light: PS C:\Users\mbenb\Desktop\webAppReact> npm start > webappreact@1.0.0 start > parcel src/index.html --dist-dir ./apps-script Error: Cannot find module './artifacts/index.win32-ia32-msvc.node' Require stack: - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\source-map\parcel_sourcemap_node\index.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\source-map\dist ode.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\utils\lib\index.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\core\lib\public\Config.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\core\lib\utils.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\core\lib\public\Environment.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\core\lib\public\Asset.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\core\lib\Parcel.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\core\lib\index.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\parcel\lib\cli.js - C:\Users\mbenb\Desktop\webAppReact ode_modules\parcel\lib\bin.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (C:\Users\mbenb\Desktop\webAppReact ode_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object. (C:\Users\mbenb\Desktop\webAppReact ode_modules\@parcel\source-map\parcel_sourcemap_node\index.js:15:18) at Module._compile (C:\Users\mbenb\Desktop\webAppReact ode_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\source-map\\parcel_sourcemap_node\\index.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\source-map\\dist\ ode.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\utils\\lib\\index.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\core\\lib\\public\\Config.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\core\\lib\\utils.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\core\\lib\\public\\Environment.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\core\\lib\\public\\Asset.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\core\\lib\\Parcel.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\@parcel\\core\\lib\\index.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\parcel\\lib\\cli.js', 'C:\\Users\\mbenb\\Desktop\\webAppReact\ ode_modules\\parcel\\lib\\bin.js' ] }

just spent lots of time todaydoing the same with astro js appscript template generator, here is my astro config if someone want to try => import { defineConfig } from "astro/config"; import fs from "fs"; import path from "path"; export default defineConfig({ trailingSlash: "always", output: "static", build: { format: "file", redirects: true, inlineStylesheets: "always", client: "./thefolderofyourprojectwillbuild", }, onAfterBuild() { // Function to find the JavaScript file in the dist directory function findJsFile(directory) { const files = fs.readdirSync(directory); for (const file of files) { if (file.endsWith(".js") && file.startsWith("everything")) { return path.join(directory, file); } } return null; } // Function to find the CSS file in the dist directory function findCssFile(directory) { const files = fs.readdirSync(directory); for (const file of files) { if (file.endsWith(".css")) { return path.join(directory, file); } } return null; } // Read the bundled JavaScript file const jsDirectory = "./dist/_astro"; // Update this path according to your setup const jsFilePath = findJsFile(jsDirectory); if (!jsFilePath) { console.error("Failed to find the JavaScript file."); process.exit(1); } const jsContent = fs.readFileSync(jsFilePath, "utf8"); // Read the CSS file (if it exists) const cssDirectory = "./dist/_astro"; // Update this path according to your setup const cssFilePath = findCssFile(cssDirectory); const cssContent = cssFilePath ? fs.readFileSync(cssFilePath, "utf8") : ""; // Read the index.html file let indexContent = fs.readFileSync("./dist/index.html", "utf8"); // Update this path according to your setup // Replace placeholders with actual content indexContent = indexContent.replace( "", `${jsContent}` ); indexContent = indexContent.replace( "", `${cssContent}` ); // Write the updated content back to index.html fs.writeFileSync("./dist/index.html", indexContent, "utf8"); // Update this path according to your setup }, });

Great video! Thanks for the clear tutorial on using Google Apps Script with React JS and Router. It's really helpful to see this kind of integration in action. I'm curious, do you think similar functionality could be achieved using NextJS without SSR? Would love to see a tutorial on that if it's possible. Keep up the awesome work!