Problem with deploying react app through Github page - reactjs

I have created a portfolio using react. I now want to deploy it through Github pages. I followed all the instructions from the documentation but it is not working.
I followed the following steps:
npm install --save gh-pages
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
npm run deploy
My deployed portfolio now looks like this: https://nahidaislam.github.io/portfolio/
Can anyone say what the problem is? Here is my GitHub repo: https://github.com/nahidaislam/portfolio

Related

GitHub pages React app deployment not working

For some reason I can't get my React app to consistently deploy to GitHub. Occasionally my custom domain will be removed from the repository's page settings and I'll have to add it again. Other times my readme page will be deployed instead of the React app. Other times nothing happens at all.
When I try and deploy, the settings in my GitHub dashboard are set to use the gh-pages branch, and I try and deploy the changes with npm run deploy. These are my scripts, could someone tell me if I'm doing something wrong? I feel like it should be quite simple.
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

serve package from npm didn't work with React

I want to try the serve package with a React App by doing the following step:
npm install serve --s
then replace the npm start command in package.json like this:
scripts": {
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then I run npm start i got the error in the console "Uncaught SyntaxError: Unexpected token '<'" etc
however if I uninstall serve --s and put back the package.json like this :
scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then run npm start again it work fine on my local machine, so i think i am doing something wrong in the process and i would like to know why I have issue with the serve package.
Looks like you haven't built your /build folder with app bundle. It must be like this:
npm start - to run and edit code
npm run build - to build a bundle(creates/rebuild a /build folder)
serve -s build - serve/start the /build folder

Blank page on create-react-app when deploy to netlify

I'm trying to deploy create-react-app(which is currently on github) to netlify. after it deployed it shows a blank page.
Netlify configurations i have added:
build command: yarn build,
Publish directory: build
and this is my scripts on package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
I was getting blank page only on mobile devices after deploying on Netlify. It worked after I removed REDUX DEVTOOLS EXTENSION from Redux store.

How do I make styling and fonts work on Heroku

I've got a node project with a create-react-app project in a folder called client.
It's setup on Heroku and deploys and works (functionaly) using git push heroku master but none of the styling is active and it's using the wrong fonts.
It all works on localhost.
In the project package.json I have
"heroku-postbuild": "cd client && npm install && npm run build"
and in client package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Cannot find anything wrong in Heroku setup or logs, or any documentation, at a bit of a loss where to start even looking
Included the css file in index.html

Deploying my react app on github

I have a master branch and gh-pages.
I was able to see it on gh-pages when a friend developer of mine walked me through it.
I tried to merge the gh-pages with master to add the styling I did and it messed up the viewable app page of github.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"precommit": "lint-staged",
"build": "node build.js",
"deploy": "npm run build && git-directory-deploy --directory _build/"
},
"homepage": "https://marianapt.github.io/reduxTable/",
"lint-staged": {
"*.{js,json,css,md}": ["prettier --write", "git add"]
}
thats my package.json
I do npm install to make sure its all updated..
ever since i merged the master and the gh-pages I cant see my application and im back to seeing the readme page. https://marianapt.github.io/reduxTable/ thats the link...
I don't understand realy whats happened with you but I think the problem is you lose your prod app.js of master branch when you do the merge.
Just try to run npm run build and push again to the github
Hope this will helps you.

Resources