Brian Hafner Tech Blog

I have just finished v. 2.0 of CryptoTracker.  I have the backend server done, and putting the finishing touches on the front-end.  Most of the functionality is there, but I’m still working on formatting.

On the home page, I have a chart and graphs that rely on an api call to cryptocompare.com.  Crypto price charting is done using the react-chartjs-2 library. When I’m logged out, the chart and graph load fine, but when I logged in, I was getting an error: “Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.”  I was using Axios and tried lots of things to fix it.  Ultimately, I just switched to Fetch and it now works fine, whether I’m logged in or out.

Handy Reference:

Axios Cheat Sheet

Using Axios with React

How to Fetch data in React

Deploy react-crypto-backend on Heroku

git init
echo node_modules > .gitignore
heroku create react-crypto-backend-jbh
 
// confirm remote
git remote
heroku
origin
 
// create MongoDB
heroku addons:create mongolab
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-spherical-28250 as MONGODB_URI
Use heroku addons:docs mongolab to view documentation
 
heroku config
=== warbler-server-jbh Config Vars
MONGODB_URI: mongodb://heroku_....

// Create Procfile
touch Procfile
  // Inside add the following text
  web: node index.js

// set enviromental variable
heroku config:set SECRET_KEY=[Add key here]
ex. heroku config:set SECRET_KEY=ABC123secret
 
// open project
heroku open

I used Httpie.org for command line HTTP requests to test the backend.

http POST https://react-crypto-backend-jbh.herokuapp.com/api/auth/signup username=test password=test
rd [email protected]

Deploy CryptoTracker (react-crypto) – Front End

git init
echo node_modules > .gitignore

// Use create-react-app-buildpack to create app on Heroku
// https://github.com/mars/create-react-app-buildpack 
heroku create react-crypto-client-jbh --buildpack 
https://github.com/mars/create-react-app-buildpack.git
 
Creating ⬢ react-crypto-client-jbh... done
Setting buildpack to https://github.com/mars/create-react-app-buildpack.git... done
https://react-crypto-client-jbh.herokuapp.com/ | 
https://git.heroku.com/react-crypto-client-jbh.git
 
touch static.json
* Add the following inside static.json
{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "proxies": {
    "/api": {
      "origin": "https://react-crypto-backend-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 did the following:
git rm yarn.lock
rm -rf yarn.lock

*Note - I kept getting a Heroku build error due to the npm acorn dependency.  
Finally, I deleted package-lock.json, and create a yarn.lock by doing 
"yarn install", and it deployed fine after that.
 
*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