For more complex [[base/Google Apps Script/Google Apps Script|Google Apps Script]] [[web app]] projects, you might want to organize your CSS and JavaScript into separate files. Apps Script only allows you two file types: `.gs` and `.html`, so you need a workaround.
Create a new file called `js.html` and `css.html` in your project.
Copy anything within `<style></style>` to `css.html` and anything within `<script></script>` to `JavaScript.html`. These must still be within the `<style>` and `<script>` tags, respectively.
In `Code.gs`, you need to write a function that will pass the CSS and JavaScript as well as edit the `doGet` function.
```JavaSCript title="Code.gs"
function doGet(e){
return HtmlService.CreateTemplateFromFile("index").evaluate(); // create template not output
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
```
In your index.html, add the following to the `<head>` tag and bottom of the `<body>` tag.
```HTML "index.html"
<head>
<base target="_top">
<?!= include("css.html"); ?>
</head>
<body>
// rest of code here
<?!= include("js.html"); ?>
</body>
```
Importantly, the `doGet` function must create a Template from File rather than Output from File otherwise the <? ?> will be rendered as plain text (note the `evaluate` method must be called as well).
You may also want to modularize your HTML templates and Code.gs functions if you're creating a multi-page app or a series of tabs, for example. A project structure might look like this:
```
*
|--Code.gs
|--index.html
|--about.html
|--css.html
|--JavaScript.html
|--functions.gs
|--utils.gs
```