codesandbox上でGAS(GoogleAppsSqript)を構築する方法について

実現したいこと

codesandbox上でGAS(GoogleAppsSqript)を使ったクイズアプリを作成したい。

前提

codesandbox上でGAS(GoogleAppsSqript)を使ったクイズアプリを作成したいと考えています。
GASはクイズデータの格納と取り出しに使い、htmlなどのコードはcodesandbox上で書きたいのですが、その構築方法がわかりません。

GAS側

GASは簡単ですが取りあえずこのように書いてあります。

該当のソースコード

code.gs
1function doGet() {
2  // index.htmlからhtmlテンプレートを作成する
3  const htmlTemplate = HtmlService.createTemplateFromFile("index");
4
5  // htmlテンプレートを評価（「<?!= ... ?>」のコードを実行）して、htmlを返す。
6  // ウェブページのタイトルはMy問題集とし、viewportも設定する。
7  return htmlTemplate.evaluate()
8    .setTitle('問題集')
9    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
10}
11
12/**
13 * "問題"シートから問題データを取得し加工して返す
14 */
15function getSheetData() {
16  // このスプレッドシートの"問題"シートを取得する
17  const ss = SpreadsheetApp.getActiveSpreadsheet();
18  const sheet = ss.getSheetByName("問題");
19  
20  // 問題シートからデータを文字列で取得する（2次元配列）
21  const table = sheet.getDataRange().getDisplayValues();
22
23  // 2行目以降を切り出して、rowsに格納する
24  const rows = table.slice(1);
25
26  // 各行をオブジェクトに変換し、responseに格納する
27  const response = rows.map(row => {
28    return {
29      text: row[0],             // 問題文
30      correctAnswer: row[1],    // 解答
31      choises: row.slice(2, 7)  // 選択肢1〜5
32    }
33  })
34
35  // 作成したresponseを返す
36  return response;
37}

index.html
1<!DOCTYPE html>
2<html>
3<head>
4  <base target="_top">
5  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
6</head>
7<body>
8  <div id="app">
9    <template v-if="page === 'start'">
10      <?!= HtmlService.createHtmlOutputFromFile('start').getContent(); ?>
11    </template>
12    <template v-else-if="page === 'practice'">
13      <?!= HtmlService.createHtmlOutputFromFile('practice').getContent(); ?>
14    </template>
15    <template v-else-if="page === 'result'">
16      <?!= HtmlService.createHtmlOutputFromFile('result').getContent(); ?>
17    </template>
18  </div>
19  <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
20</body>
21</html>

practice.html
1<!-- 問題番号 -->
2<h2>Q{{ activeQuestionIndex + 1 }}</h2>
3
4<!-- 問題文 -->
5<p>{{ activeQuestion.text }}</p>
6
7<!-- 選択肢のラジオボタン + ラベル -->
8<template v-for="(choise, i) in activeQuestion.choises">
9  <label
10    v-if="choise.text"
11    :for="`choise${i}`" 
12    :class="{ 'label-correct': choise.isCorrect && showAnswer }"
13    style="display: block"
14  >
15    <input
16      type="radio"
17      :id="`choise${i}`"
18      :value="i"
19      v-model="userAnswer"
20      :disabled="showAnswer"
21    >
22    {{ choise.text }}
23  </label>
24</template>
25
26<!-- 正解 or 不正解の表示 -->
27<p v-if="showAnswer">
28  <span v-if="isCorrect" style="color: red;">{{ "正解" }}</span>
29  <span v-else style="color: purple;">{{ "不正解" }}</span>
30</p>
31
32<!-- 回答する / 次へ / 終了 ボタン -->
33<button v-if="!showAnswer" @click="handleClickSubmit">回答する</button>
34<template v-if="showAnswer">
35  <button v-if="activeQuestionIndex < questions.length - 1" @click="handleClickNext">次へ</button>
36  <button v-else @click="handleClickQuit">終了</button>
37</template>

result.html
1<h2>result</h2>
2
3<p>
4  {{ questions.length }}問中 {{ correctCount }}問 正解しました。
5  （正答率：{{ correctRate }} %）
6</p>
7
8<button @click="handleClickStart">もう一度</button>