Ninja Space Content Tech 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.

Posted by Ninja Space Content. Posted In : tech 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 Us 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 implementation.

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 used Express and Node for my server, and React for my front end. If you're like me, I like to take 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. The 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 stack: 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 I needed to fix at this point. 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 Allow less secure apps 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 your Google account, 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 locally while developing.

Also, I want to note that I put my email username and password in a .env file and used a dotenv library via Node to hide my personal information so make sure we all do that to all of our important proprietary information before we push anything to our Github repository! 

DEPLOYMENT
The first place that I deployed the app was on 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 and feel comfortable with it. Then, I started getting curious about getting a domain for it and purchased the domain: prettyscouts.com and to my surprise, the company gave me a free shared hosting plan for a year so I decided to utilize it. It's live on the domain now and here's the Contact Us form where I utilized Nodemailer: http://prettyscouts.com/contact. Since my shared hosting plan does not support Node.js, I had to improvise a bit and edit my code so that it calls to my Heroku URL for the Contact form part. I'm using a free Heroku plan so it does go to sleep and to wake up, it takes 30 seconds and most likely it will take you that long to send the form but I'm satisfied with it for now.

NODEMAILER DEPLOYMENT ON HEROKU NOTES (1/4/20):
After everything was up and running, I git init and pushed my code to GitHub, 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')) });
And then it fixed my problem.

NODEMAILER PROGRESS UPDATE (4/15/2021):
I kept having Nodemailer problems on Heroku using my google gmail account so after googling, I discovered that you'll need to double check to make sure you have Allow less secure apps accessing turned ON again for your Google gmail account that you listed for your Nodemailer because it goes back to turning it off again if it's not used after awhile! If that doesn't work, additionally, click on this link: https://accounts.google.com/b/0/DisplayUnlockCaptcha and check to see if it'll help. I also noticed that if I leave my computer for 30 minutes and come back to try the form again, I'd have to do the Unlock Captcha link again for my google account for it to work on deployment again. It was pretty frustrating. I felt like I needed to find a more permanent solution so I tried to use one of my Godaddy hosting email accounts but I keep getting this error: 

code: 'EMESSAGE',
response: '550 <> Sender Rejected - MAILFROM must be a valid domain. Ensure the mailfrom domain: ""  has a valid MX or A record.',
responseCode: 550,

My code looked like the following: 
service: 'Godaddy',
host: "smtpout.secureserver.net",  
secureConnection: true,
port: 465,
auth: { user: EMAIL, pass: PASSWORD, },

Another Attempted Solution: 
My CNAME for smpt originally was: CNAME   smtp   smtp.secureserver.net

I thought that I needed to set the CNAME to point to smtpout.secureserver.net so I changed that and checked back in an hour. It still wasn't working so I created an MX file with these values:

MX
Host thepacificbeach.com
Points to smtpout.secureserver.net
Priority 1
TTL 1/2 Hour

It still didn't get my Nodemailer to send so I decided to throw in the towel and just use gmail. I'd just always have to make sure the Allow less secured apps is turned ON via my Google account every once in awhile and check the captcha if I wanted to use it or demo it to someone. 

Then, after hours on StackOverflow, I found a more permanent solution. I reverted my Google account back to 2-Step Verification and when it did this, the account allowed me to create app passwords! All I had to do was create an app password and use this app password as the password for the Nodemailer, instead of my main password. This was a win-win situation! Now, I don't have to do the annoying captcha link anymore for my Google account to use the Contact Us form. Here's how my code looks: 

const contactEmail = nodemailer.createTransport({ host: 'smtp.gmail.com', port: 587, secure: false, auth: { user: EMAIL, pass: PASSWORD, }, });

And in my .env, the PASSWORD is the app password I generated. Now, it works like a charm. 


DEPLOYMENT on AWS Amplify: 
So after a couple of months, I wanted to dabble into AWS and get something deployed on there. I've successfully gotten this PrettyScouts app to deploy on AWS Amplify. It was so easy. Read the steps that I took to get this React App deployed on AWS Amplify in this blog entry.

I originally had a Nodemailer issue on AWS Amplify but found that I had to do the same tweak that I did for my Godaddy shared hosting account because AWS Amplify is server-less and I just simply had to change the code to do an API call to my Heroku link. This was a really great way for me to do a comparison on deployment to test between deploying on Godaddy's shared hosting account and AWS Amplify. I'm definitely gravitating towards AWS Amplify.

Here are the two deployed links of the same React app, utilizing Godaddy Shared Hosting and AWS Amplify:
Deployed on Godaddy Shared Hosting using custom domain: http://prettyscouts.com
Deployed on AWS Amplify: https://master.d27cizkq724af1.amplifyapp.com/

Posted by Ninja Space Content. Posted In : nodemailer 

 

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!

Github Repository Instructions Using Main Branch (2023 Update)

A lot of things has changed since I started coding bootcamp in June 2020 and today. Github no longer defaults to 'master' branch when you are push your files to your repository. I had to learn to make some adjustments and push my old notes away. First off, make sure you initialize before you can follow the steps from Github by entering git init in terminal. Then, you can add the below commands.

  • In the command line, I write: git remote add origin https://github.com/your-github-username/repo-name.git and after I do this, I created a new branch in VSC and named it 'main'.
  • After I am in my 'main' branch, I typed the following command: git branch -M main
  • Last, I type the following to commend to push my files to the GitHub repository: git push -u origin main

Starting my project with npm and react and installing packages

Since I use node with react, I always have to remind myself that I should initialize before installing packages. Remember to initialize with npm init and create your .gitignore file with node modules listed before installing packages. 

As of 2023, create-react-app is no more so I have to start learning Next.js.

Posted by Ninja Space Content. Posted In : tech issues 

 

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.

Posted by Ninja Space Content. Posted In : tech issues 

 

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.

Posted by Ninja Space Content. Posted In : tech issues 

 
« Newer posts
Older posts »
 

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. During the Covid-19 pandemic, I completed a JavaScript coding bootcamp and graduated in Dec 2020. I've been working as a contractor for a few software companies ever since.
Note: links to resources and promoting special deals may allow me to earn a small commission from each sale.