How to setup node.js/express.js, compass, bootstrap project

Category:

Tutorials > Servers > Node.js > Configuration

In this tutorial, I will explain how to initialize and configure a Node.js+Express.js, Compass (CSS framework), and Bootstrap project.

Please note that the tutorial expects all programs already installed and installation instructions will not be provided in this tutorial. However, it should be easy to find out how to install each program.

  • Create an empty directory to host the project.
  • From inside project directory, run command below to initialize your node project. 
    npm init
  • Then, install express as a dependency: 
    npm install express --save

    This should install express in local project.

  • Now, (if not already) install express-generator globally 
    npm install express-generator -g

    Run the following to confirm installation:

    express -h
  • Create a new project with support for Handlebars (template engine) and Compass. 
    express --hbs --css compass --git ./

    In case, you do not wish to use Compass (that is a module for Express.js in command above) and want to install it manually instead, then create project like this:

    express --hbs --git ./

    Express uses https://github.com/nathggns/node-compass for compass support. See documentation for details.

  • Optionally, install compass (if you did not in previous step) using the following command: 
    compass create --bare --sass-dir "sass" --css-dir "public/stylesheets" --javascripts-dir "public/javascripts" --images-dir "public/images"

    Or, create compass project with bootstrap like below (from inside project directory):

    compass create  --sass-dir "sass" --css-dir "public/stylesheets" --javascripts-dir "public/javascripts" --images-dir "public/images" -r bootstrap-sass --using bootstrap
  • You can then use the following command to compile Compass source files(in sass/ directory) into CSS file in public/stylesheets directory. 
    compass compile ./
  • Then, install all project dependencies: 
    npm install
  • Start app with the following: 
    DEBUG=myapp npm start

    And, access the site from http://127.0.0.1:3000 to see if it works or not.

  • Next step is to install Bootstrap (for Sass). 
    gem install bootstrap-sass
  • Then, require bootstrap-sass (already included if you install Bootstrap with Compass) in Compass's configuration to use it in your projects. Also, Compass uses styles.css output file name and Express uses style.css, so you need to modify the code to use styles.css.

    In order to use Bootstrap fonts, glyphicons etc, you need to set the fonts_dir parameter for Compass (in config.rb config file) and copy Bootstrap fonts directory to the correct location. Here is how I did it in config.rb:

    fonts_dir = "public/stylesheets/fonts"

    Then, copy fonts directory to the right location:

    cp -r fonts public/stylesheets/
  • Finally, Bootstrap requires Autoprefixer, so you need to install that with Compass. See https://github.com/postcss/autoprefixer for details on compass.

Did this tutorial help a little? How about buy me a cup of coffee?

Buy me a coffee at ko-fi.com

Please feel free to use the comments form below if you have any questions or need more explanation on anything. I do not guarantee a response.

IMPORTANT: You must thoroughy test any instructions on a production-like test environment first before trying anything on production systems. And, make sure it is tested for security, privacy, and safety. See our terms here.

Comments (write a comment):

0 comments so far. Be the first one to leave a comment on this article.

leave a comment on tutorial leave a comment