Category Archives: Node

Bower broke Wiredep, and how to fix it….

Well, in reality Bower did not intentionally break Wiredep. A few weeks ago Bower published a standard for the use of the bower.json file. In the “main” section of the bower.json file, bower states

  • Use source files with module exports and imports over pre-built distribution files.
  • Do not include minified files.
  • Do not include assets files like images, fonts, audio, or video
  • Filenames should not be versioned (Bad: package.1.1.0.js; Good: package.js).
  • Globs like js/*.js are not allowed.

So, in this case, the preference for items listed in “main” would be the less or sass files and not the actual css files. Sounds great in theory. But not as awesome in reality.

In version 3.3.5 of bootstrap, they have implemented this suggestion by dropping the “dist/css/bootstrap.css” from the main section of their bower.son file.

That on its own is great, Bootstrap is conforming to the suggested standard set by Bower. Except for one thing…

Wiredep is this awesome tool that automatically injects css and js files into your views based on your bower.json file. So if you include Bootstrap, it will look in the “main” section of bootstrap’s bower.son file and pull the css and js files and add them to your view. Except now that css file is gone…

But not all is lost. Wiredep allows you to override those sections in your own bower.json file using the “overrides” section. So if you are trying to upgrade to 3.3.5 of bootstrap or 4.4.0 of font-awesome, you can add this code to your bower.json file and all will be well again…

“overrides”: {
        “bootstrap”: {
            “main”: [
                “dist/js/bootstrap.js”,
                “dist/css/bootstrap.css”,
                “less/bootstrap.less”
            ]
        },
        “font-awesome”: {
            “main”: [
                “less/font-awesome.less”,
                “css/font-awesome.min.css”,
                “scss/font-awesome.scss”
            ]
        }
    }

Quick application scaffolding with Express

Ok, maybe I am the only one who didn’t know this but getting a basic application scaffolding set up in Node is ridiculously easy…. Check this out.

 

In a terminal window.. Create a new directory… Called what you want. 

mkdir NewTestApp ; cd NewTestApp

install express globally so you can execute it from the command line. 

npm install -g express

now, express will create a full blown Node app with express, jade, all of your parsers, and routing with one simple command… 

express newAppName

Done, lots of stuff installed and ready to go. But, before you go anywhere, you need to get the dependancies installed. cd into the new directory and run npm install. 

cd newAppName && npm install

That will get everything installed and ready to go. The way it sets everything up to run is with a script in /bin/www that starts up the server on port 3000… To start it up, run this:

DEBUG=my-application ./bin/www

Done. Take a few minutes to look around and see how the routing is done but this approach will save you from having to redo all the requires and initial routing work every time you want to play with something.