How to include stylesheets and javascripts from npm install

Question

This feels so basic that no one bothers to explain it. I'm trying to use the fullcalendar library in my app. In their documentation under «Basic Usage», I found this:

The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar, jQuery, and Moment JavaScript files, in the of your page:
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

And under «Download», it says this:

You can install FullCalendar via NPM:

$ npm install fullcalendar

What I don't understand is, where do I find the fullcalendar.css, jquery.min.js, moment.min.js and fullcalendar.js files to include?

NPM install doesn't download a directory into my downloads directories that I can drag into my project, it adds files to my node_modules directory, and I doubt I'm supposed to go rummaging in there for the files (my node_modules directory has thousands of directories in it). I tried using Webpack to bundle the js files, thinking it might automatically include them in the bundle, but that didn't work. What am I missing?

Why are people downvoting this question? If the answer is obvious, why not just post an answer? — Wylliam Judd, Dec 06 '16 at 00:47
"..I'm supposed to go rummaging in there for the files" well, this is actually what you have to do. — Jeanderson Candido, Dec 06 '16 at 00:52
Wait, so I'm actually supposed to drag these files out of the node_modules and into my project with the structure project/lib and project/fullcalendar...or am I supposed to just give these src props ultra long paths? — Wylliam Judd, Dec 06 '16 at 00:58
npm does the job of managing versions and downloading the packages for you :) for development purpose, it's fine to refer to "node_modules/somelib/somelib.js" but for production, you may want to use Grunt or Gulp to build your resources — Jeanderson Candido, Dec 06 '16 at 00:59
Thanks. Why was this considered a bad question? I've been trying to figure this out for hours, and I never came across anything about Grunt or Gulp. — Wylliam Judd, Dec 06 '16 at 01:01
you're welcome mate. here is a dummy project I created to play a little bit with Grunt... I recommend you to try some tutorial with Grunt of Gulp https://github.com/jeandersonbc/grunt-labs — Jeanderson Candido, Dec 06 '16 at 01:04
Well... the question was about linking resources downloaded from NPM. as simply as it is, you just had to literally add the relative path to them. — Jeanderson Candido, Dec 06 '16 at 01:05
Possible duplicate of [How to include scripts located inside the node\_modules folder?](https://stackoverflow.com/questions/27464168/how-to-include-scripts-located-inside-the-node-modules-folder) — Kurt Van den Branden, Oct 18 '18 at 21:04

score 5 · Accepted Answer · edited Jun 04 '20 at 21:35

You don't need to have any of the script tags or stylesheet links in the header if you use Webpack, with this webpack.config.js:

module.exports = {
  entry: "./calendar.js",
  output: { filename: "bundle.js" },
  module: {
    loaders: [
      {
        test: [/.js?$/],
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
};

And you need to npm install babel. And if you want Webpack to handle your CSS files for you too, you can npm install style-loader and css-loader. Here's my package.json:

{
  "name": "full_calendar_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "fullcalendar": "^3.1.0",
    "jquery": "^3.1.1",
    "moment": "^2.17.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Then my index.html file doesn't need the script tags:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src='bundle.js'></script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

And I just include the packages in my JavaScript file:

import $ from 'jquery'
import 'fullcalendar'
import 'fullcalendar/dist/fullcalendar.css'

$(document).ready(() => {
  $('#calendar').fullCalendar()
})

I'm still looking for a way to clean up the way I import the CSS file, but at least I don't have an HTML file that looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel='stylesheet' href='node_modules/fullcalendar/dist/fullcalendar.css' />
    <script src='node_modules/jquery/dist/jquery.min.js'></script>
    <script src='node_modules/moment/min/moment.min.js'></script>
    <script src='node_modules/fullcalendar/dist/fullcalendar.js'></script>
    <script src='entry.js'></script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

Please let me know how to include the CSS file more cleanly.

Did you ever figure out to add css cleanly? – Chris Wedgwood Jan 11 '20 at 12:33 — Chris Wedgwood, Jan 11 '20 at 12:33
This was the best I got. – Wylliam Judd Jan 14 '20 at 17:10 — Wylliam Judd, Jan 14 '20 at 17:10

How to include stylesheets and javascripts from npm install

1 Answers1