Deploy your React app on heroku and go severless

The word serverless feels like there is no server but actually Serverless is nothing but someone else's server. So don't be confused.

Herokuapp is great for deploying your projects without worrying about setting up a server. Heroku does that for you.

So let's start with a react app and deploy it on heroku.

🛠️ Tools we need:

• A react app running on your local server.
• Heroku Cli
• Obviously a heroku account.

Step 1:

Let's create an app.js file on the root of you project for heroku configs so heroku will run a node server and that node server will serve the content from our react build. We will use express to create a server. Run this command in terminal inside the app root directory.

npm i express

Your app.js file should look like this.

app.js:

const path = require("path");
const express = require("express");
const app = express();
const publicPath = path.join(__dirname, "build");
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get("*", (req, res) => {
  res.sendFile(path.join(publicPath, "index.html"));
});
app.listen(port, () => {
  console.log("Something cool is up and running 🚀🚀🚀!");
});

Step 2:

Make changes in your package.json file.

 "scripts": {
    "start": "node app.js",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

I have replaced the start command with dev and start has new content which actually runs a production build of your app. The reason to do this because heroku will always look for start command and run it. We can not run dev server on heroku because of slow performance. You can do it if you want. But its not recommended.

Step 3:

Just run these commands in your terminal and there you go your app is deployed on heroku.

heroku create, This creates a new project and a git repo in your heroku account.

git add .
git commit -m "Initial Commit"
git push heroku master

Now if you want to continue your local development. You will not use npm start because npm start will run the local build if you have one, instead you will use npm run dev to continue development on local environment.

Image Credits: Dave Ceddia