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
Related
I'm having a difficult time understanding where/how to use Bootstrap in my nodejs project. I installed Bootstrap with npm, but how do I include it in my index.html file?
Do I need to include the stylesheet tag at the top and the tags above the tag at the bottom like usual in my .html files, or can I just start applying Bootstrap classes to my elements once I've required it in my app.js file?
Also, is there an advantage to using npm to install Bootstrap versus using the CDNs?
I'd recommend checking out Bootstrap's npm starter project:
https://github.com/twbs/bootstrap-npm-starter
It shows you exactly how to load it from npm and use it in a project.
It's better to build the CSS yourself (from the Sass files) so you can customise it and remove the components you don't need and creating a smaller CSS file.
Add this code if using server like Express
app.use(
express.static(path.join(__dirname, "node_modules/bootstrap/dist/"))
);
Then in your head tag:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
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.
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've started reading up on Node and Express with the intention of porting a few projects of mine over to it. The projects I'm porting are currently built with Python and Flask, and styled with Bootstrap.
I'm having difficulties getting a basic Express site up and running with Bootstrap as the styling. I used express-generator to get the basic skeleton set up, and then used npm to install bootstrap:
npm install bootstrap
I added bootstrap as a requirement, and as a middleware:
var bootstrap = require('bootstrap');
app.use('bootstrap');
Now I'm just not sure how to "import" that into my layout template. If someone could show me an example, or point me to a resource, that'd be great.
Nodejs is used on the backend there is no need to npm install bootstrap. Node will serve your html or jade/pug/ejs etc.
You can use a CDN and link the files in the html or pug. You can also choose to include the CSS and JS files required for bootstrap in the /public directory.
Using the Express generator is a great start, you can specify your templating engine (i.e. jade/pug, ejs etc.) or just use html. Jade/Pug will compile into HTML and be served to the front end (client side). You can include the CDN link within your jade/pug file, similar to how you would include it in regular HTML. You might want to read some documentation for pug/jade since it has a more minimalistic syntax than html, Pug Docs.
To use pug/jade enter the following command (provided you have express generator npm installed already):
express --pug --css
To use html only enter the following command (provided you have express generator npm installed already):
express --no-view --css
The commands above will create the template, all you have to do is include the CDN link within the /view/layout.pug file and you can use bootstrap. Basic routing has been defined, just npm install, and npm start.
You do not need bootstrap as a node module since bootstrap is a front end thing. You'd be better off doing a bower.
Goto your terminal
sudo npm install bower -g
Then, once you have that make a .bowerrc file
nano .bowerrc
set the default directory as public in that file
{
"directory":"./public"
}
Then, finally, do this-
bower install bootstrap --save
That will fetch bootstrap for your styles. If you want to pass data from the server to the htmls, try one of the templating engines like ejs or jade and then later add the cols in there to be rendered as html to the client.
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)