Why my deployed react-app is showing a blank page - reactjs

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

Related

Blank localhost page after deploying react asp.net core app to github pages

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.

NextJS, how to upload a server-side rendered application to my FTP account

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.

Getting a blank page after after deploying reactjs app to github pages

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

Why does my React app is not shown in Github host?

"devDependencies": {
"gh-pages": "^3.2.0"
}
used this on package.json
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
this in scripts also in package.json
and also filled up homepage script but it doesn't show anything
this is whats on screen, here is image >>hosting error<<
and have no idea whats going on i went step by step on hosting tutorial, but i already done project and then tried to host and in tutorial they made on creating new project and hosting it maybe i did something wrong because of that?

why github pages not rendering my site, React

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

Resources