Welcome to the Finch Asset Management Guide! This guide will walk you through the steps to manage assets in your Finch application. Whether you're a seasoned developer or just starting, Finch offers a robust set of tools to simplify server-side web app development.

What are Assets?

Assets in Finch are files that are used in your application. These files can be JavaScript, CSS, images, or any other type of file. Assets are used to add functionality, style, and content to your application.

How to use Assets in Finch?

Finch provides a simple way to manage assets in your application. You can add assets to your application by using the addAsset method. Here is an example of how to use it:

app.get(
  path: '/',
  index: (rq) async {
    rq.addAsset(Asset(path: '/path/to/your/asset.js'));
    return rq.renderString(text: 'Hello World');
  },
);

You can also add multiple assets at once by using the addAssets method. Here is an example of how to use it:

app.get(
  path: '/',
  index: (rq) async {
    rq.addAssets([
      Asset(path: '/path/to/your/asset.js'),
      Asset(path: '/path/to/your/asset.css'),
    ]);
    return rq.renderString(text: 'Hello World');
  },
);

Asset Types

Finch supports two types of assets: JavaScript and CSS. You can specify the type of the asset by using the type parameter. Here is an example of how to use it:

app.get(
  path: '/',
  index: (rq) async {
    rq.addAsset(Asset(path: '/path/to/your/asset.js', type: AssetType.js));
    rq.addAsset(Asset(path: '/path/to/your/asset.css', type: AssetType.css));
    return rq.renderString(text: 'Hello World');
  },
);

Asset in templates

You can also add assets to your templates by using the {{ assets.js() }} syntax. Here is an example of how to use it:

<!DOCTYPE html>
<html>
  <head>
    {{ assets.css() }}
  </head>
  <body>
    {{ assets.js() }}
    Hello World
  </body>
</html>

Result

The result of the above code will be a HTML page with the following content:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/path/to/your/asset.css" />
  </head>
  <body>
    <script src="/path/to/your/asset.js"></script>
    Hello World
  </body>
</html>
Edit this page
Email sending Guide
Welcome to the Finch Email sending Guide! This guide will walk you through the steps to send emails in your Finch application. Whether you're a seasoned developer or just starting, Finch offers a robust set of tools to simplify server-side web app development.
API Documentation and Swagger Guide
Welcome to the Finch API Documentation and Swagger Guide! This guide will walk you through the steps to document your Finch application's API and integrate Swagger for interactive API documentation. Whether you're a seasoned developer or just starting, Finch offers a robust set of tools to simplify server-side web app development.