title: Difference between NPM, Composer and Bower in Laravel?
body: <p>So in Laravel there is <code>Composer</code>, <code>NPM</code> and <code>Bower</code>, I know they are all deoendancy managers.</p>
  
  <p><code>Composer</code> - This seems to focus on PHP dependencies and the package listing is controller by the contents of <code>composer.json</code>. To install packages you can either add to this file or run <code>php composer install &lt;package&gt;</code>.</p>
  
  <p><code>NPM</code> - This seems to be focused on JavaScript dependencies but also has a crazy amount of packages. The packages installed by <code>npm install</code> are dictated to by the contents of the <code>package.json</code> file.</p>
  
  <p><code>Bower</code> - As far as I know this is for front-end packages?</p>
  
  <p>In Laravel you can use all three if you so wish but why would you use one over the other in cases where libraries are available via, say, both <code>npm</code> and <code>composer</code>?</p>
  
  <p>For instance, in an install of Laravel they have two files:</p>
  
  <ul>
  <li><code>app.js</code> - the main js file of your application</li>
  <li><code>bootstrap.js</code> - the file that is included in app.js to pull in some dependencies</li>
  </ul>
  
  <p>This is the contents of my <code>bootstrap.js</code> in <code>resources/js</code></p>
  
  <pre><code>window._ = require('lodash');
  window.Popper = require('popper.js').default;
  
  /**
   * We'll load jQuery and the Bootstrap jQuery plugin which provides support
   * for JavaScript based Bootstrap features such as modals and tabs. This
   * code may be modified to fit the specific needs of your application.
   */
  
  try {
      window.$ = window.jQuery = require('jquery');
  
      require('bootstrap');
      require('slick-carousel');
      require('isotope-layout/dist/isotope.pkgd.min.js');
      require('tablesorter/dist/js/jquery.tablesorter.combined.min.js');
  } 
  
  catch (e) {}
  
  /**
   * We'll load the axios HTTP library which allows us to easily issue requests
   * to our Laravel back-end. This library automatically handles sending the
   * CSRF token as a header based on the value of the "XSRF" token cookie.
   */
  
  window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  
  /**
   * Next we will register the CSRF Token as a common header with Axios so that
   * all outgoing HTTP requests automatically have it attached. This is just
   * a simple convenience so we don't have to attach every token manually.
   */
  
  let token = document.head.querySelector('meta[name="csrf-token"]');
  
  if (token) {
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
      console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }
  
  /**
   * Echo exposes an expressive API for subscribing to channels and listening
   * for events that are broadcast by Laravel. Echo and event broadcasting
   * allows your team to easily build robust real-time web applications.
   */
  
  // import Echo from 'laravel-echo'
  
  // window.Pusher = require('pusher-js');
  
  // window.Echo = new Echo({
  //     broadcaster: 'pusher',
  //     key: process.env.MIX_PUSHER_APP_KEY,
  //     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
  //     encrypted: true
  // });
  </code></pre>
  
  <p>In <code>app.css</code> I have this:</p>
  
  <pre><code>/* 
   * This file takes all of the styling we need and compiles it into one nice CSS file.
   * You'll notice you can pull in anything from the node_modules folder use a Tiddle (~)
  */
  
  @import '~bootstrap/dist/css/bootstrap.min.css'; // Bootstrap 3.3.7 CSS
  @import '~slick-carousel/slick/slick.css';       // Slick Carousel base CSS
  
  @import "variables";                             // Sass Variables
  
  @import "partials/typography";                   // All from this point are from the partials folder
  @import "partials/mixins";
  @import "partials/helpers";
  @import "partials/navigation";
  @import "partials/breadcrumb-bar";
  @import "partials/welcome-box";
  @import "partials/form-box";
  @import "partials/content-box";
  @import "partials/carousels";
  @import "partials/tables";
  @import "partials/interactions-row";
  @import "partials/downloads-area";
  @import "partials/articles-events";
  @import "partials/biography-pages";
  @import "partials/grid";
  @import "partials/footer";
  @import "partials/steve-custom.scss";
  </code></pre>
  
  <p>The thing that is really, really throwing me is: how does <code>app.js</code> know I'm refering to folders in the <code>node_modules</code> folder and how does <code>app.css</code> know I'm refering to Bootstrap just by using a <code>~</code>? </p>
  
  <p>Why don't I have to specify the absolute paths?</p>
  
  <p>is the general rule of thumb that JavaScript related items usually come from <code>npm</code> and PHP dependencies come from <code>composer</code>?</p>
  
  <p>My confusion comes because I was looking at a package called Laravel Full Calendar and it's styling and JS code seem to be pulled via npm but its PHP dependant parts are pulled from Composer?</p>
  
  <p>Is this normal behaviour?</p>
  
  <p>I get there are a lot of questions here but I feel like the Laracasts really fell short of explaining the practical usage of these package managers.</p>