How would I deploy a static front end react app on GitHub pages?
reactjs - How can I host my React application using GitHub? - Stack Overflow
Deploying react to github pages
Blank Page after deployment
Videos
It’s not a stack. Just pure react. It pulls from a third party API. I’ve been able to deploy the same way with a generic HTML CSS JS stack that made third party API calls.
You need to install GitHub Pages package as a dev-dependency.
cd ./into/your-app-folder
npm install gh-pages --save-dev
Add properties to package.json file.
The first property you need to add at the top level homepage, second you must define this as a string and the value will be "https://{your-username}.github.io/{repo-name}" , {repo-name} is the name of the GitHub repository you created it will look like this :
"homepage": "http://joedoe.github.io/your-app"
Second in the existing scripts property you need to add predeploy and deploy.
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
If you pushed everything already to Github, the last step is deploying. One liner:
npm run deploy
With this Github will create a new branch called gh-pages, and will be available online. Hope I could help and will work accordingly.
If you stuck, you can look it up on the official docs of React. Deployment Documentation of React
Once on a deployment I had some issues with the official documentation, and I had to delete my username from the "homepage" property in order to make it work. Although I suggest you first do by the docs, and if you encounter problems, you might can give a try.
You have to do the following things:
Push your project to GitHub
git add . git commit -m "Your message" git pushTo create a page on GitHub, you should:
Add this to your package.json:
"homepage": "https://myusername.github.io/my-app",npm install --save gh-pagesAdd the following scripts in your package.json
"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build", }
Run
npm run deploy
Now you'll have a new branch and your page in GitHub will be creating from this new branch.
I have to deploy my React app to github pages. I use React and Coveo Headless library. All my project files are tsx instead of js or jsx. I configured package.json to deploy it on github pages, but it deploys index.html template and loads blank page. Does anyone have idea how to resolve it?
As I am newby for this, I followed this tutorial for deployment, but no success.
https://youtu.be/Q9n2mLqXFpU