授權方式(Auhorization): CC-BY 4.0

Intro

利用meteor.js找回以前的手感,接下來要找個可以做成專案的東西。

架構

  • Backend: Express based on node.js
  • Frontend: Angular.js
  • wireframe: moqups
  • Layout: Bootstrap
  • DB: MongoDB
  • VC: bitbucket
  • 其他: Grunt, Berkshelf, Vagrant, travisCI, jade, ..blah

Express

首先參照這篇express tutorial Setup環境,

安裝Express

$ sudo npm install express -g
express@3.3.1 /usr/local/lib/node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── commander@0.6.1
├── mkdirp@0.3.4
├── send@0.1.1 (mime@1.2.9)
└── connect@2.8.1 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, cookie@0.0.5, formidable@1.0.14)

安裝好了 express後

建立專案

$ express order-plant --sessions --css less
   create : order-plant
   create : order-plant/package.json
   create : order-plant/app.js
   create : order-plant/public
   create : order-plant/public/images
   create : order-plant/public/javascripts
   create : order-plant/public/stylesheets
   create : order-plant/public/stylesheets/style.less
   create : order-plant/routes
   create : order-plant/routes/index.js
   create : order-plant/routes/user.js
   create : order-plant/views
   create : order-plant/views/layout.jade
   create : order-plant/views/index.jade

   install dependencies:
     $ cd order-plant && npm install

   run the app:
     $ node app

因為打算用Bootsrap, 所以這邊css engine我選擇less

Post Install

$ cd order-plant && npm install
express@3.3.1 node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── commander@0.6.1
├── mkdirp@0.3.4
├── send@0.1.1 (mime@1.2.9)
└── connect@2.8.1 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, cookie@0.0.5, formidable@1.0.14)

jade@0.32.0 node_modules/jade
├── character-parser@1.0.2
├── mkdirp@0.3.5
├── commander@1.2.0 (keypress@0.1.0)
├── monocle@0.1.48 (readdirp@0.2.5)
├── with@1.1.0 (uglify-js@2.3.6)
├── constantinople@1.0.1 (uglify-js@2.3.6)
└── transformers@2.0.1 (css@1.0.8, promise@2.0.0, uglify-js@2.2.5)

less-middleware@0.1.12 node_modules/less-middleware
├── mkdirp@0.3.5
└── less@1.4.0 (mime@1.2.9, ycssmin@1.0.1, request@2.21.0)

Run App

$ node app.js

此時就可以看到Express的歡迎畫面

修改package.json

  1 {
  2   "name": "order-plant",
  3   "version": "0.0.1",
  4   "private": true,
  5   "scripts": {
  6     "start": "node app.js"
  7   },
  8   "dependencies": {
  9     "express": "3.3.1",
 10     "jade": "*",
 11     "less-middleware": "*"
 12   }
 13 }
 ```
 
 ## Commit to Bitbucket
1. 在bitbucket建立好帳號
2. create private repo
3. 產生ssh key
4. 需要ssh-agent
5. ssh-add
6. ssh-add -l && ssh -T git@bitbucket.org  確認

 ```
 $ git init
 $ git remote add origin git://repo
 $ git add *
 $ git push origin --all

Comments

comments powered by Disqus