Warbler Project

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.


Deploy backend on Heroku

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

// confirm remote
git remote

// 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:


git init
echo node_modules > .gitignore

heroku create warbler-client-jbh --buildpack 

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

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 POST localhost:8081/api/users/5b3c0ca27633ce409c318ebe/messages "Authorization:Bearer eyJhbGciOiJIU
VJbWFnZVVybCI6IiIsImlhdCI6MTUzMTAwNzExNH0.rzbQV9O3-tuYBhxSt6jrWFj8Ag-THn0XTfc1bHpPYDs" text="Test Sat July

$ http POST localhost:3025/api/users/5b3e6ded5e80a62be8beaa5b/myCoins "Authorization:Bearer eyJhbGciOiJIUz
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",


Leave a Reply

Your email address will not be published. Required fields are marked *