What is the workflow of installing and using any js/css library using npm in laravel 8?

Question

What is the workflow of installing and using any js/css library using npm in laravel 8. What steps should I follow?

For an example let's say I want to install fontawesome using npm and use it in my laravel project. What I know is, once I run the npm install --save @fortawesome/fontawesome-free command it creates a folder for that inside node_modules. I don't know what should I do after npm install --save @fortawesome/fontawesome-free.

How can I get to know what to do inside resources/css/app.css and webpack.mix.js and what next for any js or css library?

Answer 1

You can use laravel mix, based on my experience the general step to use any css / js package from npm to laravel mix is :

1. npm install.
2. import the css needed by the library to resources/sass/app.scss
3. require js script needed by the library to resource/js/bootstrap.js
4. npm run development or npm run production to rebuild the app.css and bootstrap.js.

For fontawesome you can read further in this tutorial:

https://dev.to/dendihandian/adding-font-awesome-to-laravel-the-laravel-mix-way-4ndj