Today I worked on deploying our Chingu project to Heroku.
The first attempt to just deploy our master branch didn’t work. So I broke it down and went step-by-step. The project structure is a bit different to previous apps I’ve deployed—in addition to the main
package.json in the root folder, we also have our backend and frontend servers each running their own scripts and dependencies in
Client/package.json. Heroku runs apps with an
npm start script, so I needed to make this script run both servers.
First I removed the
Client server from the run script just to try and get our Node server running. I was able to do this by making the
start script change into the Server directory, install all of the dependencies, and then run start:
"start": "cd Server && npm install && node app.js"
In the dev environment we use a package called
concurrently to run the backend and front end servers with one script
yarn dev. But on Heroku it’s a production environment and we don’t use concurrently, so need to break this up. I found two articles that mention how to add a second script to run after the initial
The solution is to add a
"heroku-postbuild": "cd Client && npm install --production=false && npm start"
This successfully moved to the
Client directory, installed all of the dependencies, and ran the app. I could see from the server logs that it ran the app in the exact same way it did on my local machine: it creates a development server with
webpack-dev-server and makes the app run on
localhost:3010. But this is not what we want! We want the app to build and use the already-running Node server to run the app on Heroku instead of this newly-created dev server.
This is where my knowledge came to a startling stop: we used
create-react-app to build the application, and it has many many dependencies to get it to run, including
webpack-dev-server. I needed to figure out how to get it off of the default dev server and
run build instead. This is normal for React apps apparently. But I don’t know React!
In the blog posts mentioned above, one of the essentially just created a dev environment for the production server. I don’t really think this is ideal. The other blog post had a different file structure, with the Express and React servers in one root directory. Our setup is different, so this didn’t work exactly. A third example also had the two servers together.
I worked on this for a few hours but didn’t come to a solution yet, so will have to post more on that next time!
Today’s coding session was with a Meetup group I used to join before I moved away…nice to be back again! I also got to work with one of my Chingu teammates in person which was really cool.
Goal is to get the app successfully deployed tomorrow latest!