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

Question

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.

Lowrance

the easiest way, apart from my answer, is just save it, grab the dist files manually and copy them on your public folder, then just access them as assets. but for really take advantage of npm and laravel webpack mix... you gotta do as the documentation says. – Ulu

Do you want to include it in your main app.js file or have it as a standalone file? – Mcavoy

Answer 1

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>

Lowrance

Sadly, some modules contain global stuff that gets un-globalized because of the "require" etc. "webpack" loading... this seems to be the direct way to include script content "as is" right now... – Scrogan

You will get error when compiling the code via npm run dev – Halfwitted

Some css files include sub files like png, icons, etc, they doesn't work this way – Venus

Answer 2

This should work, add this line to the either bootstrap.js or app.js files.

window.selectize = require('selectize');

Or if you just want to load the js, something like

require('selectize/dist/selectize.js'); 

Should work

Don't forget to then do a: npm run dev or npm run production

Note: i never used selectize so i cannot help you on the calls to the library... but something like that should load it.

The last step (npm run dev) adds selectize to the compiled app.js on your public folder

The CSS part you add it on app.scss just follow the example that is given.

Also, before all that... you should have run php artisan preset none/bootstrap/vue and npm install refer to the docs for more info on this: https://laravel.com/docs/5.6/frontend

Ulu

Why would I include selectize.js into bootstrap.js? I'm going by the manual way I guess. – Lowrance

By bootstrap.js im referring to the resources/assets/js/bootstrap.js which is generated when you run php artisan preset none... or php artisan preset vue... I know it sounds confusing, im not referring to the bootstrap.js bootstrap library file, which i think is what you are referring – Ulu

if you are initiating your project, i recommend a fresh installation... Steps would be, 1 laravel new project 2 php artisan preset none, 3 npm install, 4 modify the files as i said in the answer – Ulu

Worked, I did require but in the app.js, read that you should include there. – Lowrance

you can include it on anyone... since ./bootstrap.js is called in app.js... – Ulu

well i dont know how others presets work... i've only used vue... maybe the other presets do some different scaffolding – Ulu