Manage assets in resource packages

You store and manage your frontend assets in resource packages, located in the root of your project, in folder ResourcePackages.
For more information, see Resource packages.

By default, Sitefinity CMS uses the Bootstrap5 resource package, based on the Bootstrap frontend framework. You can use it as a starter package to build the design of your website.
For more information, see Bootstrap5 package in the Sitefinity MVC Packages repository.

Alternatively, you can create your own resource package, based on another frontend framework of your choice, using the Minimal package.
For more information, see the Minimal package in the Sitefinity MVC Packages repository.

In this article describes how to manage your frontend assets in your resource packages.

There are scenarios when you want to store custom widget templates without using resource packages, or you want to share your custom templates among all your packages. In such cases, you place your templates in folder ~/MVC/Views in your project's root folder.

If you want to share grid widget templates among resource packages or, if you want to change the grid widgets used in Content » Forms » Create a form or Edit form to use the MVC framework, you move these templates to folder ~/GridSystem/Templates, located in your project's root folder.
For more information, see Priorities for resolving views.

You generally store all your project-specific frontend assets, such as .scss files, images, scripts, and fonts in folder ~/assets/src/project. When you use the npm start command, all source files are processed and moved to folder ~/assets/dist, from where there are used in the project.

To build your frontend assets, perform the following:

1. Open folder ~/ResourcePackages/<NameOfPackage>.
2. Open a console and perform npm install. This command installs all dependencies from the package.json file.
3. Place your assets in folder ~/ResourcePackages/<NameOfPackage>/assets/src/project. 
   
4. In the ~/sass folder, place your SASS files and import them in the main.scss file. 
5. Open folder ~/ResourcePackages/<NameOfPackage>.
   
6. Open a console and run npm start command.
   This command executes the default npm scripts and subsequently watches for any changes in the files. 

   NOTE: If you are using Bootstrap 3 or Minimal packages, you need to execute a different command since these packages are using grunt for their build infrastructure. For more information, see GitHub repository.

Place all your .scss files in folder ~/assets/src/project/sass.

RECOMMENDATION: We recommend creating subfolders to organize the project's files. Following is an example of a proper file structure:

• sass 
  • settings
    • _colors.scss
    • _typography.scss
      ...
      
  • base
    • _link.scss
    • _typography.scss
      ...

Next, you import them in the main.scss file. For example:

When you run npm start, all .SCSS files are imported in ~/assets/src/project/sass/main.scss file and then processed in ~/assets/dist/css/main.css file.

If you do not want to include Sitefinity or Bootstrap CSS files or you want to use another Bootstrap version, in ~/assets/src/project/sass/main.scss file, change one of the import rules:

@import "../../sitefinity/sass/sitefinity.scss";

@import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss";

Place all images in folder ~/assets/src/project/images. When you use npm start, all images from this folder are compressed and moved to folder ~/assets/dist/images.

If you need to place JavaScript files in folder ~/assets/dist/js, perform the following:

1. Open packages.json.
2. Locate the config.copyJs section.
3. Inside, enter a space-separated list of JavaScript files that you want move.

EXAMPLE: Following is an example of a package.json config section:

To load a JavaScript file in your Razor layout file, you must add a reference to it.

EXAMPLE: To load project-file-1.js, open the project Razor layout file ~/ResourcePackages/Bootstrap5/MVC/Views/Layouts/default.cshtml and add a reference there in the following way:

RECOMMENDATION: We recommend using SVG sprites for your icons. Sitefinity CMS uses Font Awesome SVG sprites for its icons. After you run npm start, you can find these sprites in folder ~/assets/dist/sprites. If you need to include additional SVG sprites, perform the following:

1. Open packages.json.
2. Locate the config.copySprites section.
3. Inside, enter a space-separated list with the SVG files that you want to move.

EXAMPLE: Following is an example of  package.json config section:

To use SVG icon in the widget template, add a reference where a solid.svg is the sprite and #book is the icon in the following way: