A collection of useful Node.js code snippets and resources.
An easy way to get a Node.js http server up and running is by installing the http-server node module globally, npm install http-server -g. Here is an example using the -a option to specify an address to use. For more options, run http-server --help.
http-server -a localhost
http-server default is to use address 0.0.0.0 which is reachable by all IP addresses of the local machine’s network interface. Therefore, it may not be safe to run this address on a public network.
The package.json file contains project metadata and lists dependencies that are available on npm.
# create package.json
Create a gulpfile.js in the project root to define and configure the Gulp tasks. The default task is simply gulp. When gulp is executed, it will run the browserify bundle task, start a local web server and open the default web page in a browser.
This tutorial covers using Git to clone, branch and merge the latest Bootstrap source code, modifying and compiling your modifications to the source LESS variables using Grunt and viewing your compiled changes with a local Node.js web server.
You could just use the Bootstrap customize and download form to customize the LESS variables and download a pre-compiled Bootstrap package. However, as of this writing, the user interface at the form doesn’t provide a preview option to monitor your changes before you download the package. And since the Bootstrap version 3 source now includes Grunt, we can use it to compile the LESS source and preview the changes via localhost.
Using Git, clone the Bootstrap repository. To keep our changes to the source separate and to make upgrading the bootstrap source easier, create a develop branch.
# git clone creates the bootstrap directory in your current directory
$ git clone https://github.com/twbs/bootstrap.git
# create and checkout develop branch
$ git checkout -b develop
Load a Bootstrap example
I like to use the Node.js web-server.js that is bundled with the AngularJS tutorial. For example, here is how I start the NodeJs web-server.js that is included in the angular-phonecat repository on GitHub. This example presumes your CLI is in the bootstrap directory and the angular-phonecat repository is cloned to its own directory one level up.
Repository contents rearranged over the holidays and the examples have been moved to the docs folder. You can always take a look at the latest source on GitHaub.
# directory structure (partial)
# | angular-phonecat/
# | -- scripts/
# | -- web-server.js
# | bootstrap/
# | -- docs/
# | -- examples/
# | -- starter-template/
# | -- index.html
# | -- starter-template.css
# start the web server from the bootstrap directory
$ node ../angular-phonecat/scripts/web-server.js
Http Server running at http://localhost:8000/
Open the bootstrap/less/variables.less file in a text editor and find the @navbar-inverse-color and @navbar-inverse-link-color variables and change their values from @gray-light to @gray-lighter. Also, find @navbar-inverse-bg and change its value to #FF8C00.
Install node modules and compile LESS
The Bootstrap source contains a package.json for node module installation and a fully configured gruntfile.js to run Grunt tasks.
Open another bash window CLI and navigate to the bootstrap directory to install the node modules. After the node modules are installed, run the Grunt dist-css task which compiles the less files to dist/css/ followed by task dist-docs which copies the css files created in the previous task to docs/dist/css/.
# install node modules
$ npm install
# run grunt task to compile less to dist/css/
$ grunt dist-css
# run grunt task to copy to docs/dist/css/
$ grunt dist-docs
Refresh the web browser to see the compiled changes. The navigation bar at the top of the document in the starter template should now be orange instead of black.
Upgrading the source
Since we are only modifying the variables.less file from the source, upgrading is not that difficult. Using Git, merge the newer Bootstrap source master branch into the develop branch we created.
# checkout master branch
$ git checkout master
# get the latest bootstrap source
$ git pull origin master
# checkout develop
$ git checkout develop
# merge master into it
$ git merge master
If you have not done so already, make sure that you have Node.js, Grunt CLI and Git installed. For Windows systems, after installing Git, you may decide to use the Git bash shell for your CLI (command line interface) instead of the Command Prompt.
Install Grunt’s command line interface (CLI) globally.
#install grunt CLI
$ npm install -g grunt-cli
Using Git, clone the GruntTutorial repository. This contains all the source code for the tutorial. As you work through the tutorial, you will be instructed to use git to reset the source code so it matches the step at that point. This will revert the source code to it’s original state for the respective tag and thus overwrite any changes you have made to it.
# git clone creates the GruntTutorial directory in your current directory
$ git clone https://github.com/jimfrenette/GruntTutorial.git
# reset to step 0
$ git checkout -f step-00
Step 1: Node.js Package
# reset to step 1
$ git checkout -f step-01
A npm (nodejs package manager) package.json file is added to the project root for npm to read its structure and know what to do when installing it.
Update: 12-20-2014 — Interactively create a package.json file with the npm init command. More information available at the npm cli commands doc.
# create package.json
$ npm init
Grunt and node modules are installed per the package.json dependencies.
# install the latest Grunt in your project folder
$ npm install grunt --save-dev
# install dependencies per package.json
$ npm install
# reset to step 2
$ git checkout -f step-02
For the Sass compile with the Compass & Watch Grunt plugins, you will need to have the RubyInstaller for Windows. As of this writing, use Ruby 1.9.3 installers. These provide a stable language and a extensive list of packages (gems) that are compatible and updated. During the setup, check the option to Add Ruby executables to your PATH. After installing Ruby, install Sass and Compass using the Start Command Prompt with Ruby.
Install compass and watch Grunt plugins
By running these npm install commands with –save-dev, the package.json file will automatically be updated to include these two new dependencies.
The CLI / Terminal shows the status of the Grunt tasks that are run.
# run the default task(s)
Running "uglify:build" (uglify) task
File "build/js/grunt-tutorial.min.js" created.
Running "watch" task
Edit and save one of the Sass (.scss) files. The watch task waits for changes to files and then fires a task. In our Gruntfile, the watch is configured to run the the compass task whenever a .scss file is updated. The compass task is configured to compile the Sass files specified in the sassDir property (src/sass/) and output to the cssDir specified (build/css/).
CLI / Terminal output from changed Sass file.
>> File "src/sass/reset.scss" changed.
Running "compass:dev" (compass) task
overwrite build/css/reset.css (0.02s)
Compilation took 0.053s
Done, without errors.
Completed in 0.717s at Sat Nov 23 2013 17:14:57 GMT-0500 (EST) - Waiting...