soumyajit4419 / Portfolio

My self coded personal website build with React.js

https://soumyajit.vercel.app/

4.56k stars 2.43k forks source link

Code deployed but showing blank page #161

Open Mannxxx opened 10 months ago

Mannxxx commented 10 months ago

My site is properly functional on local server. However, it is showing a blank page after it's deployed on github pages. It's been 12 hours since I deployed it. But still it's blank. What do I do?

I edited the source code and run the following commands in order: yarn add -D gh-pages yarn add --save-dev @babel/plugin-proposal-private-property-in-object yarn run build npm run deploy npm start

It has successfully build and published on github pages. But still it shows blank page.

On local server, it's fully functional:

But after deploying, it shows blank page. I saw online that it takes a bit time to get live properly, but it's been >12 hours.

@ldelavois @soumyajit4419 @mspronesti @shoaibsajid1 @Vac95, if anyone can help me out?

harshprakash01 commented 3 months ago

sudo rm -rf node_modules

then

sudo npm i

Confley commented 1 month ago

It could be an issue with the dependencies. If there are incompatible dependencies, it might does not necessarily affect the development environment (on your local server), but when you deploy the site, that’s when problems occur and nothing renders.

With npm ls (dependency-name) you can view its information and check if it's incompatible with any other dependencies.

saad-bhatti commented 1 month ago

I recently deployed my version to GitHub pages. Here is a small guide consisting of the steps I took:

Steps to Deploy a React App to GitHub Pages

Install gh-pages dependency:
```
npm install gh-pages --save-dev
```

Add homepage to the top of your package.json:

"homepage": "https://<GITHUB-USERNAME>.github.io/<REPO-NAME>"

Update the scripts section in your package.json by adding the following:
```
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
```
Commit and push these changes.
Deploy your app:
```
npm run deploy
```

Your React app should now be visible at the link specified in Step 2.

Handling Routing Issues

Just as a side note, I noticed I had routing issues with the single-page application on GitHub Pages, you can refer to this guide to resolve these issues.