Ninja Space Content Blog

Today for 3 hours in the middle of the night between 2AM - 5AM, I was on a mission to update my react app to use Vite!

I had to use about 3 different resources to get my app to render correctly. In the past, I've only mainly used npm commands and had never used yarn or Vite before so I've beefed up my stack today!

I followed these instructions by slushman to almost a "T".

What I got stuck on was getting my components to render. I had to change how I was importing reactDOM. The line that I had to change to was the following in the main index.jsx file: import ReactDOM from "react-dom/client";

Then, at the end of my index.jsx file, I had to make sure I rendered it like this:

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( .... );

After I was able to get the components showing, I wanted to update my Godaddy Cpanel to reflect the changes that I made immediately. I knew that if I waited for the next day, I might not get to it until way later.

Because I had uploaded a React App on Cpanel before (read this blog entry that I wrote), I only had to change 3 files that were located in the Build folder after I had built it out with the 'yarn build' command! What a night, err...almost morning now! I will have to delete my old files later from the 'public html' directory on Cpanel. I'm currently curious if it'll affect how my pages are served with those old file names still in the directory. However, I'll wait a couple of days before removing them.

Although you can read my blog entry about how to upload your React App using the Cpanel on Goddady, here's another great resource on how to use Godaddy to deploy an app: https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6. that may be helpful as well.

This year has started out very interestingly.

I had realized my Google Adsense ads were not showing anywhere on my other higher trafficked blog. I never had this problem before and I've had Google Adsense ads on the website for over 5 years. The first thing I did was looked into the auto-ads configuration. I didn't have it activated before, so I went ahead and did that and copied and pasted the script to the header. That didn't fix it. 

New Adsense Rules for 2025

Then, this morning, I looked under my 'Sites' list under Google Adsense under my account and noticed that my Ads.txt status was "Not found"! I don't know why I never saw this before, but it never stopped my ads from showing up prior to January 2025.

A Solution By Using Page Rule Under Cloudfare and Hosting Via Cpanel for a Different Site

Since I use a CMS to create my higher trafficked site, my domainame.com/ads.txt could not serve this ads.txt file as intended. The way that my CMS sets up my website is there is another directory for all media and files. Any of my files are not uploaded to the root level, including TXT files. I had to figure something out.

I clicked on the question mark bubble next to the Ads.txt status and it said I needed to upload the ads.txt file in a particular format at the root level.

Here's the article on how to do that from Google Support:
https://support.google.com/adsense/answer/12171612?sjid=15529272850796857791-AP#create. The content of the ads.txt should look like this:
google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0

The pub-0000000000000000 needs to be your personal Google Adsense publisher ID. Since I use Cloudfare to have an SSL on my domain, I went in there and attempted to add the file under the root directory. Of Course, that didn't work because my pages are hosted from my CMS. So, after doing some research, I attempted to add a Page Rule under my Cloudfare account.

I also have a React web app that I use Godaddy Hosting to host the pages. I pay over a hundred dollars each year for hosting for that. I might as well take advantage of it and use it as the main way to store other files to help my other sites. Using the Cpanel, I uploaded my ads.txt file at the root level of that web app with the goal to create a Page Rule under Cloudfare for my higher trafficked website so that it will redirect there. Well, today, I've successfully done that so now, I'm just waiting for Adsense to crawl the page. The waiting game begins...

According to Google Adsense, "It may take a few days for AdSense to automatically crawl and verify your ads.txt file. Wait at least a few days for your ads.txt status to update. " So I just had to be patient.

Google Adsense Successfully Crawled the Ads.txt File the Next Day

The next day, I checked my Google Adsense account under 'Sites', and saw that it's been successfully authorized. My screenshot is below. So, if you add the ads.txt file property or in my case, add a Page Rule redirect properly, it could take just 1 day.

And now, I'm not panicking as much, but I still can't see my ads and I wonder if it has to do with my VPN?

Later in the evening, I worked from my other laptop. All of a sudden, my ads from this tech blog finally showed up. I did not add any auto-ads code from Google Adsense. However, I did add the auto-ads code to my other higher trafficked site and Google Adsense ads were still not showing. So, I decided to do a test. I removed all of the code for auto-ads from Google Adsense from my higher trafficked site, and all of my Google Adsense ads finally showed up! I think Google Adsense was just malfunctioning yesterday. It's unclear? For some reason, those auto-ads made it worse, and didn't help.

I just realized today that I cannot create a react app with the 'create-react-app' command in my terminal anymore. It has been deprecated by Meta and they manage React.js!

After some research and reading their documentation, I've attempted to learn to use Next.js for the first time, which works with React.js and ran into my first issue. I kept getting this error in my terminal: Cannot find module 'fs/promises'.

Installing Next.js for the First Time and Updating my Node Version

After I installed Next.js in my working directory, I had to figure out how to get rid of the error message: Cannot find module 'fs/promises'. So, my first attempt was to upgrade node because my machine was still at v12.18.3 and the current version today is v20.10.0. I had to catch up!

My first attempt worked to fix that error message in my terminal worked! After I upgraded my node version, the Cannot find module 'fs/promises' error message went away. Here are the questions you'll see and have to answer in the terminal when typed the following command: npx create-next-app@latest to use Next.js:

--copy and pasted from terminal--
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y) y
✔ What is your project named? … winter-portfolio
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
? Would you like to use Tailwind CSS? › No / Yes
✔ Would you like to use `src/` directory? … No / Yes
? Would you like to use App Router? (recommended) › No
✔ Would you like to use App Router? (recommended) … No / Yes
? Would you like to customize the default import alias
✔ Would you like to customize the default import alias (@/*)? … No / Yes

It asked a lot of prompts, which I appreciated because I realized that I was going to be using Tailwind CSS for the first time!

After everything was installed, I ran the dev command to see it on localhost 3000 on my machine. See the package.json file for the exact script command! I liked the broiler plate and started editing it right away to make my simple portfolio site.

Deploying Manually with an 'Out' Folder by Modifying the next.config.js File

After editing the html and content in the page.tsx and the css in the global.css file with my own stuff, I was ready to deploy it. I like deploying manually in Netlify so I did a bit of research online and realized all that I needed to do was edit the next.config.js file to create an 'Out' Folder and when I run my build command, it'll automatically create one. This is what needs to be changed in that next.config.js file before running the build command in the terminal: /** @type {import('next').NextConfig} */ const nextConfig = {output: 'export'} module.exports = nextConfig

After I edited that file with the code above, I ran the build command and found the 'Out' Folder in my directory. I just drag that 'Out' Folder to the deploy page in Netlify and it was done and published! It was quite easy. I had a already bought a domain from Netlify and had to drag it to the right site.

This was all in a day's work. If you've used the create-react-app command for React in the past, learning Next.js should not be too hard.

Installing Google Analytics Tag for Google Analytics G4

After deploying successfully, I spent the next few hours figuring out the easiest way to get Google Analytics tracking installed on my Next.js website. The simplest way is create a new tag for the Google Analytics GA4 property that you want to use under Google Tag Manager and copy that script (will need to change the format a bit so it's compatible). Then, using that code that you copy, you'll create a Script tag in your code editor with that code. I saw it in real-time reports immediately. Before being able to generate a Google Analytics tag, you'll need to make sure you have a Google Tag Manager and Google Analytics account already set up. Thankfully, they are both currently free to have an account with.

When I was in a coding bootcamp, we were using Heroku with heroku-18 on a free version to deploy projects. However, Heroku is drastically changing things. Last November, Heroku eliminated the free version and heroku-18 is now deprecated and will reach end-of-life on April 30, 2023! 

All of my databases and API end points were down for a month because I was hosting all of them on Heroku via their now deprecated free version. After a couple of hours looking at documentation on upgrading, I got one API back up.

Below are my outlined steps that I took to upgrade my heroku-18 to heroku-22 and subscribe to their lowest tier plan, Eco Dynos. For Steps #1 - #5 below, I followed the steps from Heroku, which you can view on their website from this link: https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack. I made a couple of modifications because of the way my app was already set up. They recommend that you do a test first which you should, especially if a lot of users are currently visiting your app.

Steps:

1. I went into my folder where my app sits on my computer and opened it up in VSC. I use Visual Studio Code (VSC) as my IDE.
2. In the command line, I typed the following to upgrade to heroku-22: heroku stack:set heroku-22 -a 
3. After that was successful, in my command line within the app in VSC, I typed: git commit --allow-empty -m "Upgrading to heroku-22"
4. Then, I pushed it to heroku master for deployment with this command: git push heroku master
5. Unlike the instructions, I had originally deployed this with heroku master and not heroku main. Yours might be different. Then, I typed in the command line: heroku info to make sure it is listing heroku-22 for Stack and it did.
6. Then, I logged into my Heroku Account via their website and now went through the app to add the postgres add on for an additional $5 per month so that I can use my database and also subscribed to the Eco Dynos plan for $5 a month under the "Resources" section. Good bye, money. 
7. After adding my postgres package to the heroku under my plan, I now have to seed the data onto heroku on the command line. Uniquely for me, it is: heroku run npm run seed because I had set up my app this way and I use Node.
8. To test that my postgres add on has been done successfully, I did a query on the Dataclips interface from Heroku and saw data when I did a query like this: select * from activities; because one of my tables is named 'activities'. Great, I saw data on Dataclips via Heroku! However, I could not see anything on my API end point URL. I was racking my brain for like 25 minutes because I knew I added the Eco Dynos subscription and so I went back to my Heroku Log-in to check under the "Resources" section and noticed that it didn't automatically toggle it to the right to turn it on!
   
   Therefore, remember to turn it on and by toggling to the right side. After I did that, my API ends point worked again. JSON never looked so beautiful.

Pro

There is one pro from this heroku-18 deprecation. There is a lot of APIs that I created and don't care to keep up with so when heroku-18 deprecates and all of my app names under those disappear, it is just cleaning out the trash for me. I'm only concerned with 2 sets APIs and I finished deploying the first one today with the upgrade and subscription (see my 8 steps above).

Con

The con from all of this change is I'm going to have invest and pay the $5 per month (I chose the cheapest plan called Eco and Basic) for the APIs that I want to still work on and also the additional $5 a month on top of that for the postgres database add on. 

Cost

It is going to take cost me $120 for this server and database to run on Heroku per year but since it is my main full stack portfolio piece, I'd like to keep it up on Heroku for now.

It took a good full 2 hours for me to read the documentation on upgrading, subscribing and adding on today on Heroku and to also go through my 8 steps above. I know if I decide to still do this for my second database, it'll be faster the next time around.

Recently, Google Analytics is always showing a top banner to remind Google Analytics users that UA (Universal Analytics) is going away on July 1, 2023 and we'll need to embed the G4 code instead. 

The Google Analytics banner message says: "Universal Analytics will no longer process new data in standard properties beginning July 1, 2023. Prepare now by setting up and switching over to a Google Analytics 4 property." Now, it's still over a year away from today's post before UA goes away but I'm starting to add the G4 code to the head of my site whenever I'm already having to go into the files to update something on any of my websites so that I can start to compare and contrast the differences of the reports.

I've already added the new G4 code to at least 5 of my websites. First off, I quickly noticed that there are less options for reports on the left side menu for G4 reporting but maybe that's a good thing because I didn't and still don't always use every sub-menu feature of Universal Analytics. Here are other differences that I noticed:

Realtime Reporting Differences
Another obvious difference right off the bat between the two versions is Realtime Reporting. Realtime Reporting for the G4 shows more users on my site at any given time than UA Reporting. I think that's because they are keeping the time frame the user enters a page wider for that report. For instance, I may see 3 users on real time reporting on G4 while I would only see 1 for the UA code on realtime; and I'm opening both side by side at the same time so it's been interesting. I particularly like the map of my realtime users of the G4 Realtime dashboard! It's wonderful!

Reporting on the Current Day
While I like that the G4 Realtime Reporting is reflecting cool features and showing a larger number of realtime count than the UA Reporting realtime count, if I were to want to go into an overview of today's analytics, G4 doesn't seem as accurate as the UA for that. There would be mornings where I'd go in to see how many users have gone to my sites today and there could be 20 users reflected on the UA reports but only 3 for the G4 reports. I'm assuming it's taking longer for G4 to pull today's number up to the minute. Maybe this will get better as we get closer to 2023. We'll see.

Do I like G4 better than UA?
Thus far, I think I do like G4 better. I think keeping realtime user count for any user within a wider timeframe is good. Many times if I see a realtime user is currently on my site from Google Analytics, I would refrain from publishing an edit until I see that count to 0. I don't wait until in the middle of the night to publish an edit for many of my sites because sometimes my content needs to be updated to reflect accuracy on event details. So keeping that range wider is reducing the possibility that a user is landing on my site while I'm in the middle of a publish and therefore, reduces errors for them.

I'll definitely add more to this if I've discovered anything more that I wish could be better or any other Pros and Cons.