create server
create our first index.js file.
run
For deploy:
Deploy的初始化太痛苦了。。。。Heroku版本更新了好多跟以前好不一樣 需要node 8.3版本以上才能玩。我還不知道怎么upgrade node.
最后發現，要先install n. 然后 sudo n latest.
然后Heroku create后還不能直接push heroku master, 要先add remote...
后來一直Build失敗
1. cannot detect the language 要自己加
2. doesn't detect package.json for some reasons... 所以我重新git init了一下， add 了一下package.json
Express basic:
Express route handler
如果有人訪問localhost:5000/ ?返回
Mongoose vs MongoDB:
下載Passport
Google API 網址：
Enable API
Search for Google+ ?不能在這里search OAuth...
然后使用OAuth client ID
Now, put public, secret keys on a new file called key.js Then import it.
here it's requiring the original passport NPM modules
nodemon的作用：Nodemon?is a utility that will monitor for any changes in your source and automatically restart your server.
npm run dev
設置MongoDB：
https://mlab.com/welcome/?gclid=EAIaIQobChMItYrNtrXA2AIVjrXACh1_fwo5EAAYASAAEgI06vD_BwE
now add database user
now install moogse
這里有一個Bug我查了10分鐘。。。
如果require Module的順序不對會報錯。我們需要先connect to DB. 然后創造User schema. 然后再require passport service. 否則如果先require Passport, schema還沒寫好就會出錯。然后值得注意的是： schema 不是寫了User.js就會執行，而是要require才能執行！
然后如果沒寫app.use(passport.initialize())那個也會報錯。。有待研究。。。
”(node:64987) UnhandledPromiseRejectionWarning: Error: passport.initialize() middleware not in use“
To run front end and backend together
In server directory:
重要概念：Proxy ?用來連通前端和后端API
假設現在在前端HTML里寫這么一個link, 點下去調用后端 localhost:5000/auth/google
但是由于前端在localhost:3000 ?domain 會不一樣。如果強行specify 一個?localhost:5000/auth/google ?這樣在Production的時候也很麻煩。所以我們可以使用Proxy
在client的package.json里：
在react side:
index.js 是for redux
app.js is a single component, it's a react layer.
install一些react的dependency
Convention:
不知道是不是版本問題，如果不使用class based component的話會報錯，并且default keyword is important
Provider tag is a react component. Anytime app gets updated, provider will update all of different componets inside and update states.
聲明一個redux data store
這里有一個坑，<provider> tag之間是不能夠有space的
Now創建一個新的Folder 叫reducers, 里面有reducer 部分的代碼。export function.
react前端的routing部分
Always visible component:
使用Exact keyword, 這樣的話 ?Landing component只有完整match URL的時候才會顯示。
Routing部分
然后最好把各個component 比如header, dashboard 單獨分出成為一個class file。
Routing里 是可以嵌套文字的：
使用CSS: npm install后會把css文件存在你的Node_module dependency里。
webpack with CSS:
webpack is a module loader.?
import css?
http://materializecss.com/
React前后端連接，使用backend的API
currentuser API: 如果是signed in的，服務器會返回who signed in. Whenever server boots up, use this route.
axios ?不是很清楚干嘛的。。。
redux-thunk:
in client side
actionCreator
In front end App.js, change App to class based component by import {componet}
The moment when this component rendered, go fetch!
import these for react-redux:?
connect function to give certain component the ability to call the action
then import all the different action_creators!!!
In header component:
目標：
server side index.js里 調用cookie session這塊卡了一天。。。最后在stackoverflow找到解決辦法。。
original version..根本不會調用deserialize function..
null corresponds to loading時候。
redirect log in:
目前輸入google賬號后悔redirect到這里。
in Backend: pass control to Google.
passport.authentificate is actually a MiddleWare. We have not specified after middleware complete. So right now, it's just report you cannot get this route!
So we need to add another handler. so that the middleware will pass to the next handler.
pass it to the /survey handlers
Log out follows the same idea.
Now 前端：
先下載一下create-react-app
Then
