I have an app which I'm deploying to gh-pages with npm gh-pages package
I do this command "deploy": "npm run build && gh-pages -d build" it creates build folder normally.
But when I go to gh-pages it is rendering only one static component. You can see here
In networks I can see that resources are loading up, js files, css files.
I'm not sure what the problem is. Can it be because I'm using react router?
All the help will be much appreciated.
Full code can be found here link
The problem is that you are hosting your React App in a subdirectory, which means that your route "/" is not valid here anymore.
Add the homepage property in your package.json file.
"homepage": "https://kiraburova.github.io/Marvel-ReactJS-API/",
Related
I have deployed my app at https://hudsonbasso.com/ and it is just showing the readme instead of what is showing on my branch when run locally. I suspect is something with the build folder or gh-pages not recognizing my index.js in the src folder. Link to repo https://github.com/hbasso/wherecaniwatch
enter image description here
I ended up solving this by adding a .nojekyll file and following some of the instructions here https://jiafulow.github.io/blog/2020/07/09/create-gh-pages-branch-in-existing-repo/ to create an empty branch called 'gh-pages' and then my yarn deploy worked!
I watched lots of videos, and I read lots of documentations, but I couldn't do this subject. Can you help me?
First of all, I have an react app on github, HERE:https://github.com/alper-efe-sahin/portfolio-v2
(It completed app)
I have 2 branch, first MASTER branch, and second GH-PAGES branch.
I created GH-PAGES using codes which are npm run build and npm run deploy.
Also you can see my some package json codes here:
"gh-pages": "^3.2.3",
"deploy": "gh-pages -d build"
"homepage": "https://github.com/alper-efe-sahin/portfolio-v2",
When I try to create github page, it shows my github page, note It's codes. (for instance, it shows react documents, not react codes, not html css etc.)
How can I show my codes like a good website ?
You have the wrong value set at the property homepage in package.json
it should be https://alper-efe-sahin.github.io/portfolio-v2
Also add the script "predeploy": "npm run build" alongside with deploy in scripts so when you run npm run deploy it also builds your app with npm first.
source: The guide I followed for my cra
I'm deploying an app on a host that has the following setup:
https://example.com/app1
https://example.com/app2
etc.
I need to deploy under a custom root path /app for my React app that will sit under this umbrella. I'm using react-router v5 and create-react-app.
Problem
When I build the app (I'm using vercel's serve), I get a blank page. When I go to localhost:5000/app/, nothing shows up.
I did all the suggestions from here and here, but still can't get my app to load.
I'm also confused: what's the difference between using react-router's basename and CRA's homepage field? Should I be using both, or one or the other?
EDIT: Potentially found the problem. Setting homepage=/app also changes the paths for my JS bundle, which it wasn't recognizing (hence the blank page). I manually added a app folder inside my build dir, like so: build/app/static and it worked. Shouldn't CRA do this automatically?
My setup
app.tsx
<Router basename={process.env.PUBLIC_URL}>
...
</Router>
package.json
scripts: {
"build-prod": "GENERATE_SOURCEMAP=false REACT_APP_ENVIRONMENT=production react-app-rewired build",
},
...
"homepage": "/app",
Command to serve the prod build locally
> npm run build-prod && serve -s build -l tcp://0.0.0.0:5000
The project was built assuming it is hosted at /app/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
bit.ly/CRA-deploy
I navigate to http://0.0.0.0:5000/app/ and get a blank page (no network calls).
What I tried
set homepage: "/app" in package.json source
set the basename for react-router source
The CRA docs shows an example using the full path of the website. That didn't work either:
"homepage": "https://example.com/app",
I got it working, although it's a workaround.
As Mohit's comment mentions, the homepage field makes it so all the assets are pre-pended by that sub-path defined in homepage. I was getting a blank screen because it couldn't find the new path to my JS bundle, aka it went from serving /build/static/js/.. to /build/app/static/js/...
Solution (workaround)
Create a new folder called app (or whatever your new root path is called) under your build directory.
Move your /build/static folder to build/app/static.
This is what it looks like with Dockerfile:
RUN pwd
RUN echo $(ls -1 $pwd)
RUN echo $(ls -1 ./build)
RUN mkdir -p ./build/app
RUN mv ./build/static ./build/app # now it should be /build/app/static
RUN echo $(ls -1 ./build)
You can take out the pwd and echo lines, I added it so I could see it working.
I don't know why CRA doesn't do this by default. It might be because I'm using react-app-rewired, which messes around with CRA's webpack config?
My react app is not loading the index.js, you can see my repository at https://github.com/Vitorrrocha/Star-Wars-info and the gh-pages: https://vitorrrocha.github.io/Star-Wars-info/ .
package.json: https://github.com/Vitorrrocha/Star-Wars-info/blob/master/package.json
Which branch are you trying to serve as a GitHub page? I see you have just a master branch.
You could make a branch called gh-pages and push your build there. I see you have gh-pages installed as a devDependency. You can use gh-pages -d build it will do everything for you. (build is the output folder of react-scripts build.)
This question actually follows directly from my answer on a previous question.
I added a "homepage" to my package.json because it is a React app that I hosted on Github Pages. The output of npm run build say that the /build directory can now be deployed, and it assumes the project is being hosted at /project_name/.
But on localhost, the project is not being hosted at /project_name/, so the paths being requested for js and css are messed up (looking for /project_name/static/... instead of /static/...) and the app broken.
How can one have the homepage field in package.json so that they can deploy to Github Pages (for example) while still develop locally with a working app?
Docs for create-react-app explains how to serve same build from different relative paths.
If you put homepage as
"homepage": ".",
assets will be served relative to index.html. You will then be able to move your app from http://mywebsite.example to http://mywebsite.example/relativepath or even http://mywebsite.example/relative/path without having to rebuild it.
For development purposes, serving using yarn start or npm start is good enough. App will be available in localhost
You can use PUBLIC_URL environment variable to override the homepage for a specific build.
Even better have it set in your package.json, for instance:
{
// ...
"scripts": {
"build": "react-scripts build",
"build-localhost": "PUBLIC_URL=/ react-scripts build"
// ...
}
// ...
}
For an all-in-one answer which also covers react-router-dom:
Add package.json['homepage'] to be your production URL. To be noted, the CRA build step removes the domain part of the URL to leave only the path to index.
When building for localhost, do PUBLIC_URL=/ npm run build
Add <base href="%PUBLIC_URL%" /> in your public/index.html page as proposed in this article ; it will provide support for assets (img, CSS) and will expose the %PUBLIC_URL% to be reused later.
In the component which creates your BrowserRouter (typically App.js or main.js), add:
const basename = document.querySelector('base')?.getAttribute('href') ?? '/'
use as: <BrowserRouter basename={basename} />
You can override the homepage setting using you dev shell environment:
$ export PUBLIC_URL=http://localhost:3000/
$ yarn start
or if you prefer, remove your homepage setting and configure your env before building for production:
$ export PUBLIC_URL=http://example.com/subdir
$ yarn build
I had a similar situation where an image would not appear once I added 'homepage' to my package.json and deployed it to gh-pages. After trying many different solutions, I finally solved this by taking the image out of the public folder and into the src folder. Then I switched:
<img src="/img/image.JPG" alt="image" />
to
<img src={require('../../assets/image.JPG')} alt="image" />
This seemed to do the trick for me!