Im new with git stuff. I wanted to push my react project made with "create-react-app" into github and make it work with github pages. So i followed some tutorial and it basically worked so i could preview it on a github page. But now i want to push whole folder of my react project instead of only files. To make it working i deleted .git folder inside my app folder and initialized one outside. I ended up pushing it to my github repo but i cannot live preview my site for some reason.
https://github.com/Adrian397/react_projects - here is how it looks like (there is main folder in master branch)
This is how my package.json looks like.
I dont know if the "homepage" is written properly but i tried to change it to "homepage": "http://Adrian397.github.io/react_projects/expenses" (react_projects is my whole repo and expenses is my folder that i pushed into github) but still did not work.
Is there any other way to do it because it is kinda weird if i had to create a new repository for every react project instead of having them separeted in one global repository?
Related
I uploaded a react app on github repo and after pushing the code, I am seeing a new static folder instead of public and src folders, and the code is non readable in the repo.
https://github.com/Rohitkumar123github/random-suggestion-using-api
It will be easier if someone visit and see it.
I am new to github and i saw some videos on github hosting websites and when i tried to host my website i am seeing this static folder in my main branch instead of public and src. I want to use github to show my project source code and a running website to potential hires. But the source code is non readable right now.
did you add the src, public, and other folders that you said in the .gitignore file? check this file, those folders mustn't be in the .gitignore file;
and check out that did you add those folders to the git stage before committing? (git add -A)
When i try to deploy my react app to github pages with the package gh-pages, the result page is blank.result page
The page I am trying to deploy is here: LINK
I don't know if it matters but I am currently using the free domain given to me by GitHub: www.elvas.me
I tried following the react official docs: Link, but it didn't work for me... Perhaps it's because I am using vite and not create-react-app?
*Edit*
Found out that the site is trying to get the .js and the .css from the wrong place.
I just don't know what I am doing wrong...
Ok, so to solve this the only thing that I had to do was to add base:"{repName}" to the vite.config.ts file.
Source: https://vitejs.dev/guide/static-deploy.html
The images were not loading, I used this to fix them:
Github pages vite JS build not showing the images
I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:
First things first, make sure that your ".git" folder and your project are in the same folder.
Run npm run build. You should have a dist folder now.
Open the file vite.config.js (or .ts).
Add the base file with your repository name. Include the two /.
Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.
export default defineConfig({
base: "/react-beautiful-dnd/",
plugins: [react()],
});
Open your .gitignore file and delete the dist line from it. You want to make sure that the dist folder is pushed to github.
git add .
git commit -m "deploy"
git subtree push --prefix dist origin gh-pages
Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this: https://atlassian.github.io/react-beautiful-dnd
In case it's still showing a blank page, it's very likely to do with the step number 3. Ensure you added the correct repository URL and that it begins and ends with the / sign.
That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.
So I have a react practice project that I want to add in my github repo. I used create-react-app and there are many folders. I tried adding the whole project folder but it says the size is too big. Which folders should I put there? Also I want to be able to deploy it with netlify.
After taking a look at console, i got this
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/2.1f6fc1d5.chunk.js”.
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/main.3961266e.chunk.js”.
Link to my Repo : https://github.com/Abhishek-098/TourSpot
For deploying a Single-Page Application (React, Vue) to GitHub Pages, you should know that it is necessary that you do a production build. This can be accomplished by doing npm run build or yarn build depending on the package manager you are using. This command will generate a ./dist or ./build folder that will contain your react app in pure HTML, CSS, and JS.
For GitHub pages, there are some configurations you should do. First of all, the index.html from your production build (from the dist, build folder) should be in the root folder, which means, you should be able to see it when you open the repo (not inside the build folder). If GitHub pages do not detect any index.html in the root of the repo, it will display a 404 page.
Now, since you do not want the production build files messing around with your React project, it is recommended that you create a different branch for your GitHub pages deploy.
So, ideally, you would have two branches: master and gh-pages, the first one containing your React project and the second one containing only your dist folder but in the root of the project.
Here is an example of the structure of a Repo that it's deployed using GitHub pages.
https://github.com/8rb/React-Quiz/tree/master
You can see both branches and the deployment link works perfectly fine.
To configure the branch that is being deployed to GitHub pages, go to settings and select the branch where you have your production build.
All the information was taken for the following link:
https://create-react-app.dev/docs/deployment/#github-pages
I hope you found it useful!
#Rodrigo Ramirez does explain how its done, but leaves out some important information provided in the docs he linked (https://create-react-app.dev/docs/deployment/#github-pages). Maybe the've been updated since but I would recommend following those steps in the doc. They give step by step instructions that are very easy to follow.
I tried following #Rodrigo Ramirez answer, as well as, countless other things on the internet and nothing worked and it was all very complicated. The doc provided here gets it all done for you very easily.
I have a group of projects that I've been compiling on Github as part of the Frontend Mentor challenges - https://github.com/MikeBish13/frontend-mentor-challenges
These are all stored in the same folder locally on my PC and every time I add a folder, VS Code recognises this and queues that folder up to be committed and then pushed to the Github folder.
I've just created a new React App via create-react-app and have added that to my folder locally on my PC and I now want to add it to the folder on Github, but VS Code is not recognising it as a new folder and won't let me commit, and then push changes.
Does anybody know how I could do this? Are there settings I need to change in the React project?
I've run npm build on my React project, if that makes any difference, but I've not changed or added anything new other than the initial create react app.
It's probably a simple answer but I'm a novice when it comes to React/Github.
UPDATE:
Here is a screenshot of my folder structure