node.js,twitter-bootstrap,gulp,bower , I don't understand how to work Bower properly


I don't understand how to work Bower properly

Question:

Tag: node.js,twitter-bootstrap,gulp,bower

I'm building a site and I've decided to use a bootstrap template for the back-end (admin tools and whatnot).

I like the look of sb-admin-2 (http://startbootstrap.com/template-overviews/sb-admin-2/) but I'ma bit confused how to practically employ this in my site. I installed Bower and installed sb-admin using bower install startbootstrap-sb-admin-2

Now I have a folder called bower_components, and it's filled with all the relevant packages... However, these packages include the development files as well.

If I upload this to my site as is, 80% of it will be unnecessary source data. I'm currently using Gulp with my project, but I don't yet see how the 2 are supposed to interact. Is there a gulp package for compiling the bower_components into 1 concise thing?

I'm new to this kind of workflow and I can't find the answers to the questions despite my efforts. Apologies if I sound like a total noob.


Answer:

There's no pre-built gulp package that will pull in all your bower source files. You should write a task that pulls in just the files you need. Here's an example from a project I'm working on (simplified):

var scripts = [
    'bower_components/timezone-js/src/date.js',                             // https://github.com/mde/timezone-js
    'bower_components/jquery/jquery.min.js',                                // http://api.jquery.com/
    'bower_components/jquery-migrate/jquery-migrate.js',                    // https://github.com/appleboy/jquery-migrate
    'bower_components/jquery-ui/ui/minified/jquery-ui.min.js',              // todo: include just the bits we need
    'bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.min.js',   // https://github.com/furf/jquery-ui-touch-punch
    'bower_components/jquery-cookie/jquery.cookie.js',                      // https://github.com/carhartl/jquery-cookie
    'bower_components/jquery.expander/jquery.expander.min.js',              // https://github.com/kswedberg/jquery-expander
    'bower_components/jquery.transit/jquery.transit.js',                    // http://ricostacruz.com/jquery.transit/
    'bower_components/select2/select2.min.js',                              // http://ivaynberg.github.io/select2/
    'bower_components/fancybox/source/jquery.fancybox.pack.js',             // http://fancyapps.com/fancybox/
    'bower_components/lodash/dist/lodash.compat.min.js',                    // https://lodash.com/docs
    'bower_components/underscore.string/dist/underscore.string.min.js',     // https://github.com/epeli/underscore.string#string-functions
    'bower_components/json2/json2.js',                                      // https://github.com/douglascrockford/JSON-js
    'bower_components/jquery-validation/dist/jquery.validate.min.js',       // http://jqueryvalidation.org/documentation/
    'bower_components/jquery-file-upload/js/jquery.iframe-transport.js',
    'bower_components/jquery-file-upload/js/jquery.fileupload.js',          // https://blueimp.github.io/jQuery-File-Upload/
    'bower_components/DataTables/media/js/jquery.dataTables.js',            // https://datatables.net/
];

gulp.task('scripts', function () {
    return gulp.src(scripts, {base: '.'})
        .pipe(plumber())
        .pipe(sourcemaps.init({
            loadMaps: false,
            debug: debug,
        }))
        .pipe(concat('all_the_things.js', {
            newLine:'\n;' // the newline is needed in case the file ends with a line comment, the semi-colon is needed if the last statement wasn't terminated
        }))
        .pipe(uglify({
            output: { // http://lisperator.net/uglifyjs/codegen
                beautify: debug,
                comments: debug ? true : /^!|\b(copyright|license)\b|@(preserve|license|cc_on)\b/i,
            },
            compress: { // http://lisperator.net/uglifyjs/compress, http://davidwalsh.name/compress-uglify
                sequences: !debug,
                booleans: !debug,
                conditionals: !debug,
                hoist_funs: false,
                hoist_vars: debug,
                warnings: debug,
            },
            mangle: !debug,
            outSourceMap: true,
            basePath: 'www',
            sourceRoot: '/'
        }))
        .pipe(sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '/',
        }))
        .pipe(plumber.stop())
        .pipe(gulp.dest('www/js'))
});

I'm cherry-picking the source files I want, combining and minifying them, and dumping them into my public directory so that can be served to the client. You don't need to upload the bower_components folder to your production server; but it probably wouldn't hurt much either (it's not THAT big!).


Related:


Waiting for promises - code hangs


javascript,node.js,promise
I am using Javascript Promises for the first time and ran into something I don't understand. What I am trying to do is create a validation phase which runs around and checks things - eventually waiting for all promises to resolve. To do this, I create a validation promise: validate...

Error is not thrown inside a deferred method


node.js,exception-handling,deferred
Can somebody explain to me why my error is not thrown in my first example? And why it is when I use process.nextTick() ? var deferred = require('deferred'); // This code does not work. // Error seems to never been thrown and script kind of freeze without saying anything. deferred.resolve().then(function(){...

Bootstrap toggle doesn't display well when added dynamically


javascript,jquery,twitter-bootstrap
I'm trying to add bootstrap toggle switch dynamically but it does not display well after adding it. Thanks for your help! <input id="TheCheckBox" type="checkbox" data-off-text="Yes" data-on-text="No" checked="false" class="BSswitch"> <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p> $('.btn').on('click', function () { $('p').after( '<input id="TheCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="BSswitch">' ); });...

What are some patterns I can look at for database implementations in JavaScript?


javascript,node.js,mongodb
I'm fairly new to JavaScript, and I'm busy playing around with a node test app and MongoDB. I'm at a point where I'd like to start with the db side of the app, but I'm not sure what patterns are most commonly used in such a stack, and more importantly,...

mongodb populate method not working


node.js,mongodb,model,populate,auto-populate
Here is my code for models var postSchema = new mongoose.Schema({ created_by: {type: Schema.ObjectId, ref:'User', autopopulate: true }, //should be changed to ObjectId, ref "User" created_at: {type: Date, default: Date.now}, text: String }); var userSchema = new mongoose.Schema({ username: String, password: String, //hash created from password created_at: {type: Date, default:...

node ssh2 shell unable to run apt-get install on remote machine


node.js
I'm doing a program in node.js to deploy my code from git to a server (Digital Ocean). I'm connecting to the server via ssh2 module and running commands via shell, like bellow: var Client = require('ssh2').Client; var conn = new Client(); conn.on('ready', function() { console.log('Client :: ready'); conn.shell(function(err, stream) {...

call functions in async with node which is more recomended Q or callback


javascript,node.js,callback,promise,q
I've node app with function that inside call to to other two function,I want to use some async behavior for it,what is recommended to use in this case. example will be very helpful. function myFunction(req,res){ //from here this is the first place which I want to use warp in function...

AngularJS & Bootstrap Modal - loading template outside controller


angularjs,twitter-bootstrap,angular-bootstrap
I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below: var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function () { return $scope.items; } } }); <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header">...

End to end alignment of 3 Columns using Bootstrap


twitter-bootstrap
I am new to bootstrap. I tried aligning three sections end to end (horizontal manner) with equal space. (1st column should be aligned to extreme left of the container and last should be aligned to extreme right.) There is extra space at the third column. I have added bootstrap css...

Owl Carousel implementation


jquery,twitter-bootstrap,carousel,owl
I can't use the Owl Carousel 2 I would like to use. I think it has something to do witht the files I have connected to my html but there might be a another problem. Do I even have the right files? This is my HTML so far. I already...

jQuery DataTables with Node.js


javascript,jquery,node.js,datatables,jquery-datatables
So i am trying to implement a pagination table with the datatables plugin, this is my first time using this plugin. I followed the documentation on the plugin and tried to get the values from the server through the use of Ajax, as per presented in the plugins documentation. I...

websockets - reject a socket connection


node.js,sockets,websocket
I'm using ws as the socket library for my node.js library. so my question is, how can I reject a connection if the user doesn't pass the authorization process. var WebSocketServer = require('ws').Server; var wss = new WebSocketServer({port: 6969}); wss.on('connection', function(socket){ // if the socket.upgradeReq.headers.cookie doesn't exists, reject the client...

how can I import a file in node.js?


javascript,node.js
I have developed a node.js application and performing some validation with the use of a template. At the moment this 'template' is a local variable but I would like to store this in a file in my project. So this is the validation code: isvalid(req.body,template , function(err, validObj) { if...

How do I run C# within a Node.js server application?


c#,node.js,server
I have a node.js application and a C# algorithm. The algorithm puts out 15 numbers that represent symbols on a digital slot machine. The node server is posting and getting data from Firebase and the digital slot machine is doing the same on the same table. My question is how...

Socket.IO message doesn't update Angular variable


javascript,angularjs,node.js,sockets
I have a socket.io client-server setup with AngularJS running on the client. // Server.js var io = require('socket.io')(server); io.on('connection', function (socket) { socket.on('message', function (msg) { //console.log(msg); console.log(msg); io.emit('message', msg); }); }); As observed, it essentially emits a message events with the data stored in the variable msg. And then...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

Socket.io client does not connect to server


node.js,express,socket.io
I am trying to make a Node.js app that will have an embedded chat. I am using socket.io to create that chat. I have attempted to set up my server / client, but the client does not seem to be connecting. I have my application to set log when sockets...

MvcSiteMapProvider - Enhanced bootstrap dropdown menu


c#,twitter-bootstrap,asp.net-mvc-5,mvcsitemapprovider,mvcsitemap
I'm trying to build a menu like this: For reference I'm using this library https://github.com/behigh/bootstrap_dropdowns_enhancement @Html.MvcSiteMap().Menu("BootstrapMenuHelperModel") @model MenuHelperModel <nav class="navbar" role="navigation"> <div class="container-fluid menu-container"> <div class="collapse navbar-collapse"> <div class="navbar-header"> <span class="navbar-brand">FAR BACKOFFICE</span> </div> <ul class="nav nav-pills"> @foreach (var node in Model.Nodes) { if...

I'd like to count the documents with the matching “name” property AND group them by “name” at the same time


node.js,mongoose,group-by
Let's say I have a User collection: schema = mongoose.Schema({ firstName: { type: String, required: true }, ... ... }); module.exports = mongoose.model("User", schema); I would like to write a mongoose query that would count how many users go by the name Mike, Andy, Jerry... In other words, I would...

Bootstrap 3 DatePicker - How to reset selected date without resetting the picker configuration?


jquery,twitter-bootstrap,datepicker
I'm trying to reset the selected date on button click, but so far I'm only able to clear the input element, without the actual date on the picker. The following code resets everything, including the configuration and the date, so its obviously not what I need. $('#datepicker').datepicker('update',''); //resets everything To...

Using TypeScript type definitions with Webstorm 10 [duplicate]


node.js,typescript,webstorm
This question already has an answer here: intellisense and code complete for DefinitelyTyped (TypeScript type definitions) on WebStorm IDE 2 answers I am trying to use Webstorm 10's new built-in TypeScript compiler. When compiling a simple Node.js file such as below, it gives a TS compilation error of "Error:(1,...

node.js winston logger no colors with nohup


node.js,logging,nohup,winston
We are using winston logger in our project with the following transport settings: file: { filename: __base + '/log/server.log', colorize : true, timestamp : true, json : false, prettyPrint : true } If the application is started with nohup, log file is not colorized. It works only without nohup. nohup...

How to use promises to do series without duplicate code


node.js,promise,bluebird
I need execute a code in series, I need execute the same function N times Example // execute asynFunc 4 times in series object.asynFunc() .then(function() { return object.asynFunc(); }) .then(function() { return object.asynFunc(); }) .then(function() { return object.asynFunc(); }) I want execute the same function 100 times...

How to prevent bootstrap from making font bold?


javascript,jquery,html,css,twitter-bootstrap
Without including the bootstrap link in this simple example, the following code performs as expected: Hovering over any word turns the word red, and hovering away returns it to black. With the bootstrap link included, the change from red/black still works fine, but for some reason, the font becomes bold...

Modal from inside Bootstrap Tabs using Knockout foreach


jquery,twitter-bootstrap,knockout.js,twitter-bootstrap-3
I have Bootstrap tabs bound to a KnockoutJS observable array using a foreach binding, which is working fine. I now want to launch a Bootstrap modal from inside the active tab. <div class="tab-content"> <!-- ko foreach: trueData --> <div class="tab-pane fade in" data-bind="css:{active: $index() == 0}, attr :{'id': 'tab' +...

nodejs head request isn't triggering events


node.js,http
Here's my code: var http = require('http'); var req = http.request( { host: 'example.com', method: 'HEAD', path: '/' }, function(res){ res.on('end',function(){ console.log('Ended'); }); res.on('finish',function(){ console.log('Finished'); }); res.on('close',function(){ console.log('Closed'); }); } ); req.end(); Strange thing about it is that it doesn't print anything. Takes longer than expected and exits. Is this...

Emitting and receiving socket io within the same file


node.js,express,socket.io
I want to do something where I can set up a route to a link like /visit using app.get('/visit', function(req, res){}) etc. And inside that, I want to emit a message like socket.emit("event", "a message") and then inside my io.on("connection") function, be able to listen for event and return the...

NPM : how to just run post-install?


node.js,npm,package.json
Just a simple question : in my node.js project, how could I just run the postinstall script, without running install before ? FYI, this is my package.json : { "name": "gestionclientjs", ..., "dependencies": { ... }, "repository": {}, "devDependencies": { ... }, "engines": { "node": ">=0.10.0" }, "scripts": { "test":...

Redis: Delete user token by email ( find Key by Value )


node.js,express,redis
I have followed tutorial on how to create token-based authentication with node from this tutorial http://www.kdelemme.com/2014/08/16/token-based-authentication-with-nodejs-redis/ I got it all worked out, but I got 1 problem. The way I store token is : KEY = TOKEN VALUE = UserData (Username, email, etc.) To protect multiple devices login, I would...

Sockets make no sense?


javascript,node.js,sockets
I'm using the 'ws' library for Node.js. I can write code that sends data from my server to my client, posting a date and time update, and closes the socket when I click a button; var wss = new WebSocketServer({server: server}); console.log("WebSocket server created"); wss.on('connection', function(socket) { // SEND DATE...

React from NPM cannot be used on the client because 'development' is not defined. The bundle was generated from Webpack


javascript,node.js,npm,reactjs,webpack
I'm creating a React Node.js app and I'm trying to generate a Webpack bundle containing the React source code I loaded from NPM. However, it seems that the React code from NPM cannot be used directly in the client. It triggers this error: Uncaught ReferenceError: development is not defined The...

Is express similar to grunt? what is the difference? what are the advantages of express over grunt?


node.js,express,gruntjs,mean-stack
I've been working on node,grunt,bower and yeoman from couple of months. I came across MEAN stack applications, in which expressjs is providing the server environment(my understanding). Are both grunt and express similar? Requesting for some helpful link on express and MEAN stack. ...

Node Server - Source Code accessible


node.js,express
I noticed that when i navigate to localhost:8080/server.js (where my server.js is the server-expressjs obviously) the code of my server is shown in the browser! Even, if i upload the application to openshift, i get the same result (you can test it): http://tickets-shkobba125.rhcloud.com/ http://tickets-shkobba125.rhcloud.com/server.js Is this a security issue? How...

How to make background body overlay when use twitter-bootstrap popover?


html,css,twitter-bootstrap
Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

After deploying to heroky scripts and css not available


node.js,heroku
I am new in heroku. Locally project works fine but after deploying vendor scripts files are not available. Their paths are redirected to main page. Here is the deployed version with errors https://salty-woodland-8424.herokuapp.com/. In nodeJs file i use var express = require('express'); var path = require('path'); var stylus = require('stylus');...

How to get my node.js mocha test running?


javascript,node.js,mocha,supertest
I have developed a service in node.js and looking to create my first ever mocha test for this in a seperate file test.js, so I can run the test like this: mocha test I could not figure out how to get the reference to my app, routes.js: var _ =...

Create n:m objects using json and sequelize?


javascript,json,node.js,sequelize.js
I am trying to learn sequelize, but am having trouble getting a n:m object created. So far I have my 2 models that create 3 tables (Store, Product, StoreProducts) and the models below: models/Store.js module.exports = (sequelize, DataTypes) => { return Store = sequelize.define('Store', { name: { type: DataTypes.STRING, },...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3


javascript,jquery,css,html5,twitter-bootstrap
I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

Content section overlap footer


html,css,twitter-bootstrap,css3,twitter-bootstrap-3
I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

How to add new items to an array in MongoDB


arrays,node.js,mongodb
I'm trying to add a new item to whichever name that was passed in under whichever id. My first problem is that it seems like its not grabbing the values from any of my variables (name, item, id), instead just using them as object keys. My next issue is that...

Setting up the page grid using push and pull


html,twitter-bootstrap,css3,twitter-bootstrap-3
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

Replace nodejs for python?


python,node.js,webserver
i'm working in a HTML5 multiplayer game, and i need a server to sync player's movement, chat, battles, etc. So I'm looking for ways to use python instead nodejs, because i have I have more familiarity with python. The server is simple: var express = require('express'); var app = express();...

What type of database is the best for storing array or object like data [on hold]


database,node.js,sockets
I'm just curious what the best method would be if I'm trying to have a bot running on my Node server that I could play Blackjack against. But for multiple connected clients via sockets, each connected socket will have their own bot to play against but I need some way...

Bootstrap Modal popup not scrolling with keyboard


jquery,twitter-bootstrap
I'm using bootstrap modal, I added a scroll bar and it works fine with the mouse, but when I use the keyboard only the background page scrolls. What can I do to solve this. This is the css code that I'm using. .modal .modal-body { height: 520px; overflow-y: auto; }...

How to fit the title to the entire page


html,css,twitter-bootstrap
I'm trying to fit this title to the entire page. For some reason, there is a padding around the text that's not allowing me to fit it. I set the padding of the column (Bootstrap) to 0, but that doesn't seem to help. As soon as I increase the font-size...

after puttin php syntax, my website get stuck at preloader


php,twitter-bootstrap,session
I have this code on my php file for navbar: <?php if(!$session->is_logged_in()) { echo ' <a href="login.php" role="button" aria-expanded="false"> Login <span class="label"> login to system</span> </a> </li>';} else { echo ' <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false"> ' . $session->user_name; . '<span class="badge bg-default">2</span> <span class="caret"></span> <span class="label">it is you</span> </a>';...

Access Node-Webkit App from other Application


node.js,node-webkit
Is it possible to call a function in nodewebkit from an external application? For example. I would like to decide whether the window is hidden or show through a external application or with applescript. ...

Getting CROS Error even after adding header in node.js for Angular js


javascript,angularjs,node.js
I am trying to consume REST API from NODE JS for Angular js,even after adding cors header in my server code I am getting error XMLHttpRequest cannot load http://127.0.0.1:8085/issues. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. I am new to both Angular JS and Node JS. Node JS...

What does a [Function] (wrapped in square brackets) mean when inside of a javascript object?


javascript,node.js,javascript-objects
When running console.log on various functions, I'll find properties on the object that have a value of [Function: someFunctionName] in the value section. What does this mean? I want to be able to view the actual code of the function. I'm confused on what's actually being logged when I see...

NodeJS / ExpressJS check valid token parameter before routing


node.js,express,parameters
I have the following app code: (app.js) var express = require('express') , app = express() , port = process.env.PORT || 8082 app.use(require('./controllers')) app.use(function(req, res, next) { res.send('Test') next() }) app.listen(port, function() { console.log('Listening on port ' + port) }) and two controllers: (index.js) var express = require('express') , router =...