I just wanted to say that I really love your videos! The way you explain everything is so clear and detailed, and I’ve learned so much from them. Thank you for sharing such valuable knowledge!
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"
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.
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.
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!
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!
@@ryanschaefer4847 ended up using vite and finding a plugin to put the compiled JavaScript and CSS into the index.html, Im sure parcel would work but I know vite much more and was able to handle a few of the problems I ran into better
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.
@@getitdonetube Styling as in making the navbar looks great, for example.. i saw in another TH-camrs videos, they were using boostrap or some sort of css tag. I'm sorry, I don't understand the exact term either..
Was anyone able to use this with MUI components or any component library? It does not load for some reason when I use components even though its a dependency
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?
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!
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
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?
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
Generally speaking, anything you can do with vanilla js you can also do with react. I'm not sure exactly what you're doing that doesn't work. But worst case you can always string encode the file and send it as string and then convert it back to a file on the server side.
@@getitdonetube yes i agree apprach will change in react thats the way i finding out.... thanks for the revert by the way.... hope i will figure out how to do that
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? 😢
@@getitdonetube thanks for your reply, the thing is now we have react router v6.4 and changes some things, now im learning this new router, thanks anyways!!
Hello google.script.run works fine but you will have to view your changes from the dev URL on GAS. localhost won't work since the google api is not defined
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.
He mentioned it in the begining of the vid. After you do the deployment settings in GAS, you need to sync/pull the project from G to your local computer. Otherwise you keep deleting the web app deployment config / dev link
It think if it supports ECMAScript modules it should be fine, but it's impossible to tell for sure without testing. I believe even though it's not supported by default it's possible to enable them starting version v14.1. Full support starts from v16 if I'm not mistaken.
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.
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.
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' ] }
@@getitdonetube Thanks again for your help. I have decided to restart from scratch and try to better understand the processes and learn about the tools. It's a great tutorial as are all your other ones. Thanks a lot for your effort and your help!
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!
React JS Series th-cam.com/play/PLRmEk9smitaUg1eDmUKgCeJD9IavqurZ-.html
CLASP th-cam.com/video/lwxiEB-Mnys/w-d-xo.html
I just wanted to say that I really love your videos! The way you explain everything is so clear and detailed, and I’ve learned so much from them. Thank you for sharing such valuable knowledge!
Thank You! 🙏
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"
Thank You!
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.
:)
Thanks!
Thank You!
Oh aren't you the Learn Google Spreadsheets guy? :)
What a great video. Well done. Thanks a lot.
First time seeing this channel. Subscribed.
Yea, same guy :)
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.
just use google.script.run the same way you do in a plain javascript file.
@@getitdonetube but not file upload vani js send file upload to drive but somehow not react js any help???
Wow!!! Thank you very much! I was struggling for a long time with including additional libraries and frameworks into Apps Script
👍
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!
Curious- will a public folder for image assets be compiled if it is outside of the src folder with parcel
how do you make it so react will get data from Google apps script function ?
For example : if I want to create a table of stuff from a google sheet?
what is this app that makes your cursors grow bigger for some seconds and then go back normal again ?
would have been good if you showed us how to setup tailwindcss
Awesome tutorial. Thank you!
Thank You!
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!
I haven't used Vue for a very long time, but I think the setup would be exactly the same if you use ParcelJS to compile it.
@@getitdonetube I have decided to invest more time learning React.
@@andyedwards3850 I figure as long as you're bundling this together it will work, was going to try it with svelte tomorrow, will report back
@@SorryStamin how'd it go?
@@ryanschaefer4847 ended up using vite and finding a plugin to put the compiled JavaScript and CSS into the index.html, Im sure parcel would work but I know vite much more and was able to handle a few of the problems I ran into better
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.
I'm not sure what you mean by "videos on styling".
@@getitdonetube Styling as in making the navbar looks great, for example.. i saw in another TH-camrs videos, they were using boostrap or some sort of css tag. I'm sorry, I don't understand the exact term either..
how can i access google function in the frontend react js
Excellent tutorial!!! Congratulations! Could you make a tutorial using VITE JS? 👏👏👏👏
Never thought this could be done! 👍
Was anyone able to use this with MUI components or any component library? It does not load for some reason when I use components even though its a dependency
Teacher how to make crud? with sheet google
Thank you very much. Exactly the video I needed.
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?
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?
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
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?
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
Generally speaking, anything you can do with vanilla js you can also do with react. I'm not sure exactly what you're doing that doesn't work. But worst case you can always string encode the file and send it as string and then convert it back to a file on the server side.
@@getitdonetube yes i agree apprach will change in react thats the way i finding out.... thanks for the revert by the way.... hope i will figure out how to do that
sir, clasp create not able to create file name 'React Test Project', instead just creating 'React
Don't use spaces.
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?
with parcel or another tool for compile it
Great video ! Can u make autofill for website video ??
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? 😢
Look at your build files and see what they look likr. Did you generate one HTML file for everything?
@@getitdonetube thanks for your reply, the thing is now we have react router v6.4 and changes some things, now im learning this new router, thanks anyways!!
Hi, can we use functions such as google.script.run within the react frontend?
Yes, of course.
hey! were you able to run google.script.run from react frontend? Can you tell me how?
Hello google.script.run works fine but you will have to view your changes from the dev URL on GAS. localhost won't work since the google api is not defined
Hello, is it possible to do RTC React with Google text editor
Technically yes, but the whole point of react is code splitting which you won't be able to do without a compiler.
Wow! This is a game changer
Thank you so much!
👍
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.
I haven't encountered this. Maybe it's something new. Make sure you have the right dev link.
I have the similar issue. After the code is pushed, the dev link could not work.
He mentioned it in the begining of the vid. After you do the deployment settings in GAS, you need to sync/pull the project from G to your local computer. Otherwise you keep deleting the web app deployment config / dev link
Hello! great video! It's possible use jwt in Google app script?
Sure, but you have to encode and decode the token yourself.
The biggest issue with apps script is that you can't post headers with requests and get those headers in your script.
what is the oldest version of Node JS this will work on if we can not upgrade?
It think if it supports ECMAScript modules it should be fine, but it's impossible to tell for sure without testing.
I believe even though it's not supported by default it's possible to enable them starting version v14.1.
Full support starts from v16 if I'm not mistaken.
@@getitdonetube thanks. I am on 14.4 and going through it now. No issues so far. This is a game changer!
Cool!
how to add bootstrap CDN in this ?
If you want CDN, you should be able to just add the link to CDN in HTML file.
OR you can install via npm and use bootstrap locally.
Thank you so much.
Good 😊😊😊😊
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.
👍
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.
React generates HTML, so card interface wouldn't work here.
Man you are awesome
React with router in gap
Sir how to overcome initial fear to learn new technologies ? Deep respect for you from INDIA
Do it for fun instead of having a set goal.
be regular .
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, 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'
]
}
try to download & install Microsoft Visual C++ Redistributable from Microsoft
@@getitdonetube Thanks for the reply. I have Microsoft Visual C++ 2015 - 2022 on my laptop. It's a new laptop.
Did you update your node version to 16?
@@getitdonetube Thanks again for your help. I have decided to restart from scratch and try to better understand the processes and learn about the tools. It's a great tutorial as are all your other ones. Thanks a lot for your effort and your help!
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!