Mit Svelte eine leistungsfähige Google-Apps-Script-Web-App bauen

Es gab einen Fall, in dem ich eine einfache App oder ein Tool bauen wollte, das eine Tabellenkalkulation als Datenbank verwendet und über die Web-App-Funktion von Google Apps Script veröffentlicht wird.

Für S3 oder eine andere Hosting-Plattform war das zu klein, aber die Tabelle direkt zu bearbeiten war auch nicht ideal. In so einer Situation kann man mit diesem Ansatz eine Web-App mit Svelte, React oder Vue bauen.

Repository

svelte-with-tailwindcss-on-gas

Das Repository ist so eingerichtet, dass sich die GitHub-Template-Funktion nutzen lässt.

Wenn TailwindCSS nicht benötigt wird, kann es problemlos entfernt werden.

Tech-Stack

• Svelte
• Vite
• TailwindCSS
• gas-client

Verzeichnisstruktur

Das Verzeichnis client bündelt die Frontend-Implementierung mit Svelte.

Das Verzeichnis server bündelt die serverseitige Implementierung, die auf GAS läuft.

src/
├── client/
│   ├── api/
│   │   ├── mocks
│   │   └── index.ts
│   ├── components
│   ├── features
│   ├── stores
│   ├── types
│   ├── utils
│   ├── App.svelte
│   └── main.ts
├── server/
│   ├── main.ts
│   └── types.ts
└── vite-env.d.ts

Serverseite

Mit der GAS-Web-App-Funktion HTML ausliefern

Fügen Sie in server/main.ts eine doGet-Funktion hinzu.

Selbst wenn man den title-Tag oder das Favicon im Frontend ändert, wird das nicht übernommen. Wenn das gebraucht wird, sollte es in doGet gesetzt werden.

const HTML_TITLE = "App name";
const HTML_FAVICON_URL = "https://example.com/favicon.ico";

function doGet() {
  const html = HtmlService.createTemplateFromFile("index.html").evaluate();
  html.setTitle(HTML_TITLE);
  html.setFaviconUrl(HTML_FAVICON_URL);
  return html;
}

API-Endpunkte erstellen

In server/main.ts müssen einfach nur die Funktionen exportiert werden, die als Endpunkte dienen sollen.

type APIResult<T> =
  | {
      ok: true;
      data: T;
    }
  | {
      ok: false;
      error: Error;
    };

const doSomething = (): APIResult<string> => {
  return {
    ok: true,
    data: "success",
  };
};

export { doSomething };

Frontend

Die serverseitige API wird in src/client/api/index.ts angebunden.

Intern verwendet das google.script.run.

import { GASClient } from "gas-client";
import type * as Server from "../../server/main";

const { serverFunctions } = new GASClient<typeof Server>();

export const APIClient = serverFunctions;

Die serverseitige API aufrufen

<script lang="ts">
  import { APIClient } from "./api";

  const promise = APIClient.doSomething();
</script>

{#await promise}
<div>Loading...</div>
{:then result}
<p>{result}</p>
{:catch error}
<p>error</p>
{/await}

Zusammenfassung

Durch die Kombination von Google Apps Script und Svelte lässt sich eine leistungsfähige Web-App mit einer Tabellenkalkulation als Backend bauen.

Mit gas-client können GAS-Funktionen typsicher aufgerufen werden, was auch die Developer Experience verbessert.