This is todo-list front-end app.
This app call an RESTful API.
Current can GET- ADD- DELETE todotask
- Tech:
- ReactJs:
- Class Component programming
- Class Component programming
- Redux :
- component -> actions -> reducer -> store
- UI component: material-ui
- build packet: npm
- follow MERN stack programing
- ReactJs:
-
Set proxy, must to be a string in package.json file
-
For example
{
"proxy": "https://backend.example.com"
}
- Run project npm install && npm start || yarn install && yarn start
Set Proxy to deloy Heroku:
-
When deploy on heroku, just push only package-lock.json or yarn.lock. Dont push both those files! npm install || yarn install
-
Create static.json file
{
"root": "build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
},
"https_only": true,
"headers": {
"/**": {
"Strict-Transport-Security": "max-age=7776000"
}
},
"proxies": {
"/api/": {
"origin": "${API_URL}"
}
}
}
-
Push file to heroku git push heroku master
-
Config proxy heroku All request from react contain "/api/abc" -> "/abc"
For example:
From react: axios.get("/api/search-items") → ${API_URL}/search-items
From react: axios.get("/api/users/me") → ${API_URL}/users/me
(!)Therefore, run this cmd to set proxy var in heroku:
heroku config:set API_URL="https://backend.example.com/api"