Copy the assets of the theme

Assets usually include CSS files, JavaScript and images / icons used for design purposes.

Within an extension, including a site package, assets can only be placed in folder Resources/Public and subfolders of this folder. This folder will be symlinked into public/_assets/<some hash>.

Read more about assets in Getting started, assets.

The example theme

For the purpose of demonstration we created a theme based on Bootstrap and some custom CSS / JavaScript.

You can download the files of the example theme from https://github.com/TYPO3-Documentation/site_package/tree/main/Resources/Public

Now copy these files into folder Resources/Public of your site package.

The static HTML templates

In folder Resources/Public/StaticTemplate you will now find two HTML files. We will use these as example to create the Fluid templates in the next step. Afterwards they can be deleted or kept for reference.

During local development you can open these directly (using paths from your operating system) in your browser to see what the site should look like after we are finished with the site package.

Managing asset dependencies in real life projects

It is technically possible to use a CDN (Content Delivery Network) to include libraries in TYPO3. However there are privacy and security risks attached to this and it might be a GDPR Violation. Therefore we recommend to host all files yourself by placing them in the Resources/Public folder.

In a later step, you can use npm (Node Package Manager) to manage your JavaScript and CSS dependencies locally. We also recommend using a JavaScript bundler like Vite.

If you decide to use a frontend bundler, make sure that the resulting asset files are placed in a publicly available folder, like Resources/Public in your site package.

There are also TYPO3 extensions like praetorius/vite-asset-collector to bundle your TYPO3 frontend assets with Vite.