Building a modern website in 2022

This article was originally published on my blog.

Intro

The internet has been around for more than three decades now. So naturally, it shouldn’t be that hard to create a website, and use the internet’s incredible power to reach billions of people worldwide. And really, it is pretty easy — if you want to create a simple website, you don’t even need to know how to write code. Services like Wordpress, Github Pages, etc. will get your website up and running in a matter of a few minutes for free (if you don’t care for a custom domain).

However, these conveniences come with a few limitations — if you want to tweak the UI to your liking or add some additional functionality, you might end up running in circles with website builders. I have used Wordpress in the past to create websites, but it seemed a bit clunky to me. Moreover, I couldn’t avoid meddling with CSS and Javascript for too long anyway, because I needed to customize certain things which weren’t possible to do in the Wordpress UI.

So recently, when I was working on creating a web app for a side project, I did my research on the latest and greatest tools available in the market for web development. Frontend technology evolves really fast — there are always new, shiny tools available and the old ones are getting deprecated.

Next.JS

I found that React and Next.JS are quite hot these days among frontend web developers. React is a frontend library — a wrapper on top of vanilla Javascript — that makes UI development more manageable. And Next.JS is a web framework for React that helps you get to your working website quicker. I like its built-in filesystem-based routing and other performance optimization features like static-site generation.

It suited the requirements for my use-case and so, I decided to go ahead with it. It’s worth noting that spending some time to assess the pros and cons between available alternatives before you start your project can save you a ton of headache later on.

Learning Frontend Development

I have mostly worked on systems that would qualify as backends, and never really bothered to get in deep into frontend development. My familiarity with frontend development was limited to a few HTML tags. And since I was working on this over my weekends, I didn’t want to spend a lot of time learning everything in the right order (that would have been HTML -> CSS -> Javascript -> React -> Next.JS). Instead, I jumped straight into creating the end product. I started by modifying the starter Next.JS project.

Needless to say, this approach was very chaotic. I was searching StackOverflow every few minutes for answers. Sometimes I didn’t even know what the origin of the errors was — Javascript, React, Next.JS, or one of the installed plugins.

But the benefit of persevering through this was an accelerated learning rate. I figured out exactly the things that I needed for my tasks, without wasting a lot of time reading unnecessary bits.

Backend

Next.JS gives you the support to write your own Javascript based backend if your hosting supports it. But I didn’t use it and decided to write my own because I don’t particularly like writing code in Javascript. Moreover, it wasn’t the right tool for the job.

You don’t need a backend at all if your site consists of mostly static pages (just like my blog). In that case, you can use static generation. What that means is that your code will go through a build process and get rid of server interactions as much as possible. This will also make your website cacheable and load much faster. This architecture pattern is called Jamstack (my website is based on Jamstack pattern too!).

In case a more sophisticated backend is needed, you can implement it in the language of your choice, containerize it and deploy it to serve from a cloud provider. Broadly speaking, there are 2 main options here which are common across all Cloud providers:

1. Need-basis shared environment: Your container(s) will run in a shared environment. You might need to modify some settings to prevent the server processes from being killed when there is no traffic.
2. Dedicated VMs: This makes sense in case your app has high Quality of Service (QoS) requirements or needs to do complex stuff. This option usually costs more.

Custom Domain and Hosting

Where you buy your domain from doesn’t really matter. What’s more important is picking your hosting provider. For Next.JS, you’ll get a good development and deployment experience with Vercel (since they created it), but Netlify and Cloudflare are great options too.

In order to have a non-trivial backend, you’ll most likely use one of the cloud providers. I found that the starter tier of several Cloud providers has generous limits which makes the hosting essentially free. But depending upon what kind of traffic you’re expecting in future, it makes sense to review how the pricing plan scales for more traffic.

A couple of system design tips:

• Pay attention to what CDN you’re going to be using. Depending upon your hosting, you might get it for free. Using a fast, global CDN will reduce loading times for your website. This is particularly important if your frontend is heavy on assets like images, etc.
• Avoid early optimization. Prioritize iterating on an initial MVP. That being said, it’s a good idea to spend some time thinking about important decisions which will impact your app’s performance like your database schemas, number of network hops, API calls, etc.

Outro

I hope that this write-up proves at least somewhat helpful to a soul who is as lost as I was when I started my journey a few weeks back. Not knowing what you don’t know is a constant challenge when you’re in the initial stages of learning something new.

The more time you can invest in it, the more systematically you can structure your learning. And the better understanding you have of what you’re doing, the easier time you’ll have while building. Have fun!