Hi I'm trying to deploy my reactjs app to GitHub pages but I keep getting a blank page
here are the steps I followed
Pushing project to empty repo: https://github.com/DroidBarber/dolla
installing gh-pages: npm install gh-pages --save-dev
modifying package.json :
{
"homepage": "https://DroidBarber.github.io/dolla/",
},
scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
},
deploying npm run deploy
but I'm getting a blank page app runs fine in local host...
Help...
You are deploying your application to an additional path: /dolla/.
So when your deployed react application run on: https://DroidBarber.github.io/dolla/ it tries to get resources from /dolla/ which is not defined in your routing.
It will be similar when you run on your local at http://localhost:3000/dolla
Try to change your homepage in webpack to: "homepage": "https://DroidBarber.github.io/".
GitHub Pages doesn't support the pushState history API (which react-router-dom's BrowserRouter uses under the hood). You'll need to switch to HashRouter instead. You can read more about it here
Related
Why is that the react app I deployed via github pages is showing a blank page. I tried doing this already before (using the default react-homepage only for testing purposes) and it worked just fine.
"homepage": "https://aaroncferrer.github.io/banking-app",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"gh-pages": "^5.0.0"
I was able to add/install the dependencies above as well.
This was my reference for deployment instructions: https://github.com/gitname/react-gh-pages#2-create-a-react-app
Repo link: https://github.com/aaroncferrer/banking-app
Additionally, I tried deploying the react app via vercel but it also gives me an error upon deployment/building phase:
Vercel Depoloyment Error
You should have the index.html file in the main root of your application and not in any other folder like public. Hope this resolves the issue
I have created a react asp.net core app and deployed it to github pages. The app is displaying perfectly on github pages but now when going back into visual studio mac for continuing developing other pages when I run the project locally I get a blank page.
All I have done was add thse lines in package.json:
"homepage": "https://myusername.github.io/Myapp",
and in package.json "scripts":
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
And now after running the project the proxy server redirects me to a blank page where my home page used to load.
This definitely happened after deploying the project to githug pages. Am I missing something here?
The desired goal here is to keep developing the app locally and keep pushing updates to github pages when needed.
I appreciate all of your help. I like how create-react-app allows you to run NPM RUN BUILD and then upload the "Build" folder to your FTP directory.
How is this possible with NextJS? I built my app and ran NPM RUN BUILD, but do not see a Build folder. I am using server-side rendering with getServerSideProps, so is there a web page that explains this? I read the Deployment web page on NextJS.org, but I do not want to use their servers.
Thank you again for your help.
Bruce
You need to setup a custom Node.js server if you don't want to use Vercel. Your package.json should contain these scripts:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
From the docs:
next build builds the production application in the .next folder. After building, next start starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.
As you can see, you get .next instead of a build folder.
I have created a site with react, redux, and firebase as a backend and pushed it to git but when I'm tired to create a GitHub page to the site it builds Succesful and uploaded the files to the gh-pages, but when I'm entring the link it doesn't render the site
my repo : https://github.com/alon4551/Crown-Market
my site : https://alon4551.github.io/Crown-Market/
I've also installed the gh-pages in my project and add this lines in my package json
and runed the command npm run deploy
"homepage": "https://github.io/alon4551/Crown-Market",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"}
can someone help me
The home page should be set up this way:
"homepage": "https://myusername.github.io/my-app"
for a more detailed explanation, Create-React-App Deployment Guide
I've looked at numerous StackOverflow answers, that answer a variety of different scenarios regarding publishing React pages to Github, but none of them clearly explain how to publish a basic user page. I have a very simple, standard React app, that I'd like to publish as a user page on Github.
What are the basic steps for publishing a simple React app as a user page to Github?
The answer, in total, is found in two document sources.
Presuming that you've already created your React app, all is well locally, and your app is ready to deploy, here are the steps to deploy a simple React app as a user page on Github:
Follow the guidance given by Github regarding Github Pages... in particular, note that user pages are served only from the master branch, and thus, the user page will be served at https://{your-github-user-name}.github.io.
User pages must be built from the master branch.
Next, follow the guidance provided in Create React Apps documentation regarding Github Pages deployment, particularly the parts related to user pages.
Open your package.json and add a homepage field that matches where your user page will be served from:
"homepage": "https://myusername.github.io",
Install the gh-pages module:
npm install --save gh-pages ... or ... yarn add gh-pages
Add deploy (and predeploy) to scripts in package.json:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
},
Modify your deploy script to force push the built application to the master branch:
"deploy": "gh-pages -b master -d build",
Deploy your site by running:
npm run deploy
The last obstacle to overcome, is caching at Github. You might need to run npm run deploy more than once, to get around Github's caching of previous deploys.