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

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

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");

       });

---

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

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

http://docs.aws.amazon.com/zh_cn/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html

一直做到 sudo eb config

這裡要改動　就沒有問題了

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

eb open

終於可以開始寫 parse react

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端了。