React code is not visible properly in gitHub repository - reactjs

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)

Related

How to push entire React folder to github?

I am working on a project that uses both React and Springboot apps, so I have individual folders for each of those and am trying to get them both into my github repo. I was easily able to drag and drop the springboot folder, but my react one does not upload at all when I drag it into the upload box. Is there an easy terminal command in vs code (the editor I'm using) to add the entire folder?
Since you want to add your 2 different projects in 1 repository, you can firstly put both of your project folder inside 1 main folder, example:
MyFolder:
- MyReactProject
- MySpringbootProject
here MyFolder is your main folder, which has both of your projects, react and springboot.
then finally make a file inside MyFolder with name .gitignore, and put this line inside that file:
**/node_modules
what this file will do, is when you will push your code to github, it will ignore all the files and folders which are listed inside .gitignore file.
You Don't Need node_modules folder
when uploading your code somewhere online, you don't need to upload the node_modules folder, because this folder contains all the dependencies your project need, but when uploading your code online people can download those dependencies by calling the command npm install which will read all the modules needed from your package.json file, and download it on your machine.
To upload your code online you first have to authorize yourself on your local git program, to authorize yourself for github you can read this Article.
After authorizing yourself, firstly make a new empty github repository, by going to github or just by clicking this Link, after making a github repository open Terminal/Command Prompt in your Folder where both of your projects were, in this context my both projects were in MyFolder.
After opening Terminal/Command Prompt enter this commands:
git init
git branch -M main
git add .
git commit "Added all the files"
After running these commands, finally run these 2 final commands:
git remote add origin https://github.com/username/repository-name.git
here, replace username with your github username, and replace repository-name with the name of your repository you specified while make a new repository.
and finally run this command
git push -u origin main
and your code should be pushed on github.
If you don't want to use git commands you can also use, Github Desktop, but it is recommended you first learn basics of git and then use github desktop

pushing whole react folder to github

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?

I would like to publish images, env public folder link & react app

I have recently created my react portfolio website, and would like to publish it for free using github pages, or any other free domain. I don't know how to do so, as I have multiple things. I have my public folder will my projects images, and I also have my .env file with hidden information. How can I do this all?
Did you tried GitHub Pages?
All that you need to do is to create repo with your's github nickname and commit all your changes into this repo. Not sure about .env file and GitHub Pages, needs some research.
GitHub Pages - https://pages.github.com/

Heroku "Could not find a required file. Name: index.html"

I have been running into this error "Could not find a required file. Name: index.html" when I attempt to deploy my React Portfolio to Heroku. I have looked at previous answers and I have not found a solution. I do not have my public folder in .gitignore and I will attach a photo to show.
Do I need to add certain "scripts" in my package.json that I may be missing. I also tried buildpacks after watching a youtube tutorial and that did not seem to work either.
If you're deploying from Git, anything gitignored will not be included in what gets deployed. Rather than ignoring the whole public directory, you could ignore only some files, for example public/*.js.
EDIT: see comments, I misread the question.
The solution to this was that I did not have all my files at the route. Simple as that, I just needed to delete the parent folder and move all files to the route of the directory. I had them nested within 2 folders, I had moved them out of one of those folders thinking it was at the route but it needed to go one more folder out and that was the issue that I was having.

Unable to choose src for github.io portfolio page

For the main git repository, devanshdalal.github.io, I am unable to choose the src branch to use for deploying, github.com always picks up the master branch. It becomes difficult now, because I now have to push my build/ forlder to master. Is there a way to automate this?
Currently github doesn't support choosing custom folder for repo named like {GITUSER}.github.io -
From community help post
From https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/, the only three options that GitHub Pages recognizes are:
master branch
docs/ folder on the master branch
gh-pages branch
But for repo like {GITUSER}.github.io, having docs/ folder also doesn't work(I couldn't make it work). I faced this similar issue a while back. I was using jekyll to build the static pages for my site. I know It's really frustrating, but as of now what you want, is not possible.
However, I made a workaround to version-control my jekyll project as well the generated static github.io pages.
I maintain a separate repo for the jekyll version of the project(which in your case I guess would be the react project). So locally I have two separate repo -
{my_username}.github.io - > which will contain the static pages, and remote for this local repo would be the {my_username}.gihub.io repo(the static site repo).
I also have a separate repo for the jekyll project. Which has a different remote repo setup. I configured settings for this project in such way that after build, the static pages will be saved in the local repo of {my_username}.github.io folder. then I can just commit and push separately in the two repos.
This way I can keep track of the static pages as well as the jekyll project that builds the static pages.
You only need to make sure that before you configure a publishing source, the branch or folder you want to use as your publishing source already exists in your repository.
This link GithubPages will solve your problem.

Resources