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.

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:

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

Create a .gitignore file to exclude node_modules.

Create a static.json file.

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

Deploy the app.

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.

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

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.

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

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

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

Notes on Netlify Redirects

Migraine Tracker – Create Frontend

Firstly, I use create-react-app to create my project files.  But then I’ll delete everything in src folder and start from scratch to get the things I want to have in it. In preparation for some packages I’ll need later on, I “yarn add” (same as “npm install”, using yarn the following packages: redux, redux-promise, react-redux, and […]

Javascript – Synchronous vs. Asyncronous

I’ve always been confused by the terms synchronous version asynchrous in Javascript, as they seem to mean just the opposite of what they would mean in the real world.  I always thought that synchronous meant multiple things could happen at once, and asynchrous means only one thing can happen at a time. According to dictionary.com, […]

WordCamp LAX 2018

The Dating Game: Understanding Price Anchoring by Nathan Allotey nathanallotey.com/wclax || freelance jumpstart podcast Nathan talked about spending too much time with the client but not closing.  He came to realize that, rather than giving people a yes/no option of using his services, he would use Price Anchoring to give them a few options to choose […]

Migraine Tracker – Create Backend

I have long suffered with migraines.  Currently I track my daily migraines on an Excel spreadsheet, but I am going to create my own app to track them using the MERN stack Node, Express, MongoDB and Mongoose on the server.  I will develop the client in React. npm init -y to create my package.json file […]

_.map – Javascript Problem

This is an exercise taken from the Javascript: From Fundamentals to Functional course by Bianca Gandolfo on FrontEnd Masters.  The characters are taken from a game of Clue – a murder whodunit… Here I have recreated a map() method in a slightly different way.  Instead of attaching it to the array prototype, I created it […]

_.forEach – Javascript Problem

This is an exercise taken from the Javascript: From Fundamentals to Functional course by Bianca Gandolfo on FrontEnd Masters.  The characters are taken from a game of Clue – a murder whodunit… Here I have recreated a forEach() method in a slightly different way.  Instead of attaching it to the array prototype, I created it […]

Crypto-Tracker Project v. 2.0

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 […]