[NodeJS] Webserver 셋팅

http://expressjs.com/guide.html

 

 

겁먹지 말길! 그냥 영어 못해도.. 명령어만 그대로 따라 치면됨~ ㅋㅋ

음... '$' 다음이 명령어임;;

 

How to install Bootstrap (v2.0.2) in ExpressJS (v3.0.0)

http://www.rs.au.com/31/how-to-install-bootstrap-v2-0-2-in-expressjs-v3-0-0

 

 

I’m certainly no expert when it comes with using ExpressJS orBootstrap so there may be far better ways of doing this than what I detail below, however, if you do know of better ways please let me know as I bumbled my way through!

Here goes.

Prerequisites:

I’m installing this on an Ubuntu 11.10 EC2 micro instance and assuming that you have the following installed: node npm make zip unzip git

Process:

1. Install via NPM the following: ExpressJS, Less & UglifyJS: ~$ npm install -g express less uglify-js (you may need to sudo npm install -g express less uglify-js
2. Create an ExpressJS working directory, we’ll call it testme, with Less: ~$ express --css less testme
3. Move inside your new directory: ~$ cd testme
4. Create a new directory called vendors: ~/testme$ mkdir vendors
5. Move inside the vendors directory: ~/testme$ cd vendors
6. Download from github Bootstrap: ~/testme/vendors$ git clone https://github.com/twitter/bootstrap.git bootstrap
7. Move into the newly created Bootstrap directory:~/testme/vendors$ cd bootstrap
8. Build Bootstrap: ~/testme/vendors/bootstrap$ make -i (you may see a cannot remove `docs/assets/bootstrap.zip` file –just ignore) – it would also be great if you could make to a target directory, but I couldn’t find how this could be done.
9. Once the build has been completed move to the docs/assets directory: ~/testme/vendors$ cd bootstrap/docs/assets
10. You should see a css, img, js folders and a bootstrap.zipfile: ~/testme/vendors/bootstrap/docs/assets$ ls
11. Go back to the testme folder:~/testme/vendors/bootstrap/docs/assets$ cd ~/testme
12. Move the bootstrap zip file you just created into your public folder: ~/testme$ mv vendors/bootstrap/docs/assets/bootstrap.zip public
13. Move to the public folder: ~/testme$ cd public
14. Unzip the bootstrap.zip file: ~/testme/public$ unzip bootstrap.zip
15. You should see a bootstrap folder in the public folder~/testme/public$ ls
16. Remove the bootstrap.zip file: rm bootstrap.zip
17. Now it’s a matter of linking to the bootstrap stylesheets in your jade layout template files. Edit the views/layout.jade file to include references to the bootstrap files, remember Bootstrap needs the latest jQuery, so you may want to include reference to this too, here’s what my layout.jade looks like:
    

    1234567891011

    !!! html head title= title link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css') link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css') link(rel='stylesheet', href='/stylesheets/style.css') script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js') script(src='/bootstrap/js/bootstrap.min.js') body block content

    view rawlayout.jade hosted with ❤ by GitHub
18. To test that it works, edit the views/index.jade file to include a reference that Bootstrap will be able to use, something like:
    

    123456789101112131415161718192021222324252627

    extends layout   block content div.top form.form-horizontal(method="post", id="loginForm") label Username input.span3(id="username", type="text", name="User", placeholder="Enter your username") label Password input.span3(id="password", type="password", name="Password") input.btn(type="submit", value="Log In") div.container div.content table.table.table-striped thead tr th Table th Heading tbody tr td Blah td Test tr td Hello td World   div.footer p © 2012 All rights reserved.

    view rawindex.jade hosted with ❤ by GitHub

And there you have it! Being able to use a compiled Bootstrap file with your ExpressJS install.