When you are about to embark on a journey to become a full stack developer, or you want to build web services on your own, there are many choices to be made. A lot of them depend on the services you want to build and your current knowledge.
When I took the decision to become a full stack developer and my status was as follows:
Close to no hands-on experience with HTML, CSS and JavaScript
Able to code in Kotlin, Android and Python
Awareness of available cloud providers, at least the big ones
Inspired among the other people by Pieter Levels decided I want to build online services. Then I started to figure out what stack should I pick.
Development
The basics
There are different approaches to building web services. Some people swear by pure HTML, CSS, and JavaScript. While researching the internet about this I found out that those tools are enough for some people to make great projects, but frameworks like Vue, Angular, and React are there to make our work quicker. They automate and are opinionated about some aspects of development, which I thought is good as I had no idea how to do it myself. Nevertheless, before jumping into any of them it was recommended to have basic knowledge of HTML, CSS, and JavaScript.
To learn these I read through the following docs:
Time to completion: I think it took me around 3 weeks of 3-6 hours of reading daily. I was also doing bits of code at the same time.
Those tools above are enough to make a nice static website. I wanted to see how nice can it be and then I found this tutorial on Youtube:
How To Make Website Using HTML & CSS | Full Responsive Multi Page Website Design Step by Step
It was great to use my newly gained knowledge in practice, as it's the best way to make the theoretical knowledge stay.
HTML and CSS are enough to build a nice-looking website. It will be mostly static though, but still can be pleasing to the eye. Although you won't be able do dynamic parts like:
displaying something based on a condition
send and receive data from APIs
So next, I decided to read about JavaScript, the source below is the best according to my research:
JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript
- Time to completion: I think it took me around 2-3 weeks of 3-4hrs a day
Now, I was ready to pick a framework!
Vue
After reading through many blog articles and watching youtube videos, I realized that Vue is the easiest one to start with. It has a shallow learning curve, which was great as I wanted to have something online quickly. I also learned that some people recommend it as a starting point before jumping into other more complex frameworks.
I started with https://vuejs.org/guide/introduction.html and went through all content in the Essentials section. This gave me a good enough understanding of Vue to actually start developing web services.
But it wasn't enough...
Nuxt
Quite quickly I realized I will need something a bit more structured that takes away some of the setup from my plate and automates it instead. I realized that I need to start adding more integrations to my Vue code. Then I found Nuxt. It's opinionated, it's based on Vue and it helps to structure the code correctly. I learned more about building web applications when reading their docs, as they point toward many aspects that I didn't think about before. Nuxt also has many modules that enable connecting popular tools to it.
Typescript
I really enjoyed the freedom of writing in JavaScript. It felt like I can make no mistake, as usually, the code will compile, but I realized that once my app gets a bit more complex I will need to know exactly, not only approximately, the type of each constant, variable, and object. I was already starting to feel the pain of having incorrect types send through my app and invoking functions that don't exist as the IDE didn't complain.
So I decided to give TypeScript a go and I don't regret it. It forces more structure into code but sometimes causes extra issues.
Styling
Styling is important to make the webpage look good. Good pages are more trustworthy. Thus I needed an easy tool to do it. I didn't want to deal with pure CSS at this stage, so I looked into Nuxt Modules. Tailwind was the most popular styling plugin available in Nuxt Modules, so I decided to give it a go. It was easy to learn the basics.
On Tailwinds website I also found this gem: https://www.refactoringui.com/ . It's a great summary of how to build great-looking websites. I use their tips and tricks all the time.
Deployment
Node
I usually develop my applications locally by using npm, yarn or pnpm. In Nuxt we get also something called Hot Module Replacement, which updates the website without the need to refresh the whole page. This feature speeds up work.
The actual deployment comes next, where I usually rely on building a node server. It's good enough so far for my applications.
Docker
Convenient to package your work, but adds extra overhead. I wouldn't use it if I didnt need to. Nevertheless, right now I want to be platform independent, so it's the best solution for me.
I usually develop apps that require 3 tier app architecture, so Docker is also convenient to package each part. In one example right now I have Nuxt docker image running in Cloud Container, dockerized Strapi CMS running in second container and Postgres database deployed directly in Google Cloud. What to dockerize is a matter of your use case.
Cloud Run
I deploy my projects to Google Cloud Run. It works smoothly and enables scaling if needed. I work on Macbook M1 so it's not always optimal, as docker buildx process takes longer since Cloud Run runs Linux containers. So I usually first run things locally until I deem them good enough to put them into a preview environment in the cloud.
Cloud Run also enables spinning new containers quickly. I usually have a preview container where I test the service before pushing the same docker image into the production container.
Summary
Hope you learned something useful from this post. I don't think that it's the only stack out there, but it worked for me so far. Feel free to reach out with comments.