My New Site Stack

Outwardly my site hasn't really change much it on a surface level looks pretty similar to how it always has done, however all of the underlying technology have change along with a way more efficient delivery system. It is, kinda, pretty awesome

Way back in 2016 when I was still very fresh to web development I knew I needed a site, every developer needs a small slice of the internet to call their own after all. I just didn't know where to start, I looked around a bit and found some pretty interesting tutorials on Django and thought this would be a good place to start and well it was.

Django allowed me to get up and running rapidly, it gave me the freedom to build what I wanted and the tools to get it done readily, I learnt a lot, I also learnt I didn't really like Python or Django but it served me well over the years. There is a lot I like about the site, however maintenance was difficult and the architecture was pretty messy and very all over the place. Whenever I worked on it I struggled to achieve what I wanted and realized it as not so sustainable in the long term and after learning a lot of new technologies I realized I would be better served using some of these on my site.

The Stack, A Break Down

Working with ReactJS at work I decided to use that knowledge in my own site, however I didn't just want to use the exact same technologies and decided to pick up NextJS with TypeScript. Initally the release of Next I used didn't have as strong TypeScript intergration but now Next 9.X has some pretty great intergration and allows for a much more out of the box solution.

NextJS has proven to be interesting it is quite different to the standard ReactJS app and does quite a lot well, however I am not a big fan of style-jsx as I am more use to styled components and emotion which are fantastic libraries and sure I can replace style-jsx with them just it requires some overhead as NextJS has server side rendering (SSR) out of the box and style-jsx is setup for that and I also just get frustrated with SSR so, maybe eventually I'll updated it, but style-jsx does work and it is largely ok.

NextJS is a pretty good platform to create apps and it does allow for rapid development, the routing being handled by the next router using a pages directory to structure the pages is actually rather nice, it does however fall down when you try and do sub-routing such as if you have a /blog page the accepted way in Next to deal with individual blog pages is using query strings /blog?slug=my-first-blog which is fine but it never feels as nice as just dedicated routes, I guess it is more of a style thing for me.

If you want to build something fast that is far more opinionated than just basic React NextJS is a good option, also the documentation is actually pretty good and the project at this point is actually rather big with a lot of users so generally most questions are pretty easy to find and to be honest I have found intergrating Next with my Express server, GraphQL and TypeORM to actually be easier than I would have expected.

The backend framework is powered by ExpressJS mostly because it is really easy, massively used and has just so much support everywhere. I've used Express quite a lot for different projects and it has always made my life easier. Sure it may not be the best framework for NodeJS but it does everything I want and when using TypeScript just makes Express all the more joy to work with. For me the backend is just a point holding all my things together and I can extend it as required, I've used the JWT library and it also works well along side the other big backend sections.

As I wanted to work with some of my Database and provide flexability to add more database intergration into my site I decided I needed a powerful way to interact with both noSQL and SQL databases. This is generally as my site is aiming to be the focal point for all my projects providing a robust backend that will simplify everything, or that is the plan anyway. TypeORM is again another tried and tests ORM and it is all in TypeScript so it is pretty awesome and supports all the major databases, in the end my site doesn't directly interact with my Databases as I off loaded a lot of the login and blog stuff here, it provides a good framework to use with databases as I use them more directly.

This blog is a big part of my site and it was made possiable by this awesome little project GhostJS which is a headless/ headed CMS that has a lot of power and an awesome API to allow you to pull the data and display it in your site anyway you want! A friend introduced me to GhostJS and it really changed and simplified this site a great deal but although I was most of the way through getting my blog into my site there where still a lot of tricky parts that would require a lot of effort and wasted time on a solved problem, time, I believe is better spent playing with other technologies instead.

Ghost has been a fantastic addition and actually helps me build the site I want with a robust and highly customisable blogging platform, Ghost is great and totally open to host yourself giving you complete control!

Then there is the API that is running in the back, there is GraphQL. GraphQL has been an ever growing way to write flexiable yet extendable APIs that provide a lot more use and power compared to good old RESTful calls. GraphQL is a great point to attach a ton of desperate pieces and microservices together in an unified and highly extendable manner, it is pretty great and has helped me streamline a lot about my site.

I originally tested out GraphQL with just a microservice that transformed and send JSON data from the Board Game Geek XML API, it worked pretty well and after that I thought it seemed a logically technology to adopt into my site. I use Apollo GraphQL as my technology of choice, it has a lot of great features and is also another thing that is actually really easy to get up and running in no time!

The unsung hero here is the containerization technology that I am using, Docker. Docker has allowed me to build a complex app that is self contained and can be deployed pretty much anywhere. Docker along with GitHub actions and Docker Hub have managed to allow me to build a continuous delivery system for my site with WatchTower to actually provide a nice way for me to update my site without the boring hassle of building releases myself, it is pretty great and I think everyone should look into this type of system for their own sanity.

My cloud provider of choice is Digital Ocean and it has been for years. It was suggested to me in the tutorials I watched initally and to be honest it provides a great service at a really good price, with servers in Singapore which is a bonus and probably my favourite thing about them is they have a ton of tutorials. Digital Ocean are great and provide a strong active community for developers who want to learn more about server stuff and contiune to really out do themselves in the level of awesome articles they put out and contiune to update for latest versions of OS'.

Where Next?

My new site has a lot more going on under the hood, the aim of this is to provide a platform for me to contiune to work with and link small projects to. This aims to simplify a lot of my projects and code and centralise a lot of the common elements with just separated out frontend effectively. I expect to add and update my site in general but I also expect a lot of this will go on behind the scenes on the API level as I explore and play around with other projects.

It is my hope that this new API heavy structure will greatly simplify and speed up my development on other projects in the future and hopefully with my current pipeline in place I should be able to timely experiement and really add useful parts to my site, there is still a lot I want to do on my site overall, I do however have other things I want to spent time with and this inital release gives me a bit more freedom to do that. One of the big things I want to do is update my style/ theme for my site I love the theme I created and it still holds up pretty well but I think it can be a bit more... me and I hope to achieve, but this will take sometime as I am not that creative and still have a love hate relationship with CSS.