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