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.
Related
I am using pug for the first time and am trying to figure out how to use npm pug-bootstrap so I can use their layouts.
I npm installed jade-bootstrap and pug-bootstrap but cannot find in the documentation how to reference their cover bootstrap layout in my index.pug file.
I already have my server.js file and can render html onto my local port. I tried copying the cover.pug page into my index.pug page but that does not work.
I'm assuming I have to call it but I dont know how. How can I call my layouts from PUG-Bootstrap?
First remove jade-bootstrap or pug-bootstrap packages:
npm remove jade-bootstrap
npm remove pug-bootstrap
Jade was deprecated, now instead of jade it's called PUG
Install pug:
npm install pug --save
use --save if you want to install pug only to your project folder, if you will execute command without --save , package will be installed globally to you station.
Enter http://html2jade.org
Now you can create simple bootstrap html page and it will be converted to your noted pug file.
For example, If you need to include footer.pug to your index.pug .
In index pug put absolute path to footer.pug (includes/foot.pug)
References:
Include pugJs
There may be a better way but this is what I did to access Bootstrap CSS from my pug templates:
First, installed bootstrap via npm:
npm install bootstrap
This downloads and installs the bootstrap JavaScript and CSS locally on your server. I then copied the two folders out of dist to the public location on my server, i.e.:
{server directory}\node_modules\bootstrap\dist\js
{server directory}\node_modules\bootstrap\dist\css
into:
{server directory}\public\js
{server directory}\public\css
Then in my layout.pug template, simply added:
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/css/bootstrap.min.css')
(I added the second line).
There may be a cleaner way, but this is what worked for me.
I tryed to use css frameworks lots of times. But i cant found any guide what to do. Just some post from other developers. Can you help me with the guide, how to import and use css framework in my expressjs project.
For instance, i started new project with express generator:
express --view=pug --css=sass
next, i installed materialize
npm install materialize-css
What i must to do next??? How to connect js and sass files with my project? How to compile all, if i tryed to do just a website? Where i can find good guides about such things, if i will have more questions?? Thanks!
npm was originally to get Node Module, but with the essort of the Javascript language (and the advent of browserify, webpack,etc), it has a bit grown up.
In fact, you can even download Bootstrap 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. Same goes for Webpack module bundler.
If you npm install bootstrap (if you don't use grunt or gulp file to move to a dist folder), your bootstrap will be located in some location like below.
"./node_modules/bootstrap/bootstrap.min.css"
You need to include this in your .html file.
For sass if you use grunt then you will be using this plugin grunt-sass to convert sass to css and add the destination file to the .html file. Similarly goes for gulp.
i know there's some nodejs modules to use apache velocity in node like those addresses in that question's response.
could be done to use it as a, says, mustache replacement via, maybe, browserify.js?
how would you do that as a workflow?
I suspect it would be a better implementation on Liferay's frontend template development, so the frontender can serve to the java team html already velocity templating aware.
Thanks a lot.
You can directly use velocityjs on browser after using browserify on it.
Installation
First install velocityjs in your node_modules
$> npm install velocityjs
Now from your project (where the node_modules mentioned above exists) use browserify
browserify -r velocityjs > velocity.js
This will create a velocity.js file that you can include in your website directly. If you don't have browserify then do npm install -g browserify
Usage
In your webpage js file first require velocityjs
var velocityjs = require("velocityjs");
Now to get the templated html do
var renderedString = velocityjs.render(initialString,context)
Note that velocity does not care if your initial string was html or not, you need to ensure that
is there a way I can use an npm package on the client side? For example, I want to use the dateformat(https://www.npmjs.com/package/dateformat) package in my client side javascript file
If you want to use npm on the client you may consider using browserify which is designed for that purpose. The node module system is not compatible with browsers so browserify transpiles the javascript into something that will work. Hence the name : browserify.
I found it wasn't enough to use Browserify. There were still issues with the client-side not finding the variables/functions from the library.
Here are the steps that worked for me:
Install Browserify:
npm install -g browserify
Install a library from npm (I'll use leader-line as an example):
npm i leader-line
You will now have all the npm files needed inside the node_modules directory:
Now we can run the usual Browserify command to bundle the JS file from the npm package:
browserify node_modules/leader-line/leader-line.min.js -o bundle.js
This will produce a bundle.js file outside of node_modules:
This is the file we can bring into the front-end, as we would with a usual JS library.
So, assuming I added my bundle.js file to a libs folder, and renamed bundle.js to leaderline.js, I can simply add the usual line in the header of my index.html file:
<script src="libs/leaderline.js" type="module"></script>
Notice the addition of type="module" to the script tag.
However, this is STILL not enough. The final step is to open the JS file for the library (in my case leaderline.js) and find the main function that needs to be exported (usually somewhere near the top):
var LeaderLine=function(){"use strict";var te,g,y,S,_,o,t,h,f,p,a,i,l,v="leader-line"
I need LeaderLine to be available inside my scripts. To make this possible, we simply remove var and add window. in front of the function name, like this:
window.LeaderLine=function(){"use strict";var te,g,y,S,_,o,t,h,f,p,a,i,l,v="leader-line"
Now I can use the library client-side without any problems:
HTML:
<div id="start">start</div>
<div id="end">end</div>
JS
new LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
Some will argue that exposing the function to the window is too "global" for best practices. But the other option is to use module bundlers, which handle the exposing of packages, and this is overkill for many applications, especially if you're trying to whip together a quick front-end to try something out.
I find it odd that so many now publish packages in npm, that are obviously intended for the front-end (e.g. obviously nobody would use leaderline.js in back-end node, yet this is where the package was published, with no available CDN).
Given how tortuous it is to expose front-end functionality from an npm package, one can argue that today's JS ecosystem is a mess.
Most of the packages on NPM are designed for server side and won't work on the client side because of security reasons. You could use NW.js, but the user would have to install your software on there computer.
"NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies."
http://nwjs.io/
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)