Usually when I build a webpage, I include some library like bootstrap from CDN. Now I want an offline webpage (in reality I'm using electron.. but same thing) in a Node environment. I chose Pure as my framework.
So I have my Node project with electron installed and now I
npm install purecss --save
which installs purecss into node_modules. It says to use require('yahoocss') to load the files, but how am I supposed to server the build files (pure.min.css) on my HTML pages?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
</body>
</html>
I mean.. do I put a stylesheet link that points to node_modules? That seems.. wrong.
You need to use something like Webpack. This will allow you to use static NPM modules like Pure by importing them into a separate JS file that only gets used by Webpack. Webpack reads this file and depending on the module type you are importing, selects the appropriate loader. This loader will perform different types of modifications on the imported files and once completed, will export the outputs to new static files that you can then include in your html document.
Please go and take a look at Webpack's documentation and also see this list of available loaders.
I don't believe this is the best answer, but what I want is to be able to keep third-party libraries separate from my code.
(I follow the principle that my CSS/JS is going to change on a schedule different than third-party libraries. Usually my code is going to change more frequently, so that's why I believe it's in my best interest to keep third-party code separate from my CSS, as well as not embedded into the HTML.)
Since I use webpack for compiling and bundling my TypeScript files, I use a plugin to grab a copy of the Pure CSS file and put it into the directory I want.
You'll at least need npm install --save-dev webpack copy-webpack-plugin (in addition to your already performed npm install purecss).
In webpack.config.js you can pull in copy-webpack-plugin (const CopyWebpackPlugin = require('copy-webpack-plugin');) and then in the configuration have it grab a copy of the CSS file(s) you want from the package:
/* ... */
plugins: [
/* ... */
new CopyWebpackPlugin({
patterns: [
/* ... */
{
from: './node_modules/purecss/build/pure-min.css',
to: 'lib'
},
/* ... */
]
})
/* ... */
],
/* ... */
This will copy that file into a lib directory.
You can then include the file in your HTML file(s):
<link rel="stylesheet" href="./lib/pure-min.css" />
Again, not sure this is the best way, but it's worked well for me when I've wanted to copy a specific file from node_modules into my generated directory.
This is my first electron app, which is based on quick-start app. I want to add twitter bootstrap's css. So I installed it like this:
npm install bootstrap
And included in the index.html like this:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
When I run: npm start from terminal it works fine. However when I try to build it using electron-packager like this:
npm run build
I get a native mac app "myApp.app", but when I open it, I don't see the styles.
The only files in the application aside from node_modules and package.json are: main.js and index.html and both are in the root dir.
Is there a step here that I am missing?
Edit
I realized that the application is looking for the css file in Resouces/app directory. Is it the responsibility of the build tool to include the css file, or should I include it manually? If I have to take care of this, did I even needed to install bootstrap from npm?
Check your package.json file: is bootstrap listed as a dependency? Probably not since it doesn't look like you are using the --save param:
npm install bootstrap --save
I'm no Electron hero: I happen to be working on a project using fs-jetpack at the moment. I deleted the fs-jetpack entry from from my project.json and did an OSX build using electron-packager. On launch I got a script error about missing "fs-jetpack'. From that I conclude that the packager uses the 'package.json` to know what to include. Maybe I'm wrong? I have "--prune=true" as one of the packager params. Maybe without that it includes everything?
Also, I am surprised that this line works for you:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
but perhaps you are using a different folder structure where the index.html file is not in the app directory?
I'm using the React Starter Kit and want to use an npm module for my css and javascript (namely bootstrap).
How do I integrate it properly? Simply installing it doesn't make it available on the server.
To install bootstrap you actually need the npm package called react-bootstrap. So first run
npm install --save react-bootstrap
and then import the components in your app. To have the bootstrap's css and default theme, just include the cdn css files right into your main index.html file as
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
If you want a starter kit that has all the needed packages in order to build rich real-world apps, but with minimal configuration, you can try http://redux-minimal.js.org/
By default redux-minimal comes with bootstrap, sass and a demo app to show you how code looks like. Alternatively you could just check the github code and borrow code that way and stick to your existing starter kit.
I install fancybox dependency via :
npm install fancybox
I'm attempting to use the fancybox css within a html page :
<a class="fancybox fancybox.iframe"
I cannot require the fancybox library within the html page ?
Prior to using node I would just import the library directly on the page:
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css"></link>
But how to use the node library on html page ?
Update :
To achieve this I just copied the node_modules directory to the public folder. Then exposed the library with :
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
The way to do this is to use a build tool such as webpack. You use npm to install your libraries into the node_modules/ subdirectory, require them within your javascript files and use webpack to produce a single bundle .js file that contains everything.
I'd start here: http://webpack.github.io/docs/what-is-webpack.html
Question 1:
What exactly is the purpose of installing Twitter Bootstrap through npm? I thought npm was meant for server side modules. Is it faster to serve the bootstrap files yourself than using a CDN?
Question 2:
If I were to npm install Bootstrap, how would I point to the bootstrap.js and bootstrap.css files?
If you NPM those modules you can serve them using static redirect.
First install the packages:
npm install jquery
npm install bootstrap
Then on the server.js:
var express = require('express');
var app = express();
// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap
Then, finally, at the .html:
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
I would not serve pages directly from the folder where your server.js file is (which is usually the same as node_modules) as proposed by timetowonder, that way people can access your server.js file.
Of course you can simply download and copy & paste on your folder, but with NPM you can simply update when needed... easier, I think.
The point of using CDN is that it is faster, first of all, because it is a distributed network, but secondly, because the static files are being cached by the browsers and chances are high that, for example, the CDN's jquery library that your site uses had already been downloaded by the user's browser, and therefore the file had been cached, and therefore no unnecessary download is taking place. That being said, it is still a good idea to provide a fallback.
Now, the point of bootstrap's npm package
is that it provides bootstrap's javascript file as a module. As has been mentioned above, this makes it possible to require it using browserify, which is the most likely use case and, as I understand it, the main reason for bootstrap being published on npm.
How to use it
Imagine the following project structure:
project
|-- node_modules
|-- public
| |-- css
| |-- img
| |-- js
| |-- index.html
|-- package.json
In your index.html you can reference both css and js files like this:
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Which is the simplest way, and correct for the .css files. But it is much better to include the bootstrap.js file like this somewhere in your public/js/*.js files:
var bootstrap = require('bootstrap');
And you include this code only in those javascript files where you actually need bootstrap.js. Browserify takes care of including this file for you.
Now, the drawback is that you now have your front-end files as node_modules dependencies, and the node_modules folder is usually not checked in with git. I think this is the most controversial part, with many opinions and solutions.
UPDATE March 2017
Almost two years have passed since I wrote this answer and an update is in place.
Now the generally accepted way is to use a bundler like webpack (or another bundler of choice) to bundle all your assets in a build step.
Firstly, it allows you to use commonjs syntax just like browserify, so to include bootstrap js code in your project you do the same:
const bootstrap = require('bootstrap');
As for the css files, webpack has so called "loaders". They allow you write this in your js code:
require('bootstrap/dist/css/bootstrap.css');
and the css files will be "magically" included in your build.
They will be dynamically added as <style /> tags when your app runs, but you can configure webpack to export them as a separate css file. You can read more about that in webpack's documentation.
In conclusion.
You should "bundle" your app code with a bundler
You shouldn't commit neither node_modules nor the dynamically built files to git. You can add a build script to npm which should be used to deploy files on server. Anyway, this can be done in different ways depending on your preferred build process.
Answer 1:
Downloading bootstrap through npm (or bower) permits you to gain some latency time. Instead of getting a remote resource, you get a local one, it's quicker, except if you use a cdn (check below answer)
"npm" was originally to get Node Module, but with the essort of the Javascript language (and the advent of browserify), it has a bit grown up. In fact, you can even download AngularJS on npm, that is not a server side framework. Browserify permits you to use AMD/RequireJS/CommonJS on client side so node modules can be used on client side.
Answer 2:
If you npm install bootstrap (if you dont use a particular grunt or gulp file to move to a dist folder), your bootstrap will be located in "./node_modules/bootstrap/bootstrap.min.css" if I m not wrong.
Use npm/bower to install bootstrap if you want to recompile it/change less files/test. With grunt it would be easier to do this, as shown on http://getbootstrap.com/getting-started/#grunt.
If you only want to add precompiled libraries feel free to manually include files to project.
No, you have to do this by yourself or use separate grunt tool. For example 'grunt-contrib-concat' How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)