I haven't posted on this blog in a while, but it's for a good reason. While I did enjoy writing static sites with GoHugo, the lack of an actual webserver, that I can check, really made me want to dig deeper into web development.
There we're a couple of things that I wanted from the new site: page hit counter, comments backend, a dashboard for writing posts, and an image uploader (so I can have my own embeds on the internet).
How it started
Same as with HTML and CSS when I rewrote my blog's theme, I had to start by re-learning JavaScript. I sort-of knew JS from back in high school, but definitely not enough to write something useful. Actually, not enough to write something maintainable (as I did write some rudimentary JS for my FiveM scripts).
So I bought a course JS course from Udemy and started learning. I don't think I talked about this much on the blog, but "professional" courses work a lot better for me, than regular YouTube tutorials. I am more engaged with them, and the structure is usually better. While a lot of folks (and some of my friends) consider them just glorified tutorials, I am more than happy to buy them, especially since I am basically funding all of this with money from my paid FiveM scripts (and other open source work).
Course was great, learnt a lot of new stuff about JS, how it works under the hood and how outdated my knowledge was (I was still writing variables with var). After running through all the course content and finishing all the assignments and challenges, I could only think about 2 things:
- I really need to rewrite all NUI that I made for FiveM.
- I am very eager start a web project of my own.
Side-note: I know I talk about FiveM a lot on my blog. I can't help it. I spent most of my pandemic lockdowns writing nightmare-ish code for it. I am not apologising, and I will keep bringing it up every once in a while, even though I don't enjoy the path that Rockstar Games is taking with CFX.
The plan
After feeling confident writing "normal" HTML, CSS and JS, I realized that I am now in a position where I can move through the stages of "fullstack javascript" applications. So, here is my current plan:
- Learn and understand NPM and Node.js
- Learn and understand Express.js and it's ecosystem.
- Build a webapp with Express. (I decided to use SSR with EJS templates here. Feels better for me than maintaining frontend and backend in different applications).
- Rebuild my website, also using Express.
- Learn and understand a frontend framework, like Vue << I AM HERE
- Learn and understand a fullstack framework, like Nuxt.
- ???
- Idk, get a job.
For Express.js, I found a couple of tutorials on the internet that kickstarted everything for me. I already knew the basic concepts like sanitizing and verifying user input, caching DB query results, timeouts, etc, and I got some pointers from friends smarter than me, on how to setup CORS policies and the like.
The first webapp
I started an ambitious project. A User Control Panel for FiveM servers. Basically, players should be able to view their account stats, create support tickets, apply for staff / faction positions and verify other server information from outside the game.
It took me about 3 months to spin up the MVP for it. I used Bootstrap as a CSS framework, ExpressJS with PassportJS for the backend, Express HTML templates with EJS for the frontend, and MariaDB for the database. I could've used MongoDB for this, but the FiveM server already uses MariaDB, and so it was easier.
Registration was a fun problem to tackle. I could've just used a Login with Discord button, since most players already connected their Discord accounts to their FiveM accounts, but I decided to write my own user/password registration ("write my own"... with Passport). Problem was that I didn't feel confident writing the registration form on the page it. Since the internet is scary, those forms could be spammed. Also, how will I know if the player that registers on the site also has the in-game account that they claim they have. Then it hit me: I can just write the registration form in-game only. This way I know exactly to what player to associate the UCP (User Control Panel) account, and that they are a legit person, and not a bot. Done!
Another thing was the game data. Most of it was stored already in the database, so it was really easy for me to just take it from there. Make a couple of JS Classes to basically parse the database variables into variables that the HTML templates can use (and which will allow me to then convert the UCP to different FiveM server frameworks) and we're golden. For the data that was only on the server (online players and stuff), I made a complementary FiveM resource, that is basically a custom API backend, for the UCP and server to interact. This is how I know a player is online, and I can even send them messages from the UCP (as an admin).
From then on, it was just lots of work building the pages. Here are a couple of screenshots:
This took me around ~4 months, and it's still not done yet. Profiles, Admin Actions, Support Tickets, Site Settings and Updates Blog are done, but there are still more things to add, like Server Settings for Admins, Log viewer and maybe even a remote console, why not. But, while making the UCP, I realized something...
Rewriting my personal site
I already wrote the blog's backend. All I had to do was to copy the project to a different repo, strip everything non-blog related from it, and convert my Hugo templates to EJS templates. Boom, done.
One thing that I did change is to swap the existing authentication, with a "Login with Mastodon" button (which I will talk about in another post). I also added my Image upload service, so now the Gallery section of the page can be easily updated.
Conclusions
This blog was all over the place, so I will stop here. There are more things that I want to write about regarding my decent into web development, like how I added the Mastodon login, and the speed bumps that I faced with it, or how I managed to bypass my ISP's CGNAT, so I can selfhost my websites.
I also haven't implemented the comments yet. Now that's a bummer way to end a post. K thx bye.