javascript - How Does One Include Bootstrap in Node Project -

-

i have mean stack project scaffolded using basic npm command. @ moment, bootstrap included using cdn:

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')

my question how can add bootstrap using npm project works same cdn inclusion. in particular, when run

npm install bootstrap

a boostrap directory created within node_modules. however, if try include bootstrap.css directory, breaks glyphicon fonts. advise on how it?

p.s. pose same question regarding angularjs itself.

you can use browser package manager i.e bower

bower offers generic, unopinionated solution problem of front-end package management, while exposing package dependency model via api can consumed more opinionated build stack. there no system wide dependencies, no dependencies shared between different apps, , dependency tree flat.

if want more knowledge better , reliable read link also.

why not npm

the main difference between npm , bower approach installing package dependencies. npm installs dependencies each package separately, , result makes big package dependency tree (node_modules/grunt/node_modules/glob/node_modules/...), there several version of same package. client-side javascript unacceptable: can't add 2 different version jquery or other library page. bower each package installed once (jquery in bower_components/jquery folder, regardless of how many packages depend on it) , in case of dependency conflict, bower won't install package incompatible 1 that's installed.

bower installation

you simple install packages

syntax

npm install -g bower

you can refer doc complete information.

for example:

directory structure

project folder   + bower_components      + bootstrap        + dist          + css            + bootstrap.css      + jquery        + jquery.js   + public     + index.html   + app.js

now can set static path in app.js

app.use(express.static(path.join(__dirname, 'bower_components')));

now can use in index.html file

<!doctype html> <html> <head>     <title>{{ title }}</title>     <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' /> </head> <body> {{{ yield }}} </body> <script src="/bootstrap/dist/jquery/jquery.js"></script> </html>

screenshots

directory structure app.js file enter image description here

normal html file enter image description here


Comments

Post a Comment

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

-
creating wordpress website , i'm getting following php error: parse error: syntax error, unexpected 'endforeach' (t_endforeach) in /home/soralmedia/public_html/wp-content/themes/soral media/woocommerce/myaccount/my-orders.php on line 98 here's code file: <?php /** * orders * * shows recent orders on account page. * * template can overridden copying yourtheme/woocommerce/myaccount/my-orders.php. * * however, on occasion woocommerce need update template files , (the theme developer). * need copy new files theme maintain compatibility. try this. * little possible, happen. when occurs version of template file will. * bumped , readme list important changes. * * @see http://docs.woothemes.com/document/template-structure/ * @author woothemes * @package woocommerce/templates * @version 2.5.0 */ if ( ! defined( 'abspath' ) ) { exit; } $my_orders_columns = apply_filters( 'woocommerce_my_account_my_orders_columns', array( ...
Read more

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

-
i new vba have developed code use in excel move text/numbers txt file. issue have 3 functions need go same txt file. when run first function has set fs = createobject("scripting.filesystemobject") set = fs.createtextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the other 2 functions had save. set fs = createobject("scripting.filesystemobject") set = fs.savetextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the first function go txt file, other 2 error object doesn't support property or method. when changed 3 create last function goes txt file. can not figure out word use in order make other 2 functions follow txt file in order keyed. the entire code follows private sub addrecord_click() on error goto errhandler module1.nys45uploadfilename = application.getsaveasfilename(filefilter:="textfiles (*.txt), *.txt") if module1.nys45uploadfilename = "false" exit sub ...
Read more

Using django-mptt to get only the categories that have items -

-
sample structure: all uppercase: category mixed case: item root ├── books │   ├── fiction │   │   └── classics │   └── non-fiction ├── clothing └── electronics ├── laptops ├── phones │   ├── apple │   │   ├── iphone 6 │   │   ├── iphone 6 plus │   │   ├── iphone 6s │   │   └── iphone 6s plus │   ├── motorola │   │   ├── moto g4 │   │   ├── moto g4 play │   │   ├── moto g4 plus │   │   └── moto x │   └── samsung └── tablets └── apple i'm trying have index page show "electronics" category. "clothing" category shouldn't show since it's empty , "books" category shouldn't show either since, although has child categories, child categories don't have items. similarly, "electronics" page should show "phones" category. "laptops" category shouldn't show since it's empty , "tablets" category shouldn't show either since...
Read more