Use project Javascript and CSS files in a Google A

Question

If I create a simple HTML web app in Google Apps Script, like this:

function doGet() {
    return HtmlService.createHtmlOutputFromFile("index.html");
}

and index.html looks like this:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div>Test</div>

is it possible to add JS and CSS files as part of the project and include them using script and link tags, or do they have to be inline/hosted elsewhere?

Answer 1

You can directly render a file inside a scriptlet tag.

<?!= HtmlService.createTemplateFromFile("example.js").getRawContent() ?>

Create the example.js.html file in your apps script project. While rendering in the scriptlet tag do not mention the extension ".html"

Answer 2

For now, it is not doable to have your CSS and JS script to be part of your Google Apps Script project. You will have to host it somewhere else and point the URL in your template.

Answer 3

Here is a workaround I have found useful:

1. Add this function to your server-side Javascript:

   function getContent(filename) {
       return HtmlService.createTemplateFromFile(filename).getRawContent();
   }
   

2. Add a second 'html' file to your project that contains only the JS or CSS surrounded by <script> or <style> tags as appropriate.

   <!-- myscript.js.html -->
   <script>
       alert("Script included!");
   </script>
   

3. Now you can include the script in your main HTML template like this:

   <?!= getContent("myscript.js") ?>
   

This way, you can have your JS and CSS split into as many files as you like and keep them all accessible from within the Apps Script project.

Answer 4

Google provides a similar solution here.

Basically, they suggest you add this function to your .gs file:

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

and add one or both of these to your .html file:

<?!= include('Stylesheet'); ?>
<?!= include('JavaScript'); ?>

the names in quotes of course referring to separate .html files containing your JS or CSS code with <script> or <style> tags.