Documentation
Feedback
Guides
App Development

App Development
ManifestBuilders
Assets builder

Learn how to use the VTEX IO Assets builder.

The assets builder manages assets within VTEX IO apps. It does this by collecting all asset paths used and uploading them to the File Manager service.

The File Manager service manages store files and their respective URLs, translating asset paths and exporting immutable URLs for proper rendering of block assets.

For more information about using this builder in a Store Theme app, see Using the assets builder.

Folder structure

An app that uses the assets builder has a folder named \assets in its root directory. The directory structure may vary depending on specific project settings.

You can add any image extension, such as .jpeg, .png, and .gif, as well as store font files (.ttfor .woff) to later customize store typography.

Assets can be added directly to the /assets folder, or for better organization, subfolders can be created within it, as illustrated below:


_10
assets
_10
┣ πŸ“‚ fonts
_10
β”— πŸ“„ {FileName}.woff
_10
┣ πŸ“„ {FileName}.jpeg
_10
┣ πŸ“„ {FileName}.png

Usage

To use the assets builder in your app, follow these steps:

  1. Add the assets builder to your app’s builder list in the manifest.json file, as shown below:


    _10
    "builders": {
    _10
    "assets": "0.x"
    _10
    }

  2. In the root directory of your app, create an /assets folder to manage store assets.

  3. Add the asset files to the /assets folder. Add subfolders to organize the files as needed.

  4. To use the stored assets within your app, use the asset path as the value of a given parameter. Note that if you have structured subfolders within the assets folder, you need to include the folder hierarchy in the asset path. For example: assets/fonts/{FileName}.woff.

Use case examples

As an example, check the folder structure of this builder in the B2B Theme app:


_10
assets
_10
┣ πŸ“‚ fonts
_10
β”— πŸ“„ {FileName}.woff
_10
┣ πŸ“‚ icons
_10
β”— πŸ“„ {FileName}.svg
_10
β”— πŸ“„ {FileName}.svg
_10
β”— πŸ“„ {FileName}.jpg

  • The fonts folder contains .woff files, which are web fonts.
  • The icons folder holds .svg files, which may be icons, logos, graphics, and other vector images.
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page