Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React App Resizing Constantly When Deployed to Google Apps Script

I’m building a React app using the following tech stack:

  • Vite (frontend bundling)
  • Rollup (backend bundling)
  • React
  • TypeScript
  • Tailwind CSS
  • shadcn (component library)

The app works perfectly in my local development environment. However, when I deploy it to Google Apps Script (GAS) as a web app, the page content starts resizing constantly across the site. This behavior causes the scrollbars to appear and disappear repeatedly, as shown in this short clip:

[Include link to video clip or upload GIF]

Details About the Environment:

  • Deployment: Hosted via Google Apps Script.
  • Behavior: Resizing and scrollbar flickering occur when loading any page, even with mock or live data.

Questions:

  1. Has anyone encountered a similar issue when deploying a React app to Google Apps Script?
  2. Are there any known limitations or best practices for deploying apps to GAS that might affect layout or iframe behavior?
  3. Could Tailwind, shadcn, or any specific library in my stack be conflicting with GAS’s iframe handling?

I’m looking for any insights, solutions, or workarounds to prevent this constant resizing behavior when deployed to GAS. Thanks in advance for your help!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I finally figured it out, I think but basically it came down to a styling problem in my code.

    I'm using react and I had done the following in my layout.tsx

    return (
    <SidebarProvider>
      {/* menu sidebar */}
      <AppSidebar />
      <div className="flex flex-col flex-1">
        {/* header */}
        <AppHeader />

        {/* main content */}
        <main className="flex-1">{children}</main>

        {/* footer */}
        <Footer />
      </div>
    </SidebarProvider>`

    For whatever reason, I'm not a css expert, but it looks like the flex-1 in the <main> was conflicting with the parent div. All is to say that the parent div was already manaing the container size and after removing className="flex-1" from <main> all was working and no more recurring resizing.


  2. 0

    Limitations of Google Apps Script: Web Apps

    For starters, with your specific questions. It would require you to share your whole code to get some decent suggestions from the community for the reasons there is really no documented specific list that Web Apps has limitation from, based on the documentations.

    Second, Best Practices that are in the documentation are all provided on this documentation, while restrictions are on this documentation.

    With my previous experiences, it has a very quirky and limiting nature in terms using front end solutions like what you currently have in your Tech Stack, definite information about it is not documented and with that it is more on just slowly building it and just find out where the issue starts. Depending on your project, it might steer you away from using the platform and checks what are the non-negotiable and negotiable for your project.

    References:

    HTML Service: Best Practice

    HTML Service: Restriction

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search