Use project Javascript and CSS files in a Google Apps Script web app?

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

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.