Use Static Resource In Lightning Web Component

As a Salesforce developer we know how important Static resource are, but in Lightning Web Components ( LWC ). Due to Lightning Web Components content security policy requirement we need to upload our external files in static resource first. So today we will learn how we can use static resource in LWC and we will also check how it is different then lightning.

For demo purpose I have upload a basic zip file which include one CSS file, jQuery and two images.

 Static Resource in Lightning Web Components ( LWC ) and in Lightning

lwcStaticResource.html

<template>
        <img src={customImage}/>

        <div class="lwcClass">I'm in Lightning Web Components ( LWC )</div>
</template>

lwcStaticResource.js

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import customSR from '@salesforce/resourceUrl/customSR';

export default class LwcStaticResource extends LightningElement {
    customImage = customSR + '/LwcDemo.jpg';  

    renderedCallback() {

        Promise.all([
            loadScript(this, customSR + '/jquery.min.js'),
            loadStyle(this, customSR + '/customCss.css'),
        ])
            .then(() => {
                alert('Files loaded.');
            })
            .catch(error => {
                alert(error.body.message);
            });
    }
   
}

In Lightning Web Components ( LWC ) we first need to import loadScript, loadStyle to load the static resource file. There syntax is loadStyle(self, fileUrl): where in self we need to pass this and in URL we need to pass the URL of static resource file. For image we can direct access URL. In case of multiple files we can do this.

Promise.all([
    loadScript(this, resourceName + '/lib1.js'),
    loadScript(this, resourceName + '/lib2.js'),
    loadScript(this, resourceName + '/lib3.js')
]).then(() => { /* callback */ });

Now to achieve similar result in Lightning we need to do below things.

lightningStaticResource.cmp

<aura:component>
    <ltng:require styles="{!$Resource.customSR +'/customCss.css'}"  
        scripts="{!$Resource.customSR +'/jquery.min.js'}" 
        afterScriptsLoaded="{!c.setup}" />

        <img src="{!$Resource.customSR + '/lightningDemo.jpg'}"/>
        <div class="lightningClass">I'm in Lightning</div>

    <c:lwcStaticResource />
</aura:component>

lightningStaticResource.js

({
    setup : function(component, event, helper) {
        if (typeof jQuery != 'undefined') {
            alert('jquery loaded in lightning.');
        }
    }
})

As we can see in Lightning resource are loaded in component while in LWC we load them in controller and then use it. So in many area LWC is totally different then Lightning.

Do you want to add anything here or have any question, let me know in comments. Happy programming 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.