# Static files
# Table of contents
The static file hosting is enabled by default and can be setup in a projects configuration file. The
config.paths.public config property tells ZenTS where to look for static files. By default this is set to
public/, which is a folder relative to the projects root directory.
config.paths.public can be set to any existing directory and have to be an absolute path, so the files could also be hosted from a different location then the project root directory. The second configuration property is
config.web.publicPath. This is the URL path under which your files are listed. By default this is set to
/public/, meaning your static files are accessible under this URL: http://localhost:3000/public/path/to/file.png
Both configuration properties have to be set to a string, otherwise the static files feature will be disabled and no files will be served. Both properties can also be set to
false to disable static file hosting.
Be aware that all files in the directory configured under
config.paths.public are public accessible. Don't put any secret files in that directory.
# Referencing static files in templates
Since static files are accessible under a public URL, referencing them in a template is super easy. Imagine a example project with the following file structure:
|-- public | |-- css | | |-- app.css | | |-- bootstrap.css | | |-- custom.css | |-- img | | |-- picture1.png | | |-- picture2.png | |-- js | |-- app.js |-- src |-- view |-- index.njk
The static files (*.css, *.png, *.js, ...) are placed in the
public directory (or any directory configured under
A template can now reference the different files:
<!DOCTYPE html> <html> <head> <title>Welcome to ZenTS!</title> <link rel="stylesheet" href="/public/css/bootstrap.css" /> <link rel="stylesheet" href="/public/css/app.css" /> <link rel="stylesheet" href="/public/css/custom.css" /> </head> <body> <h1>Photo album</h1> <img src="/public/img/picture1.png" /><br /> <img src="/public/img/picture2.png" /> <script src="/public/js/app.js"></script> </body> </html>
As said, that it's really easy to reference to the static files. It's just important that the reference starts with a slash (
/) and points to the URL path configured in
/public/). The rest is just the folder structure given in the public directory.
# Next step
Congratulations! You've just learned how to use static files in your ZenTS application. Now you can use the template engine with ease and write awesome web applications! Now it's time to dig a bit deeper into services and dependency injection. With them, you can write code that follows the single-responsibility principle (opens new window) (SOLID) and supercharge your application.