Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

davy_yg's avatar
Level 27

Installing bower component

I heard to self host jquery and bootstrap there is an easy way that is by installing bower component:

ref: https://bower.io/

It's depracated - does it means the next version of bootstrap and jquery won't be registered in bower any longer ?

https://bower.io/docs/creating-packages/#bowerjson

Should I use bower to install the components ?

Or installing them using npm is better ?

0 likes
34 replies
davy_yg's avatar
Level 27

@fylzero How do you call the reference of node modules:

			  <script src="{{ url('node_modules/jquery/dist/jquery.min.js') }}"></script>
			  <script src="{{ url('node_modules/jquery/dist/jquery.slim.min.js') }}"></script>

			  <link rel="stylesheet" href="{{ url('node_modules/bootstrap/dist/css/bootstrap.min.css') }}">
			 <link rel="stylesheet" href="{{ url('node_modules/bootstrap/dist/js/bootstrap.min.js') }}">

			  <link rel="stylesheet" href="{{ url('node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css') }}">
			 <link rel="stylesheet" href="{{ url('node_modules/@fortawesome/fontawesome-free/css/all.css') }}">

Here is an example. I checked the file is actually there! It's in node_modules folder not in public folder. I only wonder how to call the files ?

Snapey's avatar

@davy_yg node modules folder should not be publically accessible. So, NO not this way

davy_yg's avatar
Level 27

@Snapey Then, how to reference to the files that I created with npm ? (jquery, bootstrap & fontawesome)

Sinnbeck's avatar

@davy_yg I think you should go with the solution suggested by @tray2

  1. Download files
  2. Link them with script tags

Then after that you can start to learn stuff like laravel mix

fylzero's avatar

@davy_yg If you want to, just use the .copy function in your Laravel mix config to move the dist files to the /public/js and /public/css directories. That was as you update packages and run npm, your dist files will be updated as well.

davy_yg's avatar
Level 27

@fylzero I also have question about versioning .version( ) which is to cache my js ( which is save memory or to speed up ? ) that is only valid for custom js right ?

Tray2's avatar

@davy_yg If you compile all your css and javascript into one css and one js file then it's valid for all your css and javascript.

fylzero's avatar

@davy_yg version() is for cache busting your css and js files when you build, aka add new code. It is only useful if you wrap your file refs in mix() when calling them in Blade. I would suggest always using this so you don't constantly need to shift refresh your browser during development.... and so clients don't have to do the same when you update your styles and js code.

Snapey's avatar

@davy_yg When, one day, you become a web developer you will learn that browsers cache things, and that is not always what you want.

1 like
Tray2's avatar

Or just download the files from the cdn you are using and place them in your public/css and public/js directories.

Snapey's avatar

@davy_yg because your server is slow to get to from canada? Wheras CDN (which will ALWAYS be faster) is distributed around the world.

Snapey's avatar
Snapey
Best Answer
Level 122

I am using share hosting.

Then why are you worrying about performance. In that statement you just said " i don't care about performance "

use a CDN it will be much faster and they already set the correct cache policy

davy_yg's avatar
Level 27

I don't understand what this means: Total Page Requests - 1059

1059 people are trying to access it in the same time ?

MichalOravec's avatar

@davy_yg And what?

Programming is not for you... at least stop asking stupid questions every day.

davy_yg's avatar
Level 27

@MichalOravec dude, I asked these kinds of questions even in other fields. I have to progress otherwise I won't learn anything.

davy_yg's avatar
Level 27

@MichalOravec You are a guy?

======================

See I thought this community / forum can be a support system, that's why it exist!

Snapey's avatar

before you bother with metrics tools, you should just open the developer tools, click on the network tab and see what a monster you have created;

  • 1367 requests
  • 12.0MB Transferred
  • 162MB Resources
  • Finish 2.3 Minutes
1 like

Please or to participate in this conversation.