Better Heroku experience deploying a frontend only React App with a simple Express server

So recently I was working on a portfolio project... you can see so me of my struggles in my previous post talking about my colorblindness and input from friends... Wondering how the rest of the world sees my work. Also this works into my post about google's site optimization. I still have a far way to travel with that but with one change I went from an 11 performance to 40 because I worked under the wrong assumptions for a heroku deploy. I'm going to dive into WebPack in the future for all of this.

However, to get a portfolio up and then creating a backend separately I wanted just to get a standalone React app... so I was just using the same git repository that I have my app in Github and just pushed that to heroku... Then checking out the stats on Web.dev... Javascript wasn't minified?!?! It was running start but not building before then.

With some work in Node/Express and wanting to get something up on a page and not building out a Procfile also, this would give me an easy entry point if I decided to go through Node instead of building a Rails API. Still to be determined with some experimenting with GraphQl integrations... If you're reading this and have thoughts on ORM integrations with GraphQl, I really am leaning into TypeORM over ActiveRecord but let know.

Anyway... Having used Node and Express to host a built site, where I did build since I tried to keep everything on one dyno before, I decided I could do the silly thing, move my heroku git to specific be the build folder that is contructed with the yarn build command and building my Express instance there to serve up the html.
I like separation of concerns so I made a folder with the build as a subdirectory of it, so I can build out my express instance in the base folder.
So in that base folder run npm install express and create a file called app.js.

In only a few short lines in app.js we will be able to serve up our app. Here is the entirety of the code of app.js

const express = require('express')
const path = require('path');

const app = express()
const port = process.env.PORT || 3000
app.use(express.static(path.join(__dirname, "build")));

app.listen(port, () => console.log(`Server is running on port ${port}!`))

So the key here is the express using the static files in the build folder. It will automatically look for index.html and run off of that. All your javascript and css will be minified and mapped so you can still debug if need be. It will make google so much happier to see. And you can also look at our new package.json which heroku will read off of, and in it's simplicity adding a start with a node buildpack it will run that line after deploying and you'll be all set.

{
  "name": "build",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Also by not building it on heroku you save a ton of space and time in deploying. I was being silly before this little experiment but going forward will review previous deploys.