Create-react-app react-router and Heroku

Published on April 30, 2017

Tagged: #frontend-development

Follow me on twitter for more posts like this

I’ve been putting together a React app and I needed cheap, fast hosting so I went to put it on Heroku.

Configuring Heroku

The community have put together a build pack for create-react-app. You can basically deploy in 2 minutes.

Assuming you have the heroku command line tool already configured the following gist describes the commands to setup the build pack:

https://gist.github.com/darraghoriordan/c3d355237246df395bd4c5ffedf002d1#file-heroku-sh

Configuring your application

This is magic but there is still some configuration needed on your application for routing. If you use react router you will get a 404 from nginx when you try to directly open a route.

The heroku build pack deploys your site on heroku as a static react application so you have to tell heroku that for ALL routes, it should just go to your root/index document so react-router can handle the application routing. The default root document in create-react-app aps is index.html

So to fix your site on Heroku hosting add a file called “static.json” to your root folder (next to packages.json) with the following configuration.

https://gist.github.com/darraghoriordan/008569feb8cc319e338ad11fb68a4647#file-heroku_config-js

Did this help solve your problem?

If not then feel free to DM me on twitter @darraghor. I love helping coders out! - https://twitter.com/darraghor

Darragh ORiordan

Hi! I'm Darragh ORiordan.

I live and work in Sydney, Australia building supporting happy teams that create high quality software for the web.

I also make tools for busy developers! Do you have a new M1 Mac to setup? Have you ever spent a week getting your dev environment just right?

My DevShell tooling will save you 30+ hours configuring your dev environment with all the best modern tools. Get it here

https://darraghoriordan.gumroad.com/l/devshell


Read more articles like this one...

List of article summaries

#frontend-development

Migrating a Create React App (CRA) application to Vite

I had an existing app that was scaffolded using create react app (CRA) and extended with craco. CRA didn’t support the tooling I needed so I had to look for an alternative. I found Vite.

There are some incredible improvements in Vite over CRA, including PostCSS 8.0 support so I decided to migrate my production application.

I’ll explain some of the benefits of Vite and describe the steps you need to take to upgrade your application.

#frontend-development

Fix React Router navlink-exact when activeClass is not working

If you’re adding navlinks with react router because you want to set the active class you might find that it doesn’t work. These are the steps I had to take to make this work.

#frontend-development

Avoid rebuild of React App in every CI stage

If you have a react app you can use env vars like REACT_APP_MY_ENV_VAR in your application and React will automatically pull them in to your app when you build the production application.

This is very useful but if you have variables that change for each environment and your application build takes a long time, you might want to avoid building unnecessarily in CI. For example you might have a QA environment and a Staging environment that have different configuration.

We type-check our code on each build and that was taking 5 minutes+ to build each environment so we had to make it faster. We changed our app from using REACT_APP env vars to using a configuration file that we could quickly write to using CI.

Our CI system is Azure DevOops so the CI scripts here are specifically for Azure DevOps but they apply to most CI systems with small changes.

The real work happens in a Node.js script that would work anywhere.

#frontend-development

Setting and debugging Azure Devops yaml env vars

I received an interesting question yesterday that highlighted how some parts of environment variables in Azure devops are not clear. Here are some things to check if your environment variables aren’t working in azure pipelines.