I'm trying to Publish/Host a ReactJS project on Bitbucket. the project was bootstrapped using create react app, therefore the index.html file is within a public folder i.e. root/public/index.html.
i have followed the instructions on https://support.atlassian.com/bitbucket-cloud/docs/publishing-a-website-on-bitbucket-cloud/ but i cant seem to get the site to show.
the url's i have tried are [workspaceID]/ui-library.bitbucket.io and [workspaceID]/ui-library.bitbucket.io/public (ui-library being the repo name). Both of these return repo not found or just google search results.
am i doing something wrong here? i'm new to Bitbucket, i would have previously used GitHub and GitHub pages for things like this.
thanks...
Related
I have set the "homepage" value in the package.json to "." and that will show the basic react app in build/index.js locally but the readme just shows on the public domain. The site is hudsonbasso.com and here is a link to the repo https://github.com/hbasso/wherecaniwatch/blob/master/build/index.html . It is hosted through github pages.
I tried changing the hostname to several different things and the branch name that github pages was serving up.
This ended up being an issue with my DNS setup. I found a good walk through here Custom domain for GitHub project pages .
Basically, there is an existing web app built in ReactJS that the developer no longer maintains, but has a public GitHub repo for the app. I was hoping I could simply clone the repo and deploy it to Netlify to get a working clone of the app that I could then make edits to (I have the developer's permission for this), but when I attempt to do this, the web app doesn't appear to build, as the webpage is blank except for the site name and favicon. This is without making any edits to the production code that is already successfully deployed elsewhere. I have very little experience with React (and web development in general), so would really appreciate any help in troubleshooting this. Is there something else I need to do to get my fork of the repo to build properly when deploying? All I'm trying to do at the moment is successfully publish a clone of the existing app before I can begin making updates.
Some relevant links in case they are useful:
Original GitHub repo: https://github.com/Huuums/baseball-superstars-deckbuilder
Existing (working) web app: https://basu2020-deckbuilder.netlify.app/
My fork of the GitHub repo: https://github.com/ryangillman/baseball-superstars-deckbuilder
My (not working) deployed app: https://basuclone.netlify.app/
Let me know if anything else is needed from me. Thanks in advance for any help.
This app uses api under the hood and requires some information from the database (Firebase database).
Error from the browser console:
Your API key is invalid, please check you have copied it correctly.
Required API key, from the https://github.com/ryangillman/baseball-superstars-deckbuilder/blob/master/src/firebase.js file:
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
As I understand, you can't use this code without database.
So I have a reactjs app publish in github pages, is this one https://bernardoolisan.github.io/PyOcr/
The problem is that the app fetch data, but when I deploy it on github pages it give this error:
And it was working:(
And now my page doesn't work too, it was working but right now is blank i dont know why
I guess you are deploying the react project the wrong way to hosting providers such as github or netlify . First you must build your react project and then only push the files inside the build folder to hosting provider . Github pages can only serve static html css js files so it can only serve the build folder of your react project .
Note
To build a react app you can run npm run build and a build folder will be generated . Then you can push the files inside of the build folder to github repository and enable github pages for it .
I was having a similar issue, and I too though gh-pages can't fetch data. But what I did was I added cors to my server. I allowed cross-origin requests. Now it retrieves data from my server on heroku.
All the examples I see online have you deploy to a subdomain (for example https://username.github.io/my-app). But how do you deploy to the homepage when using React? In my package.json file I have "homepage": "http://username.github.io/" and I'm using npm run deploy however my site doesn't show up, instead a React information file displays.
Any help would be greatly appreciated.
I figured out what I need to do after reading the 'Github Pages' section of this website: https://create-react-app.dev/docs/deployment/.
I'm completely new in React world.
A few days ago I developed my very first simple React app, built the app and uploaded it to my GoDaddy host. I thought this would be enough as I had an index.html in the root of my host and the thought that the build will work once I open my domain in browser.
Unfortunately, it turned out that it's not working. Nothing is easy in life.
After hours of googling I found out that people upload their React apps to special services such as Heroku. I found a tutorial and managed to publish my react app successfully on Heroku. But to be honest I still don't know why my app wasn't working on GoDaddy server.
When I was preparing my app for Heroku, one step was creating a server.js file using express.js.
Does it mean that each React app needs such a server file to be working? What if I wanted to use my React app on GoDaddy or any other hosting server? Would it be possible?
OK, I found out what was the problem.
It turned out that paths inside the index.html don't mirror the build folder structure.
Inside the index.html I had to change references like this:
/static/css/2.567.chunk.css
To this:
./static/css/2.567.chunk.css
And inside of CSS files I needed to change paths like this:
/static/media/tree.6098.jpg
To this:
../media/tree.6098.jpg
After that you simply upload your files and everything works as it should.
Now the question is, why those paths are not as they should be?