How to deploy reactapp with heroku-22?

Question

I received this message when i deploy to heroku:

remote: =====! create-react-app-buildpack has reached end-of-life 🌅
remote:        This build may succeed, but the buildpack is no longer maintained.
remote:        On the Heroku-22 stack and beyond, this may fail to build at all.
remote:
remote:        Please consider migrating to https://nextjs.org or https://remix.run to develop React apps which are deployable using Heroku's Node.js buildpack https://github.com/heroku/heroku-buildpack-nodejs, or you may develop your own create-react-app deployment with Node.js and Nginx buildpacks.  

I'm using this buildpack:

https://github.com/mars/create-react-app-buildpack

But heroku will no longer support it. I don't know how to migrate my reactapp to nextjs or remix, anyone know an alternative buildpack that supports the newer version of heroku?

Answer 1

Old Answer

The buildpack you're using is deprecated and doesn't work on Heroku-22. The simple solution, which is what I've done, is to postpone upgrading the Heroku stack until a new buildpack for Create-React-App is released. Heroku-18 is deprecated though, so you should upgrade to Heroku-20.

heroku stack:set heroku-20

Updated answer (as of 2023-01-05)

If you have a static website without environment variables, you can use an express server to run the static pre-build assets. Instructions based on this Medium article.

1. Remove the current buildpack from Heroku via the settings tab of your app in Heroku.
2. Install express with npm install express (or yarn add express)
3. Create a file scripts/heroku-start.js with the following content:

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json());
// Your static pre-build assets folder
app.use(express.static(path.join(__dirname, '..', 'build')));
// Root Redirects to the pre-build assets
app.get('/', function(req,res){
  res.sendFile(path.join(__dirname, '..', 'build'));
});
// Any Page Redirects to the pre-build assets folder index.html that // will load the react app
app.get('*', function(req,res){
  res.sendFile(path.join(__dirname, '..', 'build/index.html'));
});
app.listen(port, ()=>{
  console.log("Server is running on port: ", port)
})

4. Create a file Procfile with the following content:

web: node scripts/heroku-start.js

5. Set Heroku stack to Heroku-22 and deploy.