There’s no doubt is popular infrastructure platform. Times of running your own dedicated server are not gone but for development and low volume purposes using services like Heroku does make a lot of sense. Heroku Recently I worked on React frontend for cool gaming , and yes, they used Heroku for servers. It was interesting to explore Heroku since my experience is mostly with Amazon AWS and dedicated servers. startup Deploying static app should be easy there right? At least they make it sound like that. Here is the article I did not use create-react-app so it looked like I cannot use ZERO CONFIGURATION deployment option :) https://blog.heroku.com/deploying-react-with-zero-configuration But yea, being a dev, I dug under the hood and here’s what I’ve found. There’s JSON for everything First of all, Heroku uses something called to build your app on the server. Buildpacks Create react app buildpack is configured to build static node server that serves React app. It is based on which gave me a hint how we can configure our own repository to support Create React App buildpack. Static Buildpack Static buildpack uses static.json JSON config file to instruct server how to serve your application. So basically, all you have to do to run your React app on Heroku server is… 1. Configure Heroku to use Create React App buildpack 2. Add static.json file to the root of my project repository That’s it. Next time you push your repo that is connected to Heroku, app will build using Create React App buildpack, and it will start based on static.json file. In this basic example we set a root of our server, dist/ in my case, and configure all routes to point to index.html. For more configuration options please refer to Static buildpack docs on configuration. If it’s broken on build… On your Activity window you can track progress of builds. Builds can break… like this :( You can view build log and see what is it. I only had issues after installing some new dependencies, possibly if you use Yarn, which I do. To remedy this issue delete yarn.lock from your repo and push again. Heroku will then proceed to build a project from scratch and it will succeed. Hope it helps and follow me for more React and webdev stuff. Alex Gvozden I am also available for React and ReactNative work on hourly or full time. Feel free to contact me at if you want to discuss. alex.gvozden@gmail.com

Amazon

Heroku

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Deploying any React app on Heroku

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Alex Gvozden

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Deploying any React app on Heroku

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Alex Gvozden

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES