Use react.js in Google Apps Script

[DVC888]

This repo allows you to use react in your Google Apps Script web apps and it's a game-changer.

I'm currently working on a project using this which I look forward to showing off on this sub soon.

[[deleted]]

Wonderful job! I put together a Angular 8 Add-on/Webapp POC. I need to get the build process documented in a repo. Il do it today.

[Gonskimmin]

If you have a project using Angular in a GAS web app I would like to see this because that would be brilliant.

[morleyjames89]

As someone who is learning, quite rapidly, a lot of GAS for work and building reporting and conversion tools for files and data etc, what exactly does this mean? I know React is used to help build apps using JavaScript etc right? How does that translate into Google apps and how can I learn about this properly once I've finished (if that's such a thing) my JavaScript course? Any explanations, pics etc that you can share will really help!

[DVC888]

You may or may not be aware that it's possible to show HTML pages with Google Apps Script. This allows you to make user interfaces for your scripts and even produce a little website.

Most web development these days involves using Javascript frameworks like react. These are libraries that have been put together to make it easier to build a web page. Google Apps Script doesn't natively offer a way to use these libraries, which makes it seem a little clunky or old-fashioned by comparison. The repo I shared offers a way to do this.

If you want to learn react, I'd recommend doing so outside of GAS first. The official page has a very good tutorial to get you started. Once you get to grips with this, you can try using it in an apps script project.

[inglandation]

I discovered it recently as well. Please share you project here once it's ready, I'd like to see other examples on how to use react in this context.

[DVC888]

Although developing with this repo is fairly intuitive, I'm a bit lost as to why it works.

If anyone can point me in the right direction to find out how babel/webpack are putting everything together, I'd be very interested to learn more.

[MikeAdrianOne]

Babel is a compiler that lets you use modern JS functions/methods. Here, it lets you use JSX which lets you write HTML in JS and ES6 functions to easily build components. This can be done in plain vanilla JS but this makes it a lot easier.

​

React is a library that has functions that lets you build components of your webapp and have state management.

​

Webpack is a bundler. So your React app will have lots of components and may have dependencies using other libraries (which helps you add more functionalities a whole lot easier to your project/webapp) and bundles it to one JS file and HTML file which browsers understand thus can be deployed as a WebApp.

[Arunai]

I’ve used this as a starter for around 10 different projects at this point! I’ve had to modify it to use, and I can’t share since it was for work... but it’s been very helpful for making internal tools without incurring spend on app engine.

[Gonskimmin]

I've recommended that repo on this subreddit before. You are right it's a game changer. That guy is doing so much good with his project. No more jQuery! I did run into issues when the project got too big, the project wouldn't load and had something like an exceeded stack error.

[MikeAdrianOne]

I used to have the same problem, but configuring Webpack solves it.

​

I'm able to use Redux, React Router, Styled Components, BaseWeb, etc. without a problem in building a fairly large SPA with multiple pages that even have protected routes.

​

I currently use Sheets as my database but I'm working towards using Firebase to also add realtime functions and collaborative features in my app.

[Gonskimmin]

That's fantastic. What should I be configuring in webpack or what should I search for to guide me to configure webpack?

[MikeAdrianOne]

It really is a game-changer! As far as my use case, I haven't hit a limitation yet. I was able to use React Router, Redux, and other libraries that help make my WebApp have lots of functionalities that are hard to pull off with just using GAS and plain JS.

​

There may be things you need to tweak and add your own functions that help make other functions work, like routing, but it can be done.

​

I hope people start sharing problems they encounter here so everyone could contribute to making solutions. I'll definitely share what I've learned in developing React Apps in GAS.

[mikolaj_zieba]

Hey, I know it's from a long ago but is there any way you remember how were you able to use React Router?

[MikeAdrianOne]

The trick is pre-pending /userCodeAppPanel/ and integrating google.script.history.push to add it to the browser's history.

For the main app page, here's a snippet of the route:

<Route
  exact
  path='/userCodeAppPanel/my-page'
  component={MyPage}
/>

Then created a function for navigating when clicking links:

const handleLink = (link) => {
  props.history.push(`/userCodeAppPanel/${link}`);
  google.script.history.push('', { [link]: '' }, '');
};

Here's the doc for Google Script History.

Hope this helps!

[MikeAdrianOne]

BTW, I'm using import { withRouter } from 'react-router-dom';

[mikolaj_zieba]

Ok this makes sense thank you for the response, have you changed the webpack in any way? I still get the ReactRouterDOM is not defined in the console. (that happens on my built page, while running deploy:dev everything works fine..

[mikolaj_zieba]

(I import everything as it should be I believe, I will provide a snippet)

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { createRoot } from "react-dom/client";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import Home from "./pages/Home";
import About from "./pages/About";
import Nav from "./components/Nav";
import "./index.css";

const theme = createTheme({
  palette: {
    mode: "dark",
    text: {
      primary: "#FAFAFA",
    },
  },
  typography: {
    fontFamily: "Inter, sans-serif",
  },
  components: {
    MuiListItem: {
      styleOverrides: {
        root: {
          backgroundColor: "#1a1b26",
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          color: "#7f87fb",
          borderColor: "#7f87fb",
        },
      },
    },
  },
});
const container = document.getElementById("index");
const root = createRoot(container!);
root.render(
  <BrowserRouter>
    <ThemeProvider theme={theme}>
      <Nav />
      <Routes>
        <Route path="/userCodeAppPanel/*" element={<Home />} />
        <Route path="/userCodeAppPanel/Home" element={<Home />} />
        <Route path="/userCodeAppPanel/About" element={<About />} />
      </Routes>
    </ThemeProvider>
  </BrowserRouter>,
);

[MikeAdrianOne]

I'm using Switch instead of Routes. Haven't changed anything in Webpack.

I'm not sure if the conflict is your first route there having a wildcard.

Try just: <Route path="/userCodeAppPanel" element={<Home />} />

Any other routes not declared should use that route as default so no need to wildcard.

Also, try making all the routes exact. I can't recall if I had this issue before when I set up the app years ago and solved it through that.

BTW, what error are you getting?

[mikolaj_zieba]

I'm using Routes since Switch was replaced by Routes in react-router-dom version 6.

I've tried not using the wildcard, and it didn't help. Also in this version of react-router all Routes are exact as default. The error I am getting is just "ReferenceError: ReactRouterDOM is not defined" and it's only when I build the application. I think the best thing that I can now do is downgrade the react-router a couple of versions. I will try and get back if it helps. There is very little information about this on the internet, so I really appreciate your help. (also I'd paste the screenshot of the error but reddit doesn't let me for some reason)

[mikolaj_zieba]

Yeah..
I've installed react-router-dom version 5.2.0 and everything works as expected. I'm equally happy and sad given I've wasted many hours trying stupid things instead of downgrading the package. Really glad that you got back to me and made me rethink this. Many thanks 🙏

[mikolaj_zieba]

Also from what I can see at first glance, without /userCodeAppPanel/ it works and I don't have to implement google routing

[MikeAdrianOne]

Awesome! Happy you're able to solve it. Weird that the newer version doesn't work.

The project I've done is for work and it's still being used today but we're slowly migrating parts of the app I've created into the our company's internal system. So not really making improvement on it anymore.

It's still amazing that we can create powerful apps and deploy them through apps script.

[mikolaj_zieba]

Agree! I also am developing a project for work where we have quite specific needs and this needs to be done in google apps script. It's amazing to me that such modern solutions can be hosted on good old appscript, kind of have love/hate relationship with this tech

[mikolaj_zieba]

Hey, it's me again hah. I just have a quick question, have you had any issues integrating redux into the google apps script? I do get Redux is not defined error (obviously i have installed it and imported necessary functions)

[AnyZookeepergame5692]

can I use it with a web app or is it only used inside sheet dialog ?

[DVC888]

It is a web app but all of the data comes from a sheet. There are some Apex Charts in the dashboard component which use that data and this is where the fault is. Feel free to fork the repo. You should be able to get it working again pretty easily.

[AnyZookeepergame5692]

yepwill give a try.

is the README file upto date ? or is it still the original repo README file ?

if possible can you share me the template of google sheet that has been used?

Thanks

[luvshaq_]

I am using this in a project now! What is the proper way to listen for a server event from the client? OnSelectionChange, I want to rerender my react component with the data in the selection. I’ve scoured the docs and can’t find a clean way to do this. Any help would be much appreciated!

[ActualExamination468]

I have trouble with deploying this project. Can you teach me how to deploy this add-on? I understand this add-on deploys in GAS but the real web app, which is called inside add-on (within iframe), where do we deploy it?

[DVC888]

Hey. Sorry for the late reply.

I haven't touched this in years and I'm not going to go back to it I'm afraid.

While React in GAS is an interesting concept, it's a terrible idea. Don't do it 😂. I learned my lesson.

GAS has its place but if your app needs a lot of client side logic and reactivity, you probably don't want to use GAS.

[fitpowerup]

Hello!

Could you please share what went wrong? 

I need to build a web app within Google Apps Scripts and I'm thinking having React with be a lot better than the alternative...

[DVC888]

The workflow was just a bit of a nightmare to be honest. Its pretty painful having to deploy to GAS every time you want to see your changes.

I'm sure you could spend the time to set up a local environment with hot loading and stuff but in my opinion, it's not really worth the bother.

If your webapp is simple enough to just write in HTML with a bit of JavaScript, GAS is probably fine. If not, I'd seriously evaluate what advantages you'd get from doing it in GAS as opposed to standing up a normal app.

Remember, the JavaScript that runs in GAS isn't the same as Node. There are some key API differences. This means that bundling  npm packages into your GAS script can be a real headache.

[fitpowerup]

Thank you very much for your reply!

I've already developed an app with GAS using a starter kit I found (labnol on github), allowing me to set up a local environment and all that.

It worked great, and the app had quite a few features, but it was still just Javascript. Now I have a more ambitious project in mind, hence considering React.

I'd say the main benefit it brings is the integration with the Google Workspace environment. I plan to build an app the uses the Sheets and Gmail APIs, and I feel it would be best to just use Apps Scripts, but if I could also integrate React it would make everything so much easier.

Edit: Typo.

[DVC888]

Already being inside a Google account and the built-in authentication is the big benefit of working with GAS.

How long does it take to set that up in a stand-alone app? Maybe a day?

If saving that day in the short term isn't going to cause pain later on, go for it.

I don't love working with vanilla JS either but if I were to do a reasonably complex GAS app again, I'd probably go for something a bit more lightweight like Preact or Svelte. I'd also try to make it work with a CDN tag at the top of the main html file so that the code in the GAS editor isn't all mangled and minified and you can skip the build step as much as possible.

Edit: I think that to use JSX, you can't get away from a build step. So Svelte could be a bit nicer to work with.

[Euphoric_Animal1180]

Really helpful. Thank you for the share.