To allow for modular code in a [[base/Google Apps Script/Google Apps Script|Google Apps Script]] [[web app]], we'll need a way to include [[JavaScript]] files in the page when it renders. In the example below, we have a` Code.gs`, `Form.html` and a `JavaScript.html` file.
> [!warning]
> You must evaluate the html template using `HtmlService.createTemplateFromFile(<filename>).evaluate()`. You cannot use the `HtmlService.createHtmlOutputFromFile(<filename>)` function if you want the JavaScript to be included.
In the `Code.gs` file, write the `include` function.
```javascript title: Code.gs
function showDialog() {
var html = HtmlService.createTemplateFromFile('Form').evaluate()
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(html, 'Upload Text File');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
```
In the `.html` file, "include" the JavaScript file (you can ignore the file extension).
```html
<!--Include custom JavaScript-->
<?!= include('JavaScript') ?>
```
When the page renders, the JavaScript will be written as html within the file. Place this at the bottom of the body tag with other CDN imports. Include as many files as necessary by repeating this line with additional file names specified.