I've installed a react project recently this way:
npx create-react-app projectName
When it successfully installed, apparently the git is also installed on it. Since there is .git directory exist in the root.
From the other side, I created a new project on Gitlab and connected it to the project this way:
git remote add origin http://gitlab.<domain>.com/myName/projectName.git
Now, I want to push a commit on the git named something like "Project Init". But there is no change detected when I run git status. So I cannot add and commit anything.
So, when I run git push origin master I get this error:
hint: 'git pull ...') before pushing again.
When I run git pull origin master, get this error:
fatal: refusing to merge unrelated histories
I stuck in this part ..! What I have to do? In other word, how to synchronise the git and a react project created just now?
Correct way to do it is to create new repo without "initial readme.md commit". Fast way is to git push origin main --allow-unrelated-histories. Or just simply use --force flag in push, but be careful with that
You can use the allow-unrelated-histories flag when pushing.
Related
I'm going to make a git to my project include spring and react, as shown below:
after I create a local repo and just push this into gitlab as it told me: btw before I git push I have to write "git pull --rebase origin main", otherwise I can't push my repo to gitlab. But I think that is maybe not the reason.
And afterwards it has problem with the react folder in gitlab, and there is no problem with the spring folder, as shown below: I can't open the react folder in gitlab.
So my question was: why only the react folder has this problem but spring not? and how can I fix it? When I open the react folder by vs code, the version control tool also doesn't work when I made some changes.
Very thankful for answering!
why only the react folder has this problem but spring not?
Because delivery-react is probably a nested Git repository (meaning there is a delivery-react/.git), unless you have a .gitmodules file in your main repository.
If you want to add delivery-react as a regular folder:
git rm --cached delivery-react # no trailing /
git commit -m "Remove nested folder"
git add delivery-react
git commit -m "Add deliver-react"
git push
I am currently learning git, GitHub, and react.js. So, I need to host the react.js project in a GitHub domain. So I did some research and deployed the react.js in the GitHub domain. And I deployed the project successfully by doing these steps :
1.I created a GitHub repository.
2.Then I used this code in Terminal: npm install gh-pages --save-dev
3.Then I add this line in the package.json file:
"homepage":"http://<github-username>.github.io/<repository-name>" and I added this also in the package.json, scripts:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
after that i added this also in package.json:
"devDependencies": {
"gh-pages": "^3.1.0"
}
4.Then I added remote and committed the code and pushed the code like this:
git remote add origin https://github.com/<github-username>/<repository-name>.git
git add .
git commit -m "initial commit"
git push origin master
5.Then I used this code to deploy the app:npm run deploy
After That Everything was successful and my site hosted as https://<github-username>.github.io/<repository-name>
Then I tried to modify this site, but I can't. When I go to Settings>Pages I found that the deployed branch is gh-pages and this branch wasn't created by me. I changed it back to master and saved it. And when I refreshed the site, there was nothing except the readme.md file. So, I changed it back to gh-pages and it worked again. Then I did some research to modify and I found that I just need to commit and use this code again:npm run deploy
So, I did like That and This Was shown in the Terminal:
> sample#0.1.0 predeploy
> npm run build
> sample#0.1.0 build
> react-scripts build
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
What's this all about? I need a solution to modify a deployed react.js app.
Anyone Who answers my problem will be appreciated.
Thank you 🙏.
If I'm not wrong to understand your question, here is my little advice.
You just need to add, commit and push your changes to the master repository, and after that run the following step :
npm install
npm run predeploy
npm run deploy
After the steps are success you need to wait several minutes before the changes are live.
Just clone the project and create a new branch.
Modify the project. Then add and commit as usual.
Then use the code git pull
And then type git push <your remote name> <the name of the branch you have created early>
Then go to Github and refresh the page. You will see compare pull request button. Click that. Then add title and description. Then click create new pull request. If your branch is mergable, you will go to another page and you will see merge pull request button and click that.That's all. Then You can delete the branch created by yourself by clicking delete branch safely.
Then use the code npm run deploy
I hope this works 😊.
I am trying to publish my react app on github.Here are the steps that I have followed.
1-I have installed git on my windows.
2- In Visual Studios terminal I have written git init
3-Then I have created a repository on github called "cartdemo"
4-In my package.json I have changed homepage, made the private false and added "deploy": "gh-pages -d build
5- Again in VS terminal I have written git add .
6-git commit -m "Go Live"
7-git remote add origin https://github.com/rahman23/cartdemo.git
8-git push
Note: Here you can see the files https://github.com/rahman23/cartdemo
However when I hit the link https://rahman23.github.io/cartdemo/ I get a page where it is written
cartdemo
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Where did I do wrong?
In step 8, you need to tell git which repo and branch to push the project to. Since you added an origin, you would...
git push origin master
Since the project has now been pushed, add this to your package.json file.
"homepage" : "http://rahman23.github.io/cartdemo"
then run:
yarn build in the console, and try pushing it again...
This is clearly something I'm misunderstanding but I'm desperately struggling to find an answer.
I've been teaching myself React with create-react-app, I've run "npm run build" to spit out my finished project, and I have the project pushed to a private bitbucket repo.
My expectation would be to then SSH to my server, and git clone the /build directory in order to make this project live. Obviously that is possible (if I removed /build from .gitignore), but since the /build directory is in .gitignore this clearly isn't the intended/desired behaviour.
So, my question is - what is? How does one publish a completed build to server without pulling from git (and obviously without FTP)?
Thanks!
The build directory is in .gitignore as it can be generated from the existing files.
To minimize upload/download time only essential items should be kept in the git repo. Anything that can be generated need not be in the repo (The build directory in this case).
If you are working on a server that has node (AWS, Heroku etc) you can git clone the entire repo on the server and then run npm run build there (after npm install). Then you can do something like
npm install -g serve
serve -s build
The serve module serves static files and you pass the build folder as a parameter.
If you are working on a more old style server like Apache static hosting with cPanel etc then you will need to upload the entire build directory containing static files and index.html.
It seems one way is to deploy the React app to Heroku, but is there a simple way to deploy to our own website or to GitHub page feature so that you can see the page off from GitHub? (just as a sample, not for production)
Details:
It seems that one possible way may be to use
wget -r --no-parent http://localhost:8080 -P sample -nH
cp -rf images any_needed_folder sample
and now you can git add sample and git commit and push to github and turn on the GitHub page for your repo and be able to see your React app inside of sample.
You also need to change the paths in the index.html, from /bundle.js to bundle.js, etc, because you need relative path instead of going to the root of your website.
(I used wget to recursively download index.html, bundle.js, and style/ (the CSS files) because bundle.js cannot be found in the whole directory on the local hard drive. I used wget because curl doesn't seem to be able to download recursively)
Ok, I found that the latest React, it will tell you to use
create-react-app hello-world
to create the app, and then there is an official
npm run build
to build it to host it as a Gthub page, or on your own website.
If wget is doing what you want, cool, use that.
For the actual deploying, I recommend using gh-pages on npm. It handles creating an orphan branch and copying your output files into it, and then pushing all in one command.
Install it:
npm install --save-dev
And in an npm script:
gh-pages -d sample