Migraine Tracker – Deploy Backend & Frontend

Github – Server: https://github.com/jbhafner/migraine-tracker-server

Github – Client: https://github.com/jbhafner/migraine-tracker-client

Live App: https://migraine-tracker-jbh.netlify.com/

Deploy Backend

First I have to deploy the server to Heroku.

// Create Heroku Project
Darrens-MBP:migraine-tracker-server bhafner$ heroku create migraine-server-jbh
Creating ⬢ migraine-server-jbh... done
https://migraine-server-jbh.herokuapp.com/ | https://git.heroku.com/migraine-server-jbh.git

// Create MongoDB
Darrens-MBP:migraine-tracker-server bhafner$ heroku addons:create mongolab
Creating mongolab on ⬢ migraine-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-pointy-25587 as MONGODB_URI
Use heroku addons:docs mongolab to view documentation
Darrens-MBP:migraine-tracker-server bhafner$

Darrens-MBP:migraine-tracker-server bhafner$ heroku config
=== migraine-server-jbh Config Vars
MONGODB_URI: mongodb://heroku_...
Darrens-MBP:migraine-tracker-server bhafner$

// set enviromental variable
heroku config:set SECRET_KEY=[Add key here]
ex. heroku config:set SECRET_KEY=ABC123secret
Darrens-MBP:migraine-tracker-server bhafner$ git add .
Darrens-MBP:migraine-tracker-server bhafner$ git commit -m "force server to redirect to index.html"
Darrens-MBP:migraine-tracker-server bhafner$ git push heroku master

It wouldn’t deploy at first.  I forgot to create a Procfile.  I also had to add a start script to my package.json.  But then I got a valid reply from the server.  It’s been months since I’ve done this.  Although it’s not that big a deal, I briefly felt like a genius when I got this response back:

// HTTP REQUEST
Darrens-MBP:migraine-tracker-server bhafner$ http POST 
https://migraine-server-jbh.herokuapp.com/api/auth/signup 
username=test password=test [email protected]

// RESPONSE FROM SERVER
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 234
Content-Type: application/json; charset=utf-8
Date: Tue, 20 Aug 2019 22:27:50 GMT
Etag: W/"ea-3Xs3hvqmBbMAqWcrm7fmZ99O1R8"
Server: Cowboy
Via: 1.1 vegur
X-Powered-By: Express

{
    "id": "5d5c73e66...",
    "token": "eyJhbGciO...",
    "username": "test"
}

Deploy Frontend

While I got the app deployed to Heroku and Azure Storage as a static React app, I couldn’t get it to make HTTP requests to the server.  I tried many things but was not successful.  Finally I deployed it to Netlify and got it making requests to the server by modifying the _redirects file.

I included the steps I used for both Heroku and Azure Storage (not Azure App Services, even though that is an option too), although I wasn’t successful at getting the client to talk to the server.  If you use VS Code as your editor, it is EXTREMELY EASY to deploy a static app to Azure Storage — just a couple of clicks.  I’m sure there is a way around the redirect issue with Azure.  I need to do some more research into this.

Deploy App to Heroku

Article from Heroku on React app deployment:

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

Add proxy to package.json

  "proxy": "http://localhost:3026"

Create a .gitignore file to exclude node_modules.

Create a static.json file.

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "proxies": {
    "/api": {
      "origin": "https://migraine-server-jbh.herokuapp.com/api"
    }
  }
}

Create app on Heroku using the create-react-app buildpack.

Darrens-MBP:migraine-tracker-client bhafner$ heroku create migraine-client-jbh -b https://github.com/mars/create-react-app-buildpack.git
Creating ⬢ migraine-client-jbh... done
Setting buildpack to https://github.com/mars/create-react-app-buildpack.git... done
https://migraine-client-jbh.herokuapp.com/ | https://git.heroku.com/migraine-client-jbh.git

Deploy the app.

Darrens-MBP:migraine-tracker-client bhafner$ git add .
Darrens-MBP:migraine-tracker-client bhafner$ git commit -m "react-create-app on Heroku"
On branch master
Your branch is ahead of 'origin/master' by 2 commits.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean
Darrens-MBP:migraine-tracker-client bhafner$ git push heroku master

The app failed to deploy because I had both a package-lock.json and a yarn.lock.  I deleted yarn.lock and updated the package-lock.json file.

The Heroku CLI build function told me to “git rm yarn.lock”.  But I also had to do the standard add / commit / push procedure to get it to finally build successfully.

The app deployed successfully, but I got a runtime error.

2019-08-21T21:10:05.708035+00:00 app[web.1]: Error: Cannot find module '/app/index.js'

My index.js file is in the src folder, so I had to modify my Procfile.

web: node ./src/index.js

I haven’t had luck deploying to Heroku, Azure or GoDaddy as a static file.  It works on GoDaddy as a static file, but I’m getting a 404 error because I’m using ReactRouter for Client-side routing in the app.

Deply React App Documentation – talks about the problem of using ReactRouter on a static page.

Deploy Static site to Azure – explains how to add web.config file to /site/wwwroot folder.

Connect Filezilla FTP Client to Azure App Service

Deploy App to Azure Storage

As it turns out, I deployed it to Azure Storage, which is really easy to do from right within VS Code.

Deploy Static Site to Azure Storage

I had problems getting the client to access the server.

Deploy App to Netlify – SUCCESS!

I had to sign up for a Netlify account, which was easy.  Then run the “netlify deploy” command.

Darrens-MBP:migraine-tracker-client bhafner$ netlify deploy
Please provide a deploy path relative to:
/Users/bhafner/Documents/Development/MigraineTracker/migraine-tracker-client
? deploy path /Users/bhafner/Documents/Development/MigraineTracker/migraine-tracker-client/build
Deploy path: /Users/bhafner/Documents/Development/MigraineTracker/migraine-tracker-client/build
Deploying to draft URL...
✔ Finished hashing 10 files
✔ CDN requesting 1 files
✔ Finished uploading 1 assets
✔ Draft deploy is live!

Logs:           https://app.netlify.com/sites/migraine-tracker-jbh/deploys/5d65ae0835b52da9117bfb4e
Live Draft URL: https://5d65ae0835b52da9117bfb4e--migraine-tracker-jbh.netlify.com

If everything looks good on your draft URL, take it live with the --prod flag.
netlify deploy --prod

Next I have to deploy to production – “netlify deploy –prod”

Darrens-MBP:migraine-tracker-client bhafner$ netlify deploy --prod
Please provide a deploy path relative to:
/Users/bhafner/Documents/Development/MigraineTracker/migraine-tracker-client
? deploy path /Users/bhafner/Documents/Development/MigraineTracker/migraine-tracker-client/build
Deploy path: /Users/bhafner/Documents/Development/MigraineTracker/migraine-tracker-client/build
Deploying to live site URL...
✔ Finished hashing 10 files
✔ CDN requesting 0 files
✔ Finished uploading 0 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/migraine-tracker-jbh/deploys/5d65ae15b404e8bcfaa278ae
Unique Deploy URL: https://5d65ae15b404e8bcfaa278ae--migraine-tracker-jbh.netlify.com
Live URL:          https://migraine-tracker-jbh.netlify.com
Darrens-MBP:migraine-tracker-client bhafner$ netlify open --site

I had to add this to the _redirects file to get the client to connect to the backend.

/*    https://migraine-server-jbh.herokuapp.com/:splat  200

Live URL: https://migraine-tracker-jbh.netlify.com/

Notes on Netlify Redirects

Comments Are Closed