Handling Clarity's Static Assets

Static assets are vital to any frontend application project. Liferay’s client extensions provide a way to use static assets within either the application or global scope. Clarity plans to experiment with these client extensions to handle static assets and determine the best approach for their projects.

In these exercises, you’ll learn how to manage static assets in the application and global scope using client extensions.

Exercise: Using Application-Scoped Static Assets

Clarity wants to display membership badges in the distributor table while preventing other applications from accessing the images. To achieve this, they’ll place the badge images directly within the Distributor Table client extension.

Here, you’ll add and display the badges as static assets within the Distributor Table custom element.

In your file explorer, go to the client-extensions/clarity-distributor-table-custom-element/src/ folder in your course workspace.
Create a new folder named resources.
This is where you’ll store the membership badge images.
From the exercises/module-2/badges/ folder, copy all image files into the resources/ folder you created in the previous step.
With the images in place, you can import and use them in the Distributor Table component.
Go to the clarity-distributor-table-custom-element/src/components/ folder and open the DistributorTable.jsx file.
Below the existing import statement, add this:
```
import gold from '../resources/gold.png';
import silver from '../resources/silver.png';
import bronze from '../resources/bronze.png';
```
This includes the images as variables in the Distributor Table component. You can now use them to reference the image files.

Below the useEffect hook block, add this:

const getTierImage = (tierKey) => {
    switch (tierKey) {
        case 'gold':
            return gold;
        case 'silver':
            return silver;
        case 'bronze':
            return bronze;
        default:
            return null;
    }
}

This includes the images as variables in the Distributor Table component.

The getTierImage function returns a badge image based on the distributor’s tier key. You’ll use it in a new column within the table.

Scroll down to the return block and find these lines:
```
<th>State</th>
<th>Action</th>
```
Between both elements, add this:
```
<th>Tier</th>
```
With the new Tier column added, you can insert the badge images in the corresponding table row.
Below the <td>{dist.state}</td> line, add this:
```
<td>
    <img src={getTierImage(dist.tier.key)} alt={dist.tier.key}/>
</td>
```
This creates a new table row that renders the badge image based on the distributor’s tier.
Save the file.
You’ll now style the image element to ensure it renders properly within the table.
From the src/ folder, open the App.css file.
Add an img block nested within the table block and include these styles:

Style

Value

height

3rem

width

auto
Save the file and deploy your client extension.
In your Liferay instance, go to the Distributor Details page.
Verify the table includes a Tier column with an membership badge image for each distributor.

NOTE
The Tier column for Stanton Optical is empty because their sample data is missing a tier value.

Style	Value
`height`	`3rem`
`width`	`auto`

Great! You’ve added Clarity’s membership badges as static assets to the Distributor Table custom element, encapsulating the images within the client extension’s scope. Next, you’ll learn how to use static assets globally within Liferay.

Exercise: Using Global-Scoped Static assets

In some cases, you’ll need to share resources across multiple applications. Liferay provides various types of client extensions (e.g., Global JS) that can make assets available globally within the platform. Clarity wants to test this functionality using their theme CSS client extension to change their website’s default favicon.

Here, you’ll modify the clarity-theme client extension to deploy three favicon images.

In your file explorer, go to the exercises/module-2/ folder in your course workspace.
Move the assets/ folder into the client-extensions/clarity-theme/ client extension project.
This folder contains all of Clarity’s favicon images.
Go to the client-extensions/clarity-theme/ folder and open the client-extension.yaml file.
You’ll define three new theme favicon client extensions within the clarity-theme project, each referencing a favicon image located in the assets/ folder.

At the bottom of the file, insert a new line and add this:

clarity-theme-favicon:
    name: Clarity Theme Favicon
    type: themeFavicon
    url: clarity-favicon-primary.svg
clarity-theme-favicon-dark:
    name: Clarity Theme Favicon Dark
    type: themeFavicon
    url: clarity-favicon-dark.svg
clarity-theme-favicon-light:
    name: Clarity Theme Favicon Light
    type: themeFavicon
    url: clarity-favicon-light.svg

At the bottom of the file, insert a new line and add this.

With the client extensions defined, you’ll update the assemble block to configure the build process to find the favicon images in the assets/ folder.

At the end of the assemble block, insert a new line and add this:
```
- from: assets
  into: static
```
This configures Liferay’s build process to move all files within the assets/ folder into the generated static/ folder.

NOTE
Ensure the lines are properly indented and aligned within the file.
Save the file and deploy the client extension.
In your Liferay instance, open the Site Menu (), expand Site Builder, and click Pages.
Click Actions () on the Application Bar and select Configuration.
Scroll down to the Basic Settings section and search for the Favicon field.

Currently, Clarity’s website use the current theme’s default favicon.
Click Select Favicon ().
Go to the Client Extension tab and select Clarity Theme Favicon.
Scroll down to the bottom of the page and click Save.
Go to the Home page and verify the website’s favicon changed.

NOTE
If the favicon doesn’t update, hard refresh the page:

Windows/Linux: Press Ctrl + Shift + R.
Mac: Press CMD + Shift + R.

Great! You’ve leveraged client extensions to deploy three favicon images to Clarity’s website and selected one as the default for all pages. For a full list of client extension types and the resources they can include, see Client Extension Reference.

Conclusion

Defining static assets is a common practice in frontend development. With Liferay’s client extensions, you can leverage both application-scoped and global static assets. A strategic approach to managing static assets with client extensions is key for an effective implementation.

Next, you’ll review what you’ve learned before moving on to the next module.