Using resources in a Web Page template

A Web Page template can use resources like CSS or JS files. Such files can be stored externally (on a CDN for example) or internally using a Martini package's web directory.

The web directory does not exist by default

Creating a package does not automatically create the package's respective web directory. To create a new directory inside your package, right click your package from the [Navigator][quick-start-ui], and then select New > Folder. Your package must be [loaded][package-state] to allow this action.

![Creating a new package sub-directory][coder-studio-package-directory-creating]

![Creating a new package sub-directory][coder-package-directory-creating]

To create a resource file in the web directory:

1. Right click the web directory of your Martini package.
2. From the appearing context menu, select New > File.
3. Enter the name of your resource file.
4. Click Finish.

Drag and drop to import resources

You can drag and drop files and folders into a Martini package's web directory to trigger an import.

To use a resource in your Web Page template, you must use the appropriate HTML tag (like <link> or <script>), and indicate the resource's location using the format /<package>/<resource>.

Consider the following example:

todo-app
├── code
│   └── Index.gtpl
└── web
    ├── script.js
    └── style.css

To use script.js and style.css in Index.gtpl, you would need the following steps in Index.gtpl: