✏ ABL - always be learning
It's that time of year again. Resolutions are made - and broken before the first week is out. I never need motivation to open my editor and just code away, coding keeps me sane and healthy (although I often feel that I'm constantly on the brink of burnout), but I struggle with keeping focus on one topic. To minimise the chances of that happening, I've decided to commit to a #100DaysOf... challenge:
I want to learn the MERN stack.
This is no tutorial or guide, it's a documentation of my personal learning process and will serve as my notebook in the future, when I need to look things up again.
Where I'm starting from
The front end was my entry into programming, so besides HTML and CSS (etc), my current skillset includes good knowledge of JavaScript and reasonably good knowledge of React. I've also worked with PHP/SQL before, at a decent level where I was able to build my own recipe database, and manipulate it entirely through a web interface. Pure front end became too limiting, and being able to write server code was quite awesome - with one problem:
I find PHP extremely tedious to write and debug. It's possible that I just didn't find the right tools, though. But I absolutely love JavaScript, so I purchased a Udemy course by Brad Traversy "MERN eCommerce from scratch" to expand my knowledge and learn server side JavaScript.
I used the holidays to dive into the course. It started off with building the front end, and the pace was perfect. I confidently coded along, understanding every single line I wrote. When it came to the back end, stuff got a little bumpier. It's not that you don't get any explanations along with the code, the course just isn't aimed at complete beginners like me.
I had made GET requests before and know how to fetch data from a server, but to be entirely honest, it always feels a bit like an accident when I make it work. And I certainly have never set up a server, so I was more and more just copying the code from the tutorial video. By the time we included the database and installed Postman, I wasn't even 100% sure what I'm installing that for, so I thought that it makes no sense to continue unless I catch up with the tools involved.
Why I want to learn this
I recently wrote a short tutorial series on " How to build a Guitar with React", but couldn't include all the functionality that I wanted. I'd like a user to have access to a chord database, and give them the possibility to save custom chords. I've formerly half-"solved" that by throwing the entire chord data JSON file at the client, but that's probably not how you want to do it. I've also no clue how to build a back end that allows user registration.
The goal
By the end of this challenge, I want to be able to
- set up and configure a server
- include user registration
- build/connect to a database
- deploy a full-stack app
"Being able to..." means that I know what I'm doing when I'm doing it. That I don't have to look up every step, and that I understand what each step is for. It does not mean that I can showcase one project where I "prove" that I'm proficient in the above.
Well, the very first thing I'll have to do to achieve that goal is... start 🚀
✏ What is the MERN stack?
In (very) short - the MERN stack is a combination of four technologies to deploy full-stack web applications:
- M: MongoDB - a noSQL (non-relational) database, where the data is stored in documents as key-value pairs (JSON format)
- E: Express - a Node.js framework that simplifies writing server code
- R: React - a front end JavaScript library to build UI components in single-page-applications
- N: Node.js - a runtime environment to execute JavaScript without a browser (=> on the server instead of the client)
Some articles I found helpful, with further information:
https://www.geeksforgeeks.org/mern-stack/
https://thecleverprogrammer.com/2020/11/09/what-is-mern-stack/
✏ Node.js
I'm going to start with Node.js, as that seems to be the most basic. Why is it even called MERN, when the order of importance implies that it should be called NERM? There's no Express without Node. You rarely need a database in a web application if you don't have a front end.
My guess is that it's because MERN is "the stack formerly/still known as MEAN", and MEAN sounds more badass than NEAM. But anyway.
How much JavaScript is required to use Node.js?
From nodejs.dev/learn:
I think I have those covered (love that they included "semicolons" in the list, but I'm not sure yet why that should be so important). What else?
The following concepts are also key to understand asynchronous programming, which is one fundamental part of Node.js:
The air already gets thinner. I'll have to read up again on some of those along the way.
Installation & getting started
Download from https://nodejs.org/en/ and installation are pretty straightforward. It's been a while since I installed it, but I think I just clicked through the dialogue and left everything on default.
Once it's installed, Node is available in the terminal (I'm using Atom editor with platformio-ide-terminal package). To run a JavaScript file without browser, move to the folder and run the script with
node myscript.js
// alternatively, leave out the file extension:
node myscript
You can also just type
node
and then write JavaScript code like you would in the browser console. There are a few differences, though. Instead of a document or a window object, Node.js has a global object with a lot of familiar methods like toString or setTimeout, which you can inspect by typing global. followed by a tab.
To exit, type .exit (or press ctrl-c twice).
There's a lot more to learn, but I'm not sure how much I'll use Node.js to write JavaScript directly in the terminal. I almost never use the browser console like this, for instance. What I definitely do use a lot are npm packages, without knowing much about what's really going on, so that's next on the list.
✏ Recap
I've learned
- what technologies are involved in the MERN stack
- how to install Node.js
- how to use Node.js in the terminal
- how to run a .js file from the terminal
- a huge part of Node.js is asynchronous JavaScript
✏ Next:
- what is npm?
- what is a package.json?
✏ Thanks for reading!
I do my best to thoroughly research the things I learn, but if you find any errors or have additions, please leave a comment below, or @ me on Twitter. If you liked this post, I invite you to subsribe to my newsletter. Until next time 👋