How to host an express page on github using github-pages? - github

Question

I have been trying to post a simple express based website to Github pages. Previously, I was able to post a react based front-end website, using the "homepage", "predeploy", "deploy" and yarn build command. I understand that the react-scripts build takes care of the "process.env.PORT" and is able to get it, how can I replicate a similar process for an express backend. I have been searching the internet and the web for a while, however, the previous questions, I found them to be outdated. Any help would be greatly appreciated.
The package.json where react works look like this:
{
"name": "test",
"version": "0.1.0",
"private": true,
"homepage": "https://{github_username}.github.io/{github_repo}/",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"gh-pages": "^3.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "yarn build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Answer 1

Github pages doesn't allow you to host dynamic content. gh-pages package creates a new branch and uploads static content, making the illusion that it is hosting a React app dynamically, even though it is running HTML, CSS, and only client JS.