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

Leave a Reply

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