Include json file as path using lottie.js

Question

In my Laravel homestead project I want to use airbnb/lottie to displat animations. I have placed my lottie.js and script.js in my assets folder. my script.js looks like this:

var anim = document.getElementById('bodymovin');

var animData = bodymovin.loadAnimation({
    container: anim,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: 'data.json',
});

btn = document.getElementById('animBtn');
btn.addEventListener('click', function() {
    animData.setDirection(1);
    animData.play();
});

now the problem is that it can't find data.json, error:

GET http://bertels.test/nl/vacatures/data.json 404 (Not Found)

my data.json is in the same directory as my script.js. My question is: How can I use data.json in script.js?

Regards,

burnerPhone

Answer 1

You could use a custom route to return the desired files. Copy your file to /storage/app/public and append the following code to routes/web.php:

Route::get('/files/{filename}', function($filename){
    return \Storage::download($filename); // assuming default disk is set to 'public'
});

Then access the file in your browser using PROTOCOL://SERVER_HOST/files/data.json

Of course, you can use file_get_contents as well but you'll need to wrap it within a response and test the file for proper headers output.