Ninja Space Content Blog

I had an interview with one of the big six companies earlier today. When I say 'big six', I'm referring to one of the following: Amazon, Facebook, Google, Netflix, Apple or Microsoft. I'm not going to tell you which one because I signed an NDA and I want to go further and don't want to jinx anything by telling you the exact one. I'll let you guess!

The company had me do 4 interviews in one day and because we're still in a pandemic, it was done remotely. Normally, they would have me come to their office for these back-to-back interviews but I was thankfully able to do this all from my home via video conferencing.

I've never been interviewed by a big six company before so this was a very unique and intense interview day. I'm pretty exhausted from the mental stress of doing this but I understand why they do it. They want to make sure they get the right candidate for the job. They're the best tech companies because of the people they hire.

There were technical parts and behavioral parts to the questions they were asking me. Each interview was 50 - 1 hour long. I had 30 minute breaks after the first two and only a 15 minute break between my third and fourth interview. After the near 5 hour process, I was really beat.

Before the first interview started, I was so nervous. With four interviews in one day with 6 different people, I was questioning why I am putting myself through this mental anguish when I felt that I wasn't ready yet. I started doing the chicken dance around the house to get my nerves out before my interview process started. It didn't seem to be working.

I jumped up and down and started doing chants while swinging my arms in crazy motions. I really thought I was losing my mind. I've never been so nervous for an interview before. I just graduated from a coding bootcamp in Dec 2020 and doing a carrier shift. It was humbling to meet my interviewers, who are so advanced in their careers and you can just tell that they are all so intelligent.

All in all, even if I don't get the job (which they said I would find out whether I do or not next week), I know what I need to work on to increase my chances of getting hired. If you're actively interviewing like me, hang in there. Make sure you're finding the job that fits your exact skillset.

Here are the steps that I took to deploy my React App today: 

1. First sign up for a free AWS account
2. Create a new app in AWS Beanstalk
3. Use git to bundle my source according to instructions here: $ git archive -v -o myapp.zip --format=zip HEAD
4. One thing that I noticed that AWS Beanstalk looks for to run the files in there server.js (back-end) and client folder (front-end). So I'll need to make some changes. Example: my server file should be named server.js and not "index.js" like I have now. Also, they run the server on PORT 8081. So if you've configured your PORT to 4000 or whatever in your file, you'll need do a configuration change or I'm just going to try to change it in my file directly.
5. (Still in process to deploy -- stay tuned)

Through GoDaddy, I pay shared hosting for one of my React apps. It was quite easy. After I run a build, I just drag over some files and then it was done.

Steps to use Cpanel from Godaddy's Shared Hosting to host a React App

Here are the steps I took to complete the entire hosting process:

1. After you've logged into Godaddy with your account information, go to the cpanel File Manager part of Godaddy for your hosting account. Go to 'settings' to check the box next to "Show Hidden Files" or you won't be able to see the .htaccess file you're going to create for the build in step 3.
2. After you've build out the "build" folder of the React app on your IDE, you'll have to have those files and sub-folders under that build folder uploaded to the public_html folder of your File Manager in Godaddy. Remember to upload the individual items under the "build" folder and not just the entire build folder. One thing that I had to improvise from a lot of the instructions I've found on the web for this was I couldn't just simply copy and paste my static folder within the build folder over to the file manager (Note: I don't have FileZilla). After moving the other files, what I had to do was manually created a 'static folder' and two more sub-folders: 'css' and 'js'. Inside the css and js folders, I then copied the corresponding files to upload them there. 
3. Within the same level of your build files, you'll need to add an .htaccess file and edit it's content with the following:

   <IfModule mod_rewrite.c>
   
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /index.html [L]
   
   </IfModule>

   Then, click "Save Changes".

My site successfully deployed on the Godaddy shared hosting account by utilizing these 3 main steps listed above.

Some helpful resources on this: 
https://stackoverflow.com/questions/40146067/i-have-godaddy-shared-web-hosting-i-need-to-host-node-js-website-can-host-site

https://medium.com/@pampas93/host-your-node-js-app-on-shared-hosting-go-beyond-localhost-73ab923e6691

My tech stack for the React app included node.js and express as well.

The files you will need to upload include everything in the build folder where you built your React app and then manually create the "static" folder, the two sub-folders and go into them individually and upload the files to all of the sub-folders. I hope that's helpful!

Updates to make in React App and what files to change in the Cpanel

When you make an update to your React code and run a build. You'll need to update a few files for hosting, of course. This changes are in the Public folder of the Godaddy Shared Hosting Cpanel. They include the asset-manifest.json, index.html and inside the static folder that's inside the public folder: everything in css folder and everything in js folder. 

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