Embedding a Svelte app in the Sheets sidebar

The Google Sheets add-on requires a menu and various controls in the sidebar. I originally intended to hand-craft the HTML and CSS, but that would be very fiddly.

Is it even possible to integrate a Svelte-developed app into the Google Apps sidebar? Yes. As you can see in the pic, I added the 'out of the box' demo Svelte app. For Google Apps Script fans, the details are below.

Step 1: In a projects folder, create the Svelte app (assumes node.js is already installed)

$ npx degit sveltejs/template svelte-app
$ cd svelte-app
$ npm install
$ npm run build

The built Svelte app is contained within 2 files in the public/build folder, namely bundle.js and bundle.css.

Step 2: Copy the contents of these bundle files to Google Apps Script files.

Google apps script does not allow you to upload and store .js and .css files as you would for a static web site. Instead, the contents of the bundle files must be stored in .html files which I have named as follows:

bundle_js.html

bundle_css.html

Edit bundle_js.html so that the contents are surrounded by <script> and </script> tags at the top and bottom respectively.
Likewise, edit bundle_css.html so that the contents are surrounded by <style> and </style> tags at the top and bottom respectively.

Step 3: Add a html file, e.g. 'svelte.html' to the Google Apps Script files

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <!-- Include any additional styles or scripts here -->
    <?!= include('bundle_css'); ?>
  </head>
  <body>
    <!-- Your HTML content goes here -->
    <?!= include('bundle_js'); ?>
  </body>
</html>

Step 4: Add the following code to Code.gs or onOpen.gs:

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Data-Wizard')
    .addItem('Display Svelte', 'displaySvelte')
    .addToUi();
}

function displaySvelte() {
  var html = HtmlService.createTemplateFromFile('svelte')
    .evaluate()
    .setTitle('Svelte-app in Sidebar');
  SpreadsheetApp.getUi()
    .showSidebar(html);
}

You should see a 'Data-Wizard' menu item appear. If not, refresh the page. The menu has a sub-menu 'Display Svelte'. Select that, and if all is well, you should see the demo Svelte app appear in the Sheets sidebar.

My next task is to see if I can get Bootstrap CSS working in the sidebar.

Backend to Frontend

Backend to Frontend

Embedding a Svelte app in the Sheets sidebar