All language subtitles for 009 Loading Assets_en

In this lecture, we're going to load the images and fonts from our template.

Let's open the template directory for a moment.

We have a directory called Assets.

This directory contains the custom CSS and images I've created for this course.

We're going to load these assets in our project.

We'll start with the CSS inside the CSS folder.

Copy the main CSS file.

Inside the source slash assets directory.

Paste in this file.

Next, we'll switch over to the main file to import the CSS file from the custom theme.

After importing tailwinds.

The path to the file is dot slash assets slash mean CSS.

We're importing the CSIS file so that it gets processed by vite.

I created some styles that weren't covered by Tailwind, which is why we're including this file.

Most of the styles have to do with the audio player on the page.

Let's move on to the images.

The images can be found under the image directory.

Unlike our CSIS files, we don't want them to be processed by vite.

Instead, they should be copied over to the bundle generated by vite.

Here's what we'll do.

We'll copy the images over to the public directory.

Files placed in the public directory are copied over.

They are not completely processed by vite.

When we ship the app to production, we're going to make a copy of the assets directory.

Next, open the public directory and paste the directory we copied earlier.

Once copied.

Delete the case directory in the public directory.

It doesn't make sense to continue storing the CSIS files in the public directory since they're being

stored in these source directory.

There are two ways to store files.

The source directory can store asset files.

If you store asset files in this directory, it will process them if you want your files to be copied

over without going through other third party libraries like post CSIS and SAS, you should place them

inside the public directory.

All right, let's give the application a test.

Refresh the page.

The application is starting to look like the static template.

This is exactly what we wanted.

If you don't have what I have, then try restarting the server.

The last files will need to load are the fonts and icons.

Let's go back to the editor.

Open the index html file inside the template directory.

Go up to the head section of the document.

We'll find links to the Roboto fonts and font awesome icon set.

We're going to copy these over to the index file.

The fonts come from an external source.

We don't need to install a module or copy files.

We can use a CD and to link them.

Let's check out the page one more time.

We'll see the icons displaying correctly and the font should have slightly changed.

Let's recap what we've learned.

You can load assets by either importing them directly or linking them in the public directory.

Either solution is valid.

Any files placed in the public directory are copied over in the final bundle.

If you place files inside the source directory, they'll be processed by invite before they're shipped

with the bundle.

In the next lecture, we'll begin adding state management to the application.