13

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.

William
  • 351
  • 1
  • 2
  • 8
  • 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. – Erubiel Aug 19 '18 at 15:14
  • Do you want to include it in your main `app.js` file or have it as a standalone file? – Rwd Aug 19 '18 at 15:52

2 Answers2

22

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>
William
  • 351
  • 1
  • 2
  • 8
  • 1
    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... – jave.web Jun 13 '19 at 02:03
  • You will get error when compiling the code via `npm run dev` – Shulz Jun 29 '20 at 09:52
  • 1
    Some css files include sub files like png, icons, etc, they doesn't work this way – Jaber Al Nahian Jun 08 '21 at 08:59
6

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

Erubiel
  • 2,934
  • 14
  • 32
  • Why would I include selectize.js into bootstrap.js? I'm going by the manual way I guess. – William Aug 19 '18 at 15:41
  • 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 – Erubiel Aug 19 '18 at 15:45
  • 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 – Erubiel Aug 19 '18 at 15:52
  • 1
    Worked, I did require but in the app.js, read that you should include there. – William Aug 19 '18 at 16:34
  • you can include it on anyone... since ./bootstrap.js is called in app.js... – Erubiel Aug 19 '18 at 16:35
  • well i dont know how others presets work... i've only used vue... maybe the other presets do some different scaffolding – Erubiel Aug 19 '18 at 16:40