How to properly include a library from node_modules into your project?

William picture William · Aug 19, 2018 · Viewed 14.5k times · Source

the question can maybe be stupid but did not find the answer till now.
I'm trying to include a library from node_modules, from what I've learn since yesterday we should include like that with asset:

{{-- bootstrap 4.1.3 --}} 
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

I want to add selectize.js into my project so I used npm install selectize --save to be directly install and save into package.json(dependencies).

My question is, how can I include that now? Just like default bootstrap is. How can I go from node_modules/ to public/?
Should I do it manually or there is a more professional/cleaner way to do it?
Thank you for the help.

Answer

William picture William · Aug 23, 2018

So after a lot of youtube videos and google it, I found the answer i was looking for.
Here are the steps:

1- In the webpack.mix.js:

mix.scripts([
        'node_modules/bootstrap/dist/js/bootstrap.js',
        'node_modules/selectize/dist/js/selectize.js'
    ],  'public/js/app.js')

    .styles([
        'node_modules/bootstrap/dist/css/bootstrap.css',
        'node_modules/selectize/dist/css/selectize.css',
        'resources/assets/css/app.css'
    ],  'public/css/app.css');

2- npm run dev
3- import in the view

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