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
