2015年10月24日 星期六

Step by Step develop Parse React Mobile Web 5 react server side

https://github.com/mhart/react-server-example
需要從 server side 倒值的處理方式。

2015年10月17日 星期六

aws nodejs S3 begin

照這個範例


https://aws.amazon.com/tw/sdk-for-node-js/
var AWS = require('aws-sdk'); AWS.config.update({ accessKeyId: "xxx secretAccessKey: "xxx" }); //要先設定key pair var s3 = new AWS.S3();
s3.createBucket({Bucket: 'myBucket'}, function() {//這個bucket要在後台先開好,不能用create的   var params = {Bucket: 'myBucket', Key: 'myKey', Body: 'Hello!'};   s3.putObject(params, function(err, data) {       if (err)           console.log(err)       else console.log("Successfully uploaded data to myBucket/myKey");    }); }); //因為無法createBucket跟本不能用

這設定這邊
https://console.aws.amazon.com/s3/home?region=us-west-2&bucket=demodemodemowolke&prefix=
1.開bucket
2. Add more permissions
 Add bucket policy
 Edit CORS Configuration


選edit CORS..
3.設下面這個,就可以在Local端玩S3了


   
        http://localhost
        PUT
        POST
        DELETE
        POST
        3000
        *
   



//code改這樣
var s3 = new AWS.S3();
    var params = {
      Bucket: 'demodemodemowolke' /* required */
      , Key: 'key.TTF', Body: file
    };

      s3.putObject(params, function(err, data) {

          if (err)    

              console.log(err)  

          else console.log("Successfully uploaded data to myBucket/myKey");

       });


2015年10月11日 星期日

Step by Step develop Parse React Mobile Web 4 一個很簡單可以開始寫react的框架

server.js:
var http = require('http');
var fs = require('fs');

var html = fs.readFileSync(__dirname + '/index.html', 'utf8');
var css = fs.readFileSync(__dirname + '/css/style.css', 'utf8');
var js = fs.readFileSync(__dirname + '/js/bundle.js', 'utf8');

var server = http.createServer(function (req, res) {
  if (req.url === '/') {
    res.writeHead(200, { 'content-type': 'text/html' });
    res.end(html);
  } else if (req.url === '/css/style.css') {
    res.writeHead(200, { 'content-type': 'text/css' });
    res.end(css);
  } else if (req.url === '/js/bundle.js') {
    res.writeHead(200, { 'content-type': 'application/javascript' });
    res.end(js);
  }
});

server.listen(80, function () {
  console.log('Listening on http://localhost:' + server.address().port);
});


這樣就可以開始寫 REACT了。
後記:本來想要兩天搞定這個開發框(node server on AWS),不過卡了四天,主要原因是我跑去看絕地救援誤,node 的觀念,和以前LAMP差太多,如果有先入為主的觀念,一直想說Web Server不給個資料夾就好,不然要幹嘛,就大錯特錯不要來了。
node 是個開發什台,不只是可以用來架web server用。
因為我一開始的需求是寫parsereact,然後parse react都用node,所以就誤以為node是web server,因為一開始邏緝搞錯了,所以就陷入迷團之中。
總結:
node 有一個 npm,上
beginner guide
http://blog.reskill.me/node-js-tutorial/?utm_source=soical&utm_medium=gp&utm_campaign=udemy_node

2015年10月9日 星期五

Step by Step develop Parse React Mobile Web 3 node express 發佈到aws


一直做到 sudo eb config
這裡要改動 就沒有問題了

 aws:elasticbeanstalk:container:nodejs:
    GzipCompression: 'false'
    NodeCommand: 'npm start'

eb open

終於可以開始寫 parse react

2015年10月6日 星期二

Step by Step develop Parse React Mobile Web 2 棄apache開始用 express jade 快速上手

前篇

Step by Step develop Parse React Mobile Web 1

用 apache 來run web server,
因為小弟停留在LAMP的時代,
所以...Web 就是用Apache啊!
不然要用什麼?

不用現在已經是node.js + express 的時代了。
從此篇開始導入node.js

懶人做法
======
到工作目錄
$ express myapp
$ cd myapp 
$ npm install
copy ParseReact demo/todo的內容 到 public目錄下
package.json
{
    "name": "foo",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "start": "node ./bin/www watchify -o js/bundle.js -v -d js/app.js"
    },
    "dependencies": {
      "body-parser": "~1.13.2",
      "cookie-parser": "~1.3.5",
      "debug": "~2.2.0",
      "express": "~4.13.1",
      "jade": "~1.11.0",
      "morgan": "~1.6.1",
      "serve-favicon": "~2.3.0"
    }
  }

/app.js

// app.use('/', routes);
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/public/index.html');
});
這樣就可以run parsereact的範例在local端了。