create server
create our first index.js file.
run
For deploy:
Deploy的初始化太痛苦了。。细卧。。Heroku版本更新了好多跟以前好不一樣 需要node 8.3版本以上才能玩筒占。我還不知道怎么upgrade node.
最后發(fā)現(xiàn)，要先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 網(wǎng)址：
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
設(shè)置MongoDB：
https://mlab.com/welcome/?gclid=EAIaIQobChMItYrNtrXA2AIVjrXACh1_fwo5EAAYASAAEgI06vD_BwE
now add database user
now install moogse
這里有一個Bug我查了10分鐘。奏窑。导披。
如果require Module的順序不對會報(bào)錯。我們需要先connect to DB. 然后創(chuàng)造User schema. 然后再require passport service. 否則如果先require Passport, schema還沒寫好就會出錯埃唯。然后值得注意的是： schema 不是寫了User.js就會執(zhí)行撩匕，而是要require才能執(zhí)行！
然后如果沒寫app.use(passport.initialize())那個也會報(bào)錯墨叛。滑沧。有待研究。巍实。。
”(node:64987) UnhandledPromiseRejectionWarning: Error: passport.initialize() middleware not in use“
To run front end and backend together
In server directory:
重要概念：Proxy ?用來連通前端和后端API
假設(shè)現(xiàn)在在前端HTML里寫這么一個link, 點(diǎn)下去調(diào)用后端 localhost:5000/auth/google
但是由于前端在localhost:3000 ?domain 會不一樣哩牍。如果強(qiáng)行specify 一個?localhost:5000/auth/google ?這樣在Production的時(shí)候也很麻煩棚潦。所以我們可以使用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的話會報(bào)錯膝昆，并且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創(chuàng)建一個新的Folder 叫reducers, 里面有reducer 部分的代碼纬朝。export function.
react前端的routing部分
Always visible component:
使用Exact keyword, 這樣的話 ?Landing component只有完整match URL的時(shí)候才會顯示。
Routing部分
然后最好把各個component 比如header, dashboard 單獨(dú)分出成為一個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的疚漆，服務(wù)器會返回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:
目標(biāo)：
server side index.js里 調(diào)用cookie session這塊卡了一天。陶因。楷扬。最后在stackoverflow找到解決辦法。螟加。
original version..根本不會調(diào)用deserialize function..
null corresponds to loading時(shí)候。
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
