Ninja Space Content Blog

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!

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')) });

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!

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:

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.