How to push entire React folder to github? - reactjs

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

Related

Git repository not pushing the folder created within the SpringBoot project by create-react-app to Git

I have created a SpringBoot API which is interacted with by the frontend React project to generate a frontend website.
To create the react project I used the npx create-react-app command within the terminal of IDEA in the project root folder of the SpringBoot project.
I have been able to push the git lab repository from the root directory of the SpringBoot project successfully and all java files are successfully pushed to the remote Git repository, unfortunately though, the 'frontend' directory which contains the React project is not being pushed to the GitLab repo successfully.
Only an empty directory called 'frontend' is displayed on the GitLab web GUI, with a small red GitLab icon displayed next to it, I think this indicates it contains nothing or was not pushed correctly. It also cannot be clicked and has the commit id next to it: #f4bh345c
There is no Git repository inside the 'frontend' directory.
I have only pushed to one branch of the remote repository, not the master branch but the main branch.
I do not understand why the 'frontend' directory is not pushed with the rest of the directories and files within the springboot project.
Thanks for any help!
You will need to remove the .git folder in your react app by running the command "rm -fr .git" within the react app folder.
Do the same with the main folder which has both projects. check if the .git folder has been successfully removed by running the "git status" command in both folders. If you get "fatal: not a git repository (or any of the parent directories): .git", you are good to go now.
Delete and create a new remote repository.
In your main folder which has both projects, do "git init" to initialize a new git repo
Then git add .
Then git commit -m "Initial commit"
You can now successfully add the remote repo by following the instructions given when you created it in step 3 and push your changes.
N:B Don't forget to include the .gitignore in your parent folder which has both projects.. You can copy it from your react app project.

How upload reactjs project to ftp?

I'm newbie on react, I did 2 paged website for exercise, all is working well on my localhost.
But i'm confused about how upload project to my linux server.
What i did ?
I create react app via terminal with this command :
create-react-app react-demo-project
Terminal create my project and in project root i have node_modules directory.
so here is i have some questions:
1- React project will work normally on linux hosting?
2- I need to all my project upload to ftp? Because there is arround 20.000 file in node_modules directory.
With this command build your app :
npm run build
Build folder has created in your project directory, open index.html in your browser and check output...
If you saw a blank page (after build and opening index.html) , you must change the main js file path in the index.html :
default is : src="/static/js/main.ddfa624a.js"
change to : src="./static/js/main.ddfa624a.js"
I changed js path and this worked !
create-react-app has a command to bundle your app to a ready to deploy state.
npm run build
This command will bundle your app in /build folder. With the contents of this folder you can deploy your app in any hosting environment. You don't need to install your packages and libraries manually when you use this command. More information about using this command and deploying your app in different hosting environments can be found create-react-app README
Deployment
npm run build creates a build directory with a production build of
your app. Set up your favorite HTTP server so that a visitor to your
site is served index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.
1- React project will work normally on linux hosting?
Yes, it will work in all webservers, unless you have server side rendering (SSR)
2- I need to all my project upload to ftp? Because there is arround
20.000 file in node_modules directory.
Files in node_modules will NOT go to your web server. These are development dependency files used only during development.
Run npm run build
This will create a folder called build in project root. This will have all html, css , images and js files
Copy all files and folders in build folder to your site root.
If your site has to be hosted in a sub folder in root you need to do the below, otherwise you will see a blank page. This is because your static files (css, js etc) are not loaded correctly.
Open package.json
Add a new entry homepage: /your_subfolder/
It will look like this
Now do steps mentioned above and your site should work fine
Add this line to package.json:
"homepage": "./"
That should make it work without the need to adjust index.html after every build.

Run projects on github locally

I need to check drag and drop feature in angularjs .
Any idea how i can run the following project locally on my system.:https://github.com/marceljuenemann/angular-drag-and-drop-lists
Download the repository & then extract contents of the folder & navigate to the following folder: angular-drag-and-drop-lists-master/angular-drag-and-drop-lists-master/demo/ and run index.html and you are good to go. Same is with cloning repository.

angular 2 deploy on github

How to deploy angular 2 website application on github? I am new to Git and github so just saw the basics on internet and created a repository on github and finally a url was generated in my git bash after running all steps and when I tried to open it Github 404 error pages was showing.
These are the commands which I ran through :
git remote add origin https://github.com/Muraliduke/MuraliDukeResume.git
git push -u origin master
ng github-pages:deploy
Is there any difficulty for single page application to host a website on github? I tried with normal html content and my website on github works fine. But this with ng2 is not working. Just saw on internet that there must be some prefix to be done to support SPA on github but since I am not familiar with github didn't understand it. So kindly suggest me a solution ?
There are a few things :
Deploying to GitHub pages using Angular CLI has been deprecated. Use angular-cli-ghpages
Add the 404.html fix
Ensure you have "turned on" GitHub pages for your gh-pages branch from the repository settings
optionally, add custom domain
This blog has everything you need.
Make sure to do a build to get the necessary files into dist .
ng build --prod
First get all relevant the files from the Dist Folder of your application
for me it was the css files in the assets folder main.bundle.js polyfills.bundle.js vendor.bundle.js
Then push this files in the repo which you have created.
1 -- If you want the application to run on the root directory - create a special repo with the name [yourgithubusername].github.io and opush these files in the master branch
2 -- Where as if you want to create these page in the sub directory of in a different brach other than than the root , create a branch gh-pages and push these files in that branch.
In both the cases the way we access these deployed pages will be different .
For the First Case it will be https://[yourgithubusername].github.io and for the second case it will be [yourgithubusername].github.io/[Repo name].
If Suppose you want to deploy it using the second case make sure to change the base url pf the index.html file in the dist as all the route mappings depend on the path you give and it should be set to [/branchname].
Github Repository - https://github.com/rahulrsingh09/Deployment

How do I move my Yeoman Angular app to a repository?

I'm trying to upload my Yeoman Angular app to a git repo so that other developers can work on it. How do I go about it? Meaning, which files/folders should be uploaded and which can be skipped? I don't want the other developers to run the yo angular command, because it creates a new app with the folder name altogether. I tried copy pasting my folder contents to a new folder, excluded the node and bower modules, then ran npm install and bower install on this new folder. But now it fails to find phantomjs plugin. Is there a proper standard way to do what I'm trying to achieve?
Just pushed it as is. There is a .gitignore file which handles everything. The unwanted folders are automatically ignored.

Resources