Hi everyone! With me again, to share some experience, though or opinion about technology related with software engineering field. Today, I will share about my experience solving some issues when deploying Frontend application using ReactJS into Heroku.
So, what the issues? First, let’s try to build simple application using ReactJS and try to deploying into Heroku.
1. Setup ReactJS Project
Make sure we already have this installed on our system:
- Node ≥ 8.10
- NPM ≥ 5.6
Visit this page https://reactjs.org/docs/create-a-new-react-app.html for the detail. Then create a project with this command.
npx create-react-app medium-heroku-reactjs-app
If you don’t have npx, try with this command.
npm install -g create-react-app
After starting, our browser should be opened http://localhost:3000/ and show this page.
2. Setup Heroku Project
Next, make sure we already have a valid account on Heroku and open this page https://dashboard.heroku.com/
Create a new app by clicking New button, and choose Create new app.
Setup our app name, in this example we use
medium-heroku-reactjs-app for the app name. Then, click Create app for finish the configuration.
Nice, our Heroku app already created. Try to access the app on this url https://medium-heroku-reactjs-app.herokuapp.com/. We will have response like this.
On the next part we will try to deploy our application on local machine to Heroku.
3. Deploy Project
We will use Heroku CLI for deploying our app. The detail about this CLI can be found in this page https://devcenter.heroku.com/articles/heroku-cli
Back to our app on Heroku page, go to Deploy tab, and we will have guide for deploying into Heroku.
But, before we deploying our app, we should make a small changes into our
What we should do is adding engines information for our app. My engines when writing this story were look like this.
If we haven’t already, log in to our Heroku account and follow the prompts to create a new SSH public key.
Initialize a git repository in a new or existing directory
heroku git:remote -a medium-heroku-reactjs-app
Commit your code to the repository and deploy it to Heroku using Git.
git add .
git commit -m "init project"
git push heroku master
After finishing push and build, re-check the url. We will getting Application error like this.
I’m a little bit confused about this issue, because a lot of articles have no problem with this step. Finally, I found the issue when checking detail by detail.
The issue come from
react-scripts version on
The solution is downgrade both of the version with this version.
Commit the changes and push again into Heroku. If there’s any issue with
yarn.lock file, don’t forget to run
yarn install command.
Refresh our app url, then we should getting response page like this.
4. Modify Project
My next issue is when I created simple application, one of my feature is render pdf file. But my app on Heroku was crash due to memory heap. Let’s try to replicate the issue with this simple pdf page.
Add pdf viewer using yarn command.
yarn add pdf-viewer-reactjs
src directory using this code.
Commit the changes and push again into Heroku. Refresh our app url, then we should getting error response page like this.
Check the error using heroku logs command
We will find error that indicate about memory heap
After looking the solution for the issue, I found we need to adding Config Vars into Heroku. Go to our project app and choose Settings tabs. And we need to adding
NODE_OPTIONS variable with
--max_old_space_size=1024 value. Save and restart the dynos.
After successfully restart the application, try to refresh the browser. We should not getting Application error again.
Yeah, we made it. If you need to change the value depend on your application size, maybe you should change to higher number. In my experience, I need to setup the value until
If you want to see the example project for this story, you can visit this github repository:
This project was bootstrapped with Create React App. In the project directory, you can run: Runs the app in the…
Hope you enjoy it, I’m happy if this article useful for you! Happy Deploying!