Provide WASM file from our own CDN

[mabernethy]

Overview

Would it be possible to provide the dotlottie.wasm file from our own CDN, or even with in the React bundle itself (I'm using DotLottieReact). I noticed in the network tab when I'm loading one of the DotLottie retrieves the WASM file from the jsdeliver CDN. Our clients are security minded and have a white list of approved IP addresses that our software can access from behind their firewalls. It would be easier to avoid asking all of them to update their whitelist.
...

Type

• [ X] New feature
• Changes to existing features

Motivation

What inspired this feature request? What problems were you facing, or what else makes you think this should be
included?
My company's usage of DotLottie would be restricted if we aren't able to supply the WASM file from our own CDN or within the bundle itself.
...

Labels

• Add the Type: Feature Request label to this issue.

[Malith-Rukshan]

You can achieve this by using the following code:

import { setWasmUrl } from “@lottiefiles/dotlottie-react”;

React.useEffect(() => {
  setWasmUrl(“/lib/dotlottie-player.wasm”);
}, []);

Note: The useEffect is optional.

[theashraf]

@mabernethy If you’re using a js bundler like vite or webpack, you can use a file/url loader to resolve the file path of the WASM file into a self-hosted URL.

Once you have the URL, you can use the setWasmUrl function exported by the @lottiefiles/dotlottie-react package to set the WASM URL.

Example (works well with vite):

import { setWasmUrl } from "@lottiefiles/dotlottie-react";

setWasmUrl(
  new URL(
    "./node_modules/@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm", 
    import.meta.url
  ).href
);

I’ll update the docs as well to make this use case clear. Thanks for bringing this up!

[jared-f]

hello 👋 @theashraf! I have similar use case but for vue. Looks like setWasmUrl in vue package works similarly to the react package.

Can you please confirm that the example approach above works for a vue app built w vite?

Thank you!

[lienze87]

@jared-f 在vite中可以这样引入

import { DotLottie } from '@lottiefiles/dotlottie-web'
import dotlottiePlayer from '@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url'

DotLottie.setWasmUrl(dotlottiePlayer)

[theashraf]

hello 👋 @theashraf! I have similar use case but for vue. Looks like setWasmUrl in vue package works similarly to the react package.

Can you please confirm that the example approach above works for a vue app built w vite?

Thank you!

@jared-f yes it should work the same way across different frameworks.

Refer to Vite’s Asset Guide for more details. This approach works for Vite based Vue apps just as it does for React.