Ninja Space Content Blog

Pushing existing react files on GitHub with issues and solving them

January 3, 2021
Happy New Year, guys!

I had a couple more GitHub issues today when I tried to get my local files on GitHub, but finally solved them.

Today, I'm ready to deploy my first week's work on my current project on Heroku but before I do that, I needed to put my local files onto git and GitHub. I had issues with my React project not rendering onto my localhost properly earlier this week after I had tried to 'git init' it. I had to keep creating new files so to not delay my dev process, I have been working locally on my computer without backing it up on git.

Thankfully, I made good progress this morning. I git init just earlier today and everything still renders as expected. Finally! I think the main problem that kept getting repeated several days ago was that I had followed instructions from the documentation from GitHub from this particularly link to a T: https://docs.github.com/en/free-pro-team@latest/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line and I had to change a couple of things. If you're encountering the same problems, these are the two things that I had to do differently below: 

(Note: I'm using dark pink to note what I had to use to work, and orange to signify what GitHub said to do.) 

I Used the following to work:
git init 

and not git init -b main as noted in above doc link as the first command in the terminal from GitHub.

I Used the following to work:
git push --set-upstream origin master

and not git push -u origin main as noted in the above doc link as my last command in the terminal from GitHub.


Besides for changing the two commands up there, the other commands worked for me.

Here were my exact steps below (my working terminal commands are in bold black)
  1. I created a new repository (aka repo) in GitHub.
  2. I opened my terminal and made sure I cd in the working directory of my files.
  3. I followed the GitHub doc and initialized it by typing in git init -b main, but it returned an error message. So then, I just tried the simple command: git init instead and it worked for me.
  4. I added all the files to git following the documentation: git add . and it worked.
  5. Then, I committed the files I've staged with: git commit -m "First commit" and it worked.
  6. I went back to my GitHub repository and copied the remote repository URL
  7. I went back to the terminal I was working in and did the following commands: git remote add origin https://github.com(my remote repository URL).git
  8. Then, the following command: git remote -v 
  9. The last step from GitHub's doc said to use git push -u origin main, but it didn't work for me so I typed: git push and then in return it said to use this in the terminal: git push --set-upstream origin master and so I copied and pasted it into my terminal command (then of course, hit enter); and it worked!
All of my files are now in the GitHub repository! I'm going to follow these steps from now on. I'll continue to document as many issues and workarounds as I can on Ninja Space Content so that I may go back and refer to them. I also hope this will help anyone who encounters the same issues.
 

Working with Nodemailer and Express to create a Contact Us form

December 31, 2020
For the last 24 hours, I have been working on my Contact Form and I have it up and running now. However, no surprise here, I didn't do it without some errors at the beginning. I found some sources that I want to document here to look back on for the future for the next Nodemailer build out.

Here are the three resources on Nodemailer that I looked at: 
https://lo-victoria.com/build-a-contact-form-with-react-and-nodemailer
https://w3collective.com/react-contact-form/
https://nodemailer.com/about/

I use Express for my server, and React for my front end. If you're like me, I can't just look at one resource and figure it out. It takes me a good amount of time to research and then when I feel comfortable enough with the big picture of everything, I'll start typing code.

I found that the three resources at the top were very helpful. They first two links use gmail as an example, which is what I am using for my Contact Us form that I've been working on, and the same tech: express, node and react. The last link listed above is Nodemailer's official doc, which I highly recommend reading first. 

The main problem I ran into on the server side involved my gmail credentials. This was the error message that I received in my terminal: "Error: Invalid login: 535-5.7.8 Username and Password not accepted."

There were two main issues that were causing this problem for me. First, I mistyped my password and finally, I needed to go into my Google account settings to turn on the following: Allow less secure apps

(More info on Less secure app access from Google directly: "Some apps and devices use less secure sign-in technology, which makes your account vulnerable. You can turn off access for these apps, which we recommend, or turn it on if you want to use them despite the risks. Google will automatically turn this setting OFF if it’s not being used.")

So, you'll want to go to Google, then Settings, then turn ON the Allow less secure apps part. This will allow the Contact Us form to work and send information from the form to the particular gmail account.

After correcting my password and turning on the "Allow less secure apps" toggle, I was finally able to receive messages from my Contact Us form on my dev site to this gmail account from during dev.

I haven't done a git init for this new project that I am working on yet because as mentioned earlier this week in another blog post, I was having issues with the package.json file being changed when I git init-it; and then this caused my react app to not render anything on the page. I am still figuring this one out. It doesn't make any sense to me but I am a noob so I will try, and try again. 

However, I want to note that I put my email username and password in a .env file and using a dotenv library via Node to secure my important information. 

I am not familiar with using hidden variables via Netlify so I am going to use Heroku for this new project as I've used the hidden variables for JWT token and API Keys with Heroku in the past during my coding bootcamp cohort program. 

I'm still working on some more things on the new project but once I have it ready for show, I'll include the link here so you can see my new Contact Us form that I used with Nodemailer.

UPDATE (1/4/20): I got my files onto GitHub successfully, but then when I deployed to Heroku, the Contact Us form doesn't work, saying there was an error connection. Exact message was: POST http://localhost:4000/send net::ERR_CONNECTION_REFUSED in my console. Things I had to add to get my Contact Us form to work on Heroku:
  • Add "proxy": "http://localhost:4000", to my package json
  • Make sure I have all of the following scripts. I was missing "node index.js". Example: "scripts": { "start:client": "react-scripts start", "start": "node index.js", "start:dev": "nodemon index.js", "build": "react-scripts build" }
  • Add path join like so: const path = require('path'); server.use(express.static(path.join(__dirname, 'build'))); server.use((req, res, next) => { res.sendFile(path.join(__dirname, 'build', 'index.html')) });
I'm still working with this project right now but at least the form works on Heroku as well now. I'll add more updates as I encounter more bugs.
 

Adding existing local directory to a new GitHub repo

December 30, 2020
This week seems like a GitHub week for me. Managing files, looking up terminal commands to get my files properly backed up and remembering it all are taking me hours this morning.

I've successfully cloned my old repo earlier today using my two-factor authentication and right now, I've just created another new repo to back up an older jQuery project that I had built months ago. I ran into a couple of issues getting my jQuery project onto GitHub but after some digging, I got it up there now. I didn't originally do a git init for this when I was working on this project because I hadn't learned it yet. Now that I've graduated from my coding bootcamp, I am going back and making sure I have these files on GitHub. Here were my steps below.

(It didn't ask me for a password or token this time like my clone project had asked me due to two-factor authentication so that's one less step I had to make for this one! You can read more about this two-factor authentication that I had to do.)

First, I created a new repository on GitHub on their website and then copied the file name by clicking on the green "Code" button. 
Then, I went into my local file where my jQuery project files are and cloned it with the following in the terminal:
git clone http://github.com(my New GitHub file name).git

Then, I needed to get this local directory to git so I did a git init command in the terminal with this:
git init

Then I tried to add all of my files to git by typing:
git add .
but it was giving all sorts of errors and by googling it, someone said they had to add the files one by one so I had to do that. For example:
git add app.js (hit enter)
git add index.html (hit enter)

and so forth. Then, when I typed git status those files showed up green now so by adding individual files one by one, it worked!

So then, I committed it with:
git commit -m 'my message'

And then typed git push and it provided me an upstream command that I copied and pasted and now my jQuery files are up on GitHub. Yay!
 

Using Two Factor Authentication to clone my repository in Github

December 30, 2020
I had issues with cloning my repository today. It's related to my Two Factor Authentication that I enabled recently. For documentation purposes to help myself in the future and anyone else reading this, this is how I got it to work. Note that things in black bold are what I typed in my terminal and the things in sky blue are what the terminal responded with to make it easier to read through.

Before I started any terminal commands, I went into the GitHub site and created a new repository (I used the plus sign button) and then went onto my desktop and created a new folder name. Both of these are for my clone that I am about to explain in detail below. Here we go! (Sorry, too much Jamesify)

First, when I attempted to git clone https://github(my old GitHub repository).git in my terminal in the new folder I was in, I got this message immediately:
"remote: Invalid username or password."
"fatal: Authentication failed for 'https://github(my old GitHub repository).git'.


So, then I realized I needed to supply one of my tokens now (after you enabled two-factor authentication with GitHub, they supply you a list of tokens and you save them in a safe place to use) with my username and password. So I tried the following in my terminal:
git clone https://(my old GitHub repository) Username: tillyninjaspace Password: xxxxx-xxxxx 
(Note: I replaced my Password token with "x's" for security purposes.)

I got access now (YAY!) but then got returned the following:

fatal: Too many arguments.

usage: git clone [<options>] [--] <repo> [<dir>]

    -v, --verbose         be more verbose
    -q, --quiet           be more quiet
    --progress            force progress reporting
    -n, --no-checkout     don't create a checkout
    --bare                create a bare repository
    --mirror              create a mirror repository (implies bare)
    -l, --local           to clone from a local repository
    --no-hardlinks        don't use local hardlinks, always copy
    -s, --shared          setup as shared repository
    --recursive ...       alias of --recurse-submodules
    --recurse-submodules[=<pathspec>]
                          initialize submodules in the clone
    -j, --jobs <n>        number of submodules cloned in parallel
    --template <template-directory>
                          directory from which templates will be used
    --reference <repo>    reference repository
    --reference-if-able <repo>
                          reference repository
    --dissociate          use --reference only while cloning
    -o, --origin <name>   use <name> instead of 'origin' to track upstream
    -b, --branch <branch>
                          checkout <branch> instead of the remote's HEAD
    -u, --upload-pack <path>
                          path to git-upload-pack on the remote
    --depth <depth>       create a shallow clone of that depth
    --shallow-since <time>
                          create a shallow clone since a specific time
    --shallow-exclude <revision>
                          deepen history of shallow clone, excluding rev
    --single-branch       clone only one branch, HEAD or --branch
    --no-tags             don't clone any tags, and make later fetches not to follow them
    --shallow-submodules  any cloned submodules will be shallow
    --separate-git-dir <gitdir>
                          separate git dir from working tree
    -c, --config <key=value>
                          set config inside the new repository
    --server-option <server-specific>
                          option to transmit
    -4, --ipv4            use IPv4 addresses only
    -6, --ipv6            use IPv6 addresses only
    --filter <args>       object filtering


So I had to try something different and decided to do a ---bare clone first using this in my terminal: 
git clone --bare https://github.com(
my old GitHub repository).git

And it returned with these promising lines:
Cloning into bare repository '...'
remote: Enumerating objects: 32994, done.
remote: Total 32994 (delta 0), reused 0 (delta 0), pack-reused 32994
Receiving objects: 100% (32994/32994), 31.14 MiB | 16.66 MiB/s, done.
Resolving deltas: 100% (7710/7710), done.

Great! So now after I have successfully done a clone --bare, I tried to just do a straight up clone again with the following command: 
git clone https://github.com(my old GitHub repository).git

And it responded positively this time with the following lines: 
Cloning into '...'
remote: Enumerating objects: 32994, done.
remote: Total 32994 (delta 0), reused 0 (delta 0), pack-reused 32994
Receiving objects: 100% (32994/32994), 31.14 MiB | 16.66 MiB/s, done. 
Resolving deltas: 100% (7710/7710), done.

Now, I need to make sure I am at the very file I need to clone this old repository to. This step is very important. I typed 'ls' to see where I'm at and sure enough, I wasn't in the right folder in my terminal so I 'cd' into the folder that I needed to clone the old repository into. This is the new folder I created that I mentioned at the beginning of this post.
So, after I made sure I was in the right folder, I wrote the following command to include my new GitHub repository:
git remote set-url origin https://github(my NEW GitHub repository).git
I didn't see any messages returned to confirm anything but to not lose track of where I was at, I continued. I now have to push the files I had just cloned to my new Github repository so I did the following command:
git push

And the terminal did the following:
Enumerating objects: 32994, done.
Counting objects: 100% (32994/32994), done.
Delta compression using up to 8 threads
Compressing objects: 100% (23680/23680), done.
Writing objects: 100% (32994/32994), 31.14 MiB | 1.60 MiB/s, done.
Total 32994 (delta 7710), reused 32994 (delta 7710)
remote: Resolving deltas: 100% (7710/7710), done.
To https://github.com/tillyninjaspace/fitness_trackr_react.git
 * [new branch]        main -> main

I went to my new GitHub link on my browser and Voila! All my files are in my new repository now. My clone worked. I hope this will work for you as well. Also, I only had to use the password and token once to authenticate this whole process at the beginning. I don't know why I had to do the bare clone first. It doesn't make sense to me but I tried it and it worked for me. Maybe you can find a better way.
 

Updated to macOS Big Sur and enabled two-factor authentication for Github

December 29, 2020
Making sure all the tech, files, codes, branches and operating systems are up-to-date is a job in itself! I updated my operating system to Big Sur and am enabling my Github to two-factor authentication.

Today, is the first day I checked out my new macOS interface with Big Sur and I love it! Big Sur is located a couple hours from me and is such a beautiful place so I have such a good feeling about this operating system.

This morning, I also updated my settings in Github to enable two-factor authentication using sms messaging. It's mandatory to do that now because "Basic authentication using a password to Git is deprecated and will soon no longer work." I got that exact message in my email inbox from Github when I was trying to push my files to Github yesterday.

Another weird thing I'm having trouble with is when I am working with React, it works and runs fine until I push my files to Github, then it breaks. I know it has to do with the changes in package.json when I do that so right now I am just going to work in my files without pushing to Github, which sucks but I'll have to figure that one later.

Update: I figured out how to clone a repository using the new Two Factor Authentication via GitHub. Read more.
 

About Ninja Space Content


Ninja Space Content I have been building simple websites on my own since 2008 and currently run several websites at the moment, including this one. I used to be an account manager for an affiliate/e-commerce company, helping affiliates grow their sales so I have some knowledge on the business side and client side of affiliate marketing. Most recently, I decided to complete a coding bootcamp and have just graduated.
Note: links to resources and promoting special deals may allow me to earn a commission from each sale.