Add library "particles-js" to my project: ERR 404 loading .json config

Best Answer

Level 50

Ok so staring from the top. If you spin new Laravel Application from terminal with laravel new command you will end up with folder that contains your app. Inside you will see folder public but there will be no css and no js subfolders there.

What creates them later is command npm install and after that one npm run dev, actually the second one to be precise.

Then whatever that command have put inside your public/css/app.css and public/js/app.js will be made available to your app in the layout file like so:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

Now the whole magic happens in those files:

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

This will take everything that is referenced in resources/js/app.js and mix it all up into one nice file that will and up here public/js/app.js

So lets have a look at:

resources/js/app.js

in my case:

require('./bootstrap');

require('alpinejs');

and it furthers references:

resources/js/bootstrap.js which has nothing to do with bootstrap.

window._ = require('lodash');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

So long story short in your case install the package like you did npm install particles.js

Require it in resources/js/app.js

require('./bootstrap');

require('alpinejs');

require('particles');

mix it all up with

npm run dev

make sure you have

<script src="{{ mix('js/app.js') }}" defer></script>

in your view and you should be good to go.

Hope it helps!

2 likes