Google App Script React Template

Starting a web project always seems so difficult. Hundreds of questions seem to inject themselves into my mind. What language and technologies should I use? Where will I deploy the result? (Basically all the questions that have nothing to do with the project itself).

After running through this cycle a number of times, I decided to create a template to allow me to focus on the project implementation rather than project infrastructure.

At its initial state the template gives you a baseline javascript web app that runs a React frontend hosted by a Google App Script (GAS) backend. While Google App Script is usually used for automating business processes across multiple Google Services, it can also be a platform for hosting web applications. Unfortunately, the App Script Web-based IDE is not very user friendly when it comes to building performant SPAs. Luckily webpack allows transpilation of modern JavaScript syntax and functionality to more native and widely supported versions of the JavaScript language. By combining the power of webpack, react and Google App Script (via the Clasp CLI), we can create modern-looking web apps with your already familiar Google Services. This template comes pre-built with an example call to the GAS backend which updates a single cell within a Google Spreadsheet but gives you the bare framework to add as many Google Service integrations you want.

Essentially, think of this as a React SPA with a Google Sheets database. And while it does sound a little in-formal and definitely less cool than setting up a Kubernetes cluster of five different images spread over twenty containers, this GCP React Template is honestly all you need to build efficiency in your small business or even your daily life without any major technical hurdles.

All code for the "frontend" is stored under src/client and all code for the "backend" is stored under src/server. To make calls between the client and server directories, a global function must be declared within the code.ts file of the server directory, and the client calls this function via a google.script.run function call as shown below:

// src/server/code.ts

// @ts-ignore
global.FormSubmit = (formData) => {
    const scriptProps = PropertiesService.getScriptProperties();

    const sheetId = String(scriptProps.getProperty('MAIN_SHEET_ID'));
    const sheet = SpreadsheetApp.openById(sheetId).getSheets()[0];

    sheet.getRange(1, 1).setValue(formData.newValue);
}

// src/client/root.tsx

public handleSubmit = (e) => {
...
    // @ts-ignore
    google.script.run
    .withSuccessHandler(this.handleFormSuccess)
    .withFailureHandler(this.handleFailure)
    .FormSubmit(document.getElementById('form'));
...
}

The withSuccessHandler and withFailureHandler functions allow you to set callbacks for both a successful and unsuccessful response from your backend FormSubmit call. As you can see the last function to be called is the function you defined within the server side code.ts file. For more information about the client side API for run please reference Google's Documentation.

With some of the basics out of the way, you should be able to hit the ground running by setting up your very own Google App Script Web App. Keep in mind this is just a template so feel free to add more complex UI dependencies or more Google Service integrations into your very own implementation! Hopefully this template helps you worry less about the backend and gets you more time implementing your awesome ideas!

Check out the project here: GCP React Template

Related Projects:
React-Google-Apps-Script: Really helped kickstart this project and aided with my own perils of how webpack works.

budget-app: An example use case of this template; created by me to help aid recording and budgeting my monthly expenses. I use this nearly every day.

dirtyspokes-series-app: A more niche use case of this template; created by me to help a local trail running company keep track of series points for semi-annual awards to top runners in the district.