Ninja Space Content Blog

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.

To find all git files in your machine type the following in the terminal: find . -name .git -type d -prune

Shortcut: Click F2 and then change the variable name and click 'enter' to change all variables that is the same as what you selected before hitting F2.

Things I didn't remember to do when trying to create my server and database from memory:

1. Install nodemon by: npm install nodemon --save-dev
2. To pull variable from .env after configing is process.env
3. After creating the database name in psql. \c [database name] to make sure you're in that database to create new tables.
4. Type \d [table name] to see schema that you've just created.
5. PSQL is very strict. Must have a space after the table name like so for inserting data: INSERT INTO people (firstname, lastname) VALUES ('firstTest', 'lastTest');
6. When updating PSQL database, make sure to use single quotes. Double quotes won't work. Example: UPDATE people SET firstname='James', lastname='Taylor' WHERE id=1;