need guidance to deploy react website to GitHub "facing 2 issues" - node.js

I was trying to deploy a react website to git hub but i face some issues, this is my first time dealing with Git, so expect dumb mistakes from me, I will elaborate exactly what I have done :
1 - created a repository on GitHub.
2 - opened the directory of my
website on my local pc from the terminal
3 - git init
4 - git add
--all
5 - git commit -m "whatever"
6 - git remote add origin https://github.com/MahmoudFarid296/star-game.git
7 - git push
--set-upstream origin master
8 - npm install gh-pages --save-dev
9 - npm run deploy -> faced an authentication issue which I looked for
and found the solution to be : git remote set-url origin
https://MahmoudFarid296:{my
token}#github.com/MahmoudFarid296/star-game.git
10 - git remote
set-url origin https://MahmoudFarid296:{my
token}#github.com/MahmoudFarid296/star-game.git
11 - npm run deploy
-> fatal: could not create work tree dir 'C:\Users\hp\Star-match-game\node_modules.cache\gh-pages\https!MahmoudFarid296!{my
token}#github.com!MahmoudFarid296!star-game.': Invalid argument
note: before pushing the files to the repository I did already set the homepage attribute in the package file to "homepage": "https://MahmoudFarid296.github.io/star-game",
and I added "predeploy": "npm run build",
"deploy": "gh-pages -d build" to the scripts.
now the 2 issues are :
1 - the problem in step 11 I didn't find solution for.
2 - I tried the same directory with same steps but without the readme file a few days ago and it did run the deploy and it gave me the message of published but when I opened the website on GitHub it just showed a blank page ,I tried adding /public to the URL as my index.html file was in public directory as you can see in the repository but still gave me a blank page.

Related

How to push both the client side and server side project folders together as a one project (api + front end) on github?

I have completed my project.
My stack :
Front-End UI => Reactjs
Back-End => Nodejs/Expressjs + MongoDB
And below is my project structure containing both the folders:
project_Name > client + server
project_Name is the main folder
client and server are the separate folders both are inside project_Name folder.
And inside client and server folder I have installed the respective npm modules (reactjs + nodejs)
My API end point is running on localhost:8000
and reactjs on localhost:5000
So now I want to add my project to github repository.
I am confused how to achieve that?
Do I need to push both client and server side code on separate 2 different gits?
Or
I need to upload just project_Name folder containing both side project files?
But is it so then how can I do that?
Since before pushing to git, the directory should have the package.json file and node_modules which will be only inside the client and server side folders.
These are the git commands to push the project I am using:
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/vik.........git
git push -u origin main
But I don't know in which folder I have to initiate the repository first?
Let me know the solution please .
Thanks!
If your project that you created has it's own folder then what you would need to do is:
Root Folder: Project
./client
./server
Initiate .git from your ROOT FOLDER.
git add . (which then adds all the files)
git commit... And so on. Feel free to comment if you need any help!
It'll add all your files in one go, so don't worry so much and it won't push any empty folders.
There's some instances where create-react-app, will create a git repo on it's own.
On your file explorer look for the hidden files, and be sure to delete that .git folder in your client before pushing your stuff, it'll throw you an error.
run NPM install on your main folder, it'll create a package.json for you.
Try not to think about it so hard and take it slow.
Hopes this helps!
I think you should use this structure:
-projectName: folder
- frontend: folder
- package.json
- backend: folder
- package.json
- package.json
For executing the app you can use github actions:
https://docs.github.com/en/free-pro-team#latest/actions
https://github.com/features/actions
OR
You can also use services like heroku or firebase, see my project (it is just a simple project for resolving this problem you are asking for)
https://github.com/simCecca/InformationVisualizationWorldWide
The structure is:
-projectName: folder
- frontend: folder
- package.json
backend code
package.json // containing the BE dependencies and the dependencies for the
deploy in heroku in this case
https://dashboard.heroku.com/
I hope I responded to your question, if I'have not, please reply to this response
I solved this problem by adding the .gitignore file in the root folder (in same level as client and server) and inside that this line: node_modules/
this will ignore node_modules of both client and server.
after that initialize git:
Git init
git add .
git commit -m 'commit message'
git push -u origin master
Now you can visit GitHub repositories and confirm there isn't node_modules folder anymore
Delete the node_modules and push it from the root.
just copy and paste the .gitignore file in both frontend and backend folder, git will not upload node_modules folder in git repository.
After creating two folders named client and backend in a root folder(suppose the name is: my-project). Now we would like to push our code to remote like this.
a) create a repo named my-project in GitHub(same name as the root folder)
b)checking in the terminal of my local to check if it is in the root or not.
c)from root: my-project % run all the following commands.
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/vik.........git
git push -u origin main
d) now from the root in each folder[client and backend] create a .gitignore file and write node_modules to ignore node_modules if needed.
e)git add .
f)git commit -m 'all codes is pushed to remote'
g)git push origin main
Now all codes are in the remote.
If any code is changed for example in the client.
a) cd client
b) git status
c9 git add ./ file name
d) git commit -m 'client code is pushed'
e) git push origin main
client code is now updated in remote too.
Hope it would help.

Push gitlab repository code to Google source repository

I followed below article to push gitlab repository code to Google cloud source repository but I'm getting an error on this command
git push -f google master
error: src refspec master does not match any.
error: failed to push some refs to 'https://source.developers.google.com/p/project/r/test/'
Article followed:
https://medium.com/#bamnet/cloud-source-repositories-gitlab-2fdcf1a8e50c
Is there anything , I'm doing wrong 😜? Any thoughts as to how I can avoid this error message?
src refspec master does not match any
The issue is the date of the article you are following: Aug. 2018.
GitLab Runner has changed since then, more precisely in May 2019.
The problem is described in this thread from May 2019:
Since we are using refspec to clone/fetch the repository, we checkout a specific commit and not checking out a specific branch.
When the script does git push master, the branch is nowhere to be found so git doesn’t know what to push.
That was because of, on GitLab side, MR 1203:
Basically, GitLab CE/EE sends refspecs parameter to GitLab Runner gitlab-org/gitlab-foss app/presenters/ci/build_runner_presenter.rb: this parameter is to used in GitLab Runners for fetching branch/tag refs from remote repository.
This change was introduced because we wanted GitLab Rails side to leverage respecs in order for issue 7380 "Combined ref pipelines (source+target branch)" though, there should not be a big difference between git clone $URL or mkdir $REPO_DIR && git remote add origin $URL && git fetch +refs/heads/branch_name:refs/remotes/origin/branch_name.
In fact, the new behavior has already run on our development project
https://gitlab.com/gitlab-org/gitlab-ce/pipelines and has no issues so far.
Issue 4097 was opened at the time
Workaround
Use HEAD when you want to push this to another remote.
deploy:
stage: deploy
script:
- git remote add heroku https://heroku:$HEROKU_API_KEY#git.heroku.com/<project>.git
- git push -f heroku HEAD:master
So don't push master. Push HEAD.
The OP Adam uses another workaround and add:
before_script:
- git checkout master

How to use Custom Hooks with GitLab CE on Ubuntu 20.04 - VPS?

RESUME
When I push from my local workspace to the target repo in GitLab on my remote VPS, I want GitLab run a script and ask a beta repo on the same VPS to git checkout and pull in order to check my changes.
Current configurations
Gitlab configurations
Suppose you already have a project in your admin area, you just need to get it's relative path
Admin area > Projects
Select your project
Get the path in the project profil (hashed for this case)
Create a new directory in this location called custom_hooks.
sudo su
cd /var/opt/gitlab/git-data/repositories/hashed/path/of/project
mkdir custom_hooks
Inside the new custom_hooks directory, create a file with a name matching the hook type. For a post-receive hook the file name should be post-receive with no extension.
cd custom_hooks
nano post-receive
Write the code to make the server hook function as expected. Hooks can be in any language. Ensure the ‘shebang’ at the top properly reflects the language type. In that case the script code used is :
#!/bin/sh
unset GIT_INDEX_FILE
cd /var/repo/beta.git && git checkout master && git up # --[see the note 2 below]
Make the hook file executable and make sure it’s owned by Git.
chmod +x post-receive
Note 1 :
You can find more informations about git hooks here : GitLab Documentation : Server hooks
VPS configurations
Create new alias with #RichardHansen recommandations
git config --global alias.up '!git remote update -p; git merge --ff-only #{u}'
Note 2 :
During my researches, I've found an interesting answer about git pull on the forum.
I've decided to follow that advice and I made an alias named git up.
What is important is that :
it works with all (non-ancient) versions of Git,
it fetches all upstream branches (not just the branch you're currently working on), and;
it cleans out old origin/* branches that no longer exist upstream.
You can find more informations about "In what cases could git pull be harmful ?" here :
Link to answer
Create a directory for git repos only and access it to process Hooks configurations
# Create a repo for the project in apache area
mkdir /var/www/beta
# Create the git repo only folder
cd /var
mkdir repo && cd repo
# Create git repo and init
mkdir beta.git && cd beta.git
git init --bare # --bare means that our folder will have no source files, just the version control.
# Add gitlab remote
git remote add gitlab
# Accessing hooks folder to create script
cd hooks
cat > pre-receive
# On the blank line, write this script then 'ctrl + d' to save and press enter to exit
#!/bin/sh
unset GIT_INDEX_FILE
git --work-tree=/var/www/beta --git-dir=/var/repo/beta.git checkout -f
# Make the file executable
chmod +x post-receive
Note 3 :
'git-dir' is the path to the git repository. With 'work-tree', we can define a different path to where the files will actually be transferred to.
The 'post-receive' hook will be looked into every time a push is completed and will set the path where the files will be transferred to /var/www/beta in that case.
Local Workspace configurations
# Create in your workspace a folder to hold the project
cd /path/to/workspace
mkdir project && cd project
# Initialize git and add gitlab remote
git init
git remote add gitlab ssh://user#mydomain.com/gitlab/path/of/project
# Create an index.html file and send the initial commit
nano index.html
# copy this into the file then 'ctrl + x' then 'y' then 'enter' to save
<html>
<head>
<title>Welcome to Beta domain!</title>
</head>
<body>
<h1>Success! The beta virtual host is working!</h1>
</body>
</html>
# prepare the changes and then send the commit
git status
git add index.html
git commit -m "chore: add index.html :tada: :rocket:"
git push gitlab master
EXPECTED RESULTS
The expected result of this process is that when the git push gitlab master is done, the hook inside the gitlab hashed directory of the project, run a script who make something like this :
# Access the beta.git directory
cd /var/repo/beta.git
# Run command for updating repo
git checkout master && git up
# If we access the beta folder in apache area we should see index.html
cd /var/www/beta
ls
--index.html
ACTUAL RESULTS
No result.
ERROR MESSAGES
No error messages.
REQUEST
How can I set up a process like this one ?
There is something in my process I did not take in consideration ?

Merged code from repo not updating in production server after push

I have a post-receive hook in my server.
I also have a remote repo(origin) (branch:stage) where another developer pushes to.
I pull the commits and push them to production from my local computer.
I recently created a new branch(feature) from the latest head of the existing branch(stage), added some code and pushed the feature branch to remote repo. I merged the new features from feature branch to stage branch.
Then I pulled from the remote repo to local.
Now, I pushed the stage branch to production.
My post-receive file consists:
git --work-tree=/path/to/project --git-dir=/path/to/project.git checkout -
f stage
My head in the remote repo after merge is currently at ae228b9.
And, at the remote production hook's latest logs also points to ae228b9.
The problem is that the code from the merge are not seen in the production server.
Do I have to do something else to get the merged code to production?
After I pulled from origin and pushed to production, I tried changing the new files locally, committed them and push to the server. But, the changes are not reflected in the server.
Edit:
Also, I uninstalled apache php mysql and installed them again. Before the unistallation/installation, the home page was showing in server but the routes were not working(404 error) but the git hook was working. After the unistallation/installation, the git hook stopped working
Update:
I created a new hook with the same code as above. Now during the push I get:
remote: error: unable to unlink old '.gitignore' (Permission denied)
remote: error: unable to unlink old '.htaccess' (Permission denied)
remote: fatal: cannot create directory at '.idea': Permission denied
I tried the following code inside my project folder and project.git(hook) folder:
sudo chmod -R ug+w .;
unable to link
after which the push is a success but the changes are not reflecting.
I solved this by deleting the contents of the project folder and pushing again with some new changes.
I faced the same issue(Azure deployment)
There are two ways to ways to handle this -
Increase timeout setting (but deployment may stuck some times)
Push new changes (redeployment)
I prefer 2nd option.

Not able to push code in Git from Travis CI cloud for node

I have already gone through the previous post related to my problem and I checked every steps described there. But till my problem does not get the solution.
1)I am trying to use Travis CI cloud (not any CLI client as I have to only work with cloud)with Github login for public repository for end to end integration for node project.
2) After test with Travis I use the Istanbul for code coverage and push back to Git the coverage report which will be further use by Sonar cloud.
3) The link for my project and travis.yml : https://github.com/arpitajava/ZynlaNew
4) I have created the personal token in Git Hub for Travis and set as GH_TOKN as env variable in Travis page as well as .travis.yml
5) Every steps in the .travis.yml file is executing fine expect the last step git push.
$ git commit -m "Travis build" Travis build
16 files changed, 1951 insertions(+), 1 deletion(-) It is showing that
it committed 17 files after git commit execution.
$ git push origin
master remote: Invalid username or password. fatal: Authentication
failed for 'https://github.com/arpitajava/ZynlaNew.git/' Done. Your
build exited with 0.

Resources