Do we have to use npm install to add Bootstrap etc. in our Laravel, Symfony project?

Envato Authors CodeCanyon
1

In best practice tutorials, it’s always suggested to use bootstrap, fontawesome installing via npm or yarn. OK, I know how to manage webpack, no problem.

But the problem is, how to ship the product to the customer? Possibilities:

  1. npm install before packaging and ship product with huge node_modules folder. This would cause a huge file. Will it really worth?

  2. Leaving npm install to the client. I don’t feel comfortable with this, client will know nothing; most probably.

  3. Not following best practices. I can simply include “bootstrap.min.css” directly from assets folder and have no node_modules inside the package…

Third one would be great for me, but not sure if reviewers see this as a technical problem.

I suggest moderation to set a list of rules for PHP/MVC frameworks; as you did in Wordpress.

2

Those best practice tutorials are probably talking about Vue/Angular/React projects. You should not use Node.js or Webpack to ship Bootstrap, jQuery, or any other library that has a minified CSS file available, unless you’re writing a Node.js script/app that you intend to bundle for the browser. That’s what Webpack was designed for.

In other words, if Bootstrap and FontAwesome are the only things you’re using Webpack for, then you absolutely need to take a step back and switch to using the minified CSS files. It’s easier for your users, it’s better for your page sizes, and it’s nicer for you and your development.

On the other hand, if you have JS files that call require('bootstrap'), then Webpack is appropriate, in which case:

If you build your Node project with Webpack, you shouldn’t ship the node_modules folder with the application. They’re embedded in your Webpack bundle.

As long as your script doesn’t actively need the node_modules folder for some reason, I would actually recommend leaving this to your users. If someone is going to change the Node.js source code, they’ll need to rebuild it with Webpack anyways, which means they should definitely know how to run npm install.

1 Like
3

Hello, thanks for the answer. Best practice posts I’m talking about are also official posts:

I also believe that this approach is an overkill just to add Bootstrap or FA.

4

Those docs are specifically for Symfony’s Encore, which is just meant to be a better way to use Webpack for those who need it. If you’re not already using Webpack to build your app, then Encore won’t help you in any way.

Using minified CSS/JS files is totally fine. :slight_smile: