Google script: use html file from imported project

I want to keep common resources, such as css and js, in a common google script project and then import them in different projects (web apps)

So, instead of using a local file:


    <?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>

I want to use an asset from an imported file (Resources > libraries > import project)

Solution

In your library, you need both the shared HTML files as well as functions that will return their content. You can then call those functions in your projects.

Library

Code.gs:

/**
 * Gets the CSS file as HTML and returns its content.
 * @returns {string}
 */
function getCss() {
  return HtmlService.createHtmlOutputFromFile("CSS").getContent();
}

CSS.html

<style>
  p {
    background-color: yellow;
  }
</style>

Project

Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile("Index").evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= Library.getCss(); ?>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>