Brian Hafner Tech Blog

I just finished the Warbler (Twitter-like app) project from the Colt Steele/Udemy Advanced Javascript Bootcamp.  I did it so that I could learn enough about authentication and authorization to finish off my cryptotracker.pro site.  I learned a lot, now it is just a matter of getting the crypto site running.  I think it there is definitely something to Paretto’s law.  It feels like finishing the last 20% of the project takes 80% of the time.

https://warbler-client-jbh.herokuapp.com/

Deploy backend on Heroku

git init
echo node_modules > .gitignore
heroku create warbler-server-jbh

// confirm remote
git remote
heroku

// create MongoDB
heroku addons:create mongolab
Creating mongolab on warbler-server-jbh... free
Welcome to mLab.  Your new subscription is being created and will be 
available shortly.  Please consult the mLab Add-on Admin UI to check 
on its progress.
Created mongolab-... as MONGODB_URI
Use heroku addons:docs mongolab to view documentation

heroku config
=== warbler-server-jbh Config Vars
MONGODB_URI: mongodb://heroku_....
// set enviromental variable
heroku config:set SECRET_KEY=[Add key here]
ex. heroku config:set SECRET_KEY=ABC123secret

// open project
heroku open

Deploy front-end on Heroku

Article from Heroku on React app deployment:

https://blog.heroku.com/deploying-react-with-zero-configuration

git init
echo node_modules > .gitignore

heroku create warbler-client-jbh --buildpack 
https://github.com/mars/create-react-app-buildpack.git

Creating ⬢ warbler-client-jbh... done
Setting buildpack to https://github.com/mars/
create-react-app-buildpack.git... done
https://warbler-client-jbh.herokuapp.com/ | 
https://git.heroku.com/warbler-client-jbh.git

touch static.json
* Add the following inside static.json
{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "proxies": {
    "/api": {
      "origin": "https://warbler-server-jbh.herokuapp.com/api"
    }
  }
}

git add .
git commit -m "message here"
git push heroku master

*Note: initially it failed to deploy because I had both a yarn.lock 
and package-lock.json.  I deleted the yarn.lock, and the deploy worked.

*I then had an error in my index.css file that was preventing a deploy.  
After I cleaned it up, it finally deployed properly.

// launch app
heroku open

I used Httpie.org for command line HTTP requests.

http POST https://app.com/api/auth/signup username=test password=test [email protected]
http POST localhost:8081/api/auth/signup username=test password=test [email protected]

 

http://www.cryptotracker.pro/

// WARBLER MESSAGE LOAD TEST
$ http POST localhost:8081/api/users/5b3c0ca27633ce409c318ebe/messages "Authorization:Bearer eyJhbGciOiJIU
zI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjViM2MwY2EyNzYzM2NlNDA5YzMxOGViZSIsInVzZXJuYW1lIjoiQmhhZm5lciIsInByb2ZpbG
VJbWFnZVVybCI6IiIsImlhdCI6MTUzMTAwNzExNH0.rzbQV9O3-tuYBhxSt6jrWFj8Ag-THn0XTfc1bHpPYDs" text="Test Sat July
 7th-2"

// CRYPTOTRACKER PRO COIN LOAD TEST
$ http POST localhost:3025/api/users/5b3e6ded5e80a62be8beaa5b/myCoins "Authorization:Bearer eyJhbGciOiJIUz
I1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjViM2U2ZGVkNWU4MGE2MmJlOGJlYWE1YiIsInVzZXJuYW1lIjoidGVzdCIsImlhdCI6MTUzMTA
wNzM5NH0.TkyYSLLcrdv6ueDSJlGn0pZdxQOEsnpAK6QG2AiP4ao" symbol="BTC" name="Bitcoin"

Client-side Proxy for Package.json

I spent a whole day wondering why my  front-end client kept getting a 404 error when trying to call an api on the backend server.  When working with a developement server (localhost backend) and a front-end client, I need to add a “proxy” entry to my package.json for the client side.

  "proxy": "http://localhost:8081",