What I learned from Frontendmasters' Full Stack for Front-End Engineers Course

In this post, I will reflect on what I learned from Jem Young's course "Full Stack for Front-End Engineers" on FrontendMasters.

To be fair, I already knew most of what he taught; so the following notes are just little tidbits that I didn't use in the past or concepts that I want to go over again.

I really recommend the course to everyone, even if you are just starting programming it will give you a good overview of how the Internet works and how servers work.

The command line

Why do people still use the command line, when so many things can be done with a GUI (Graphical User Interface)?

GUIs are opinionated. Interfaces always have details that force you to do things a certain way; and sometimes you have to fight around them to do what you really want.

The command line is always faster. If you know what you want to do, there is no faster way than the command line. You just type it and do it, without using your mouse. Kind of like using VIM.

Useful commands

• cat: If we do cat FILE, it will show us the file contents.
• less: It's like cat, but will show us less contents, one page at a time.

Shells

A terminal runs a shell. The shell is what interacts with the system and interprets our commands.

If we do echo $0, we can know the shell we are using. Common ones are bash, fish, zsh...

IP addresses and protocols

HTTP is based on TCP. UDP is faster, but TCP is lossless and that's why we use it.

We can ping a site, to know if it is working. For example, ping twitter.com.

Setting up a server

We can use a cloud provider like DigitalOcean or AWS to set up a virtual server. There are some steps we always need to do:

1. Update software
2. Create a new user
3. Make that user a super user
4. Enable login for new user
5. Disable root login

• sudo !! returns the last command as super user.
• If we check the auth.log file, we can see everyone that is trying to log in.
• A common command to check a log is tail -f FILE. It will give us the last lines, and follow it in real time.

SSH keys

SSH is comprised of two keys: public and private. We will create a public key and copy it into ~/.ssh/authorized_keys, just so that we don't need to enter the key every time we try to log into the server.

It's good practice to disable root login in our SSH config: PermitRootLogin no.

SSH runs in port 22, but some people change it for safety reasons.

Nginx

Nginx helps us route our requests to wherever we want. It's used as a reverse proxy, web server and proxy server.

Nginx + Express

We can set up an Express server and with Nginx, route the request to Express. This is called proxy pass. We edit the Nginx config and proxy pass to localhost:3000, or whatever port our Express server uses.

After any config change we make, we can run nginx -t to validate the config.

Nginx config

We can write redirects in Nginx. 301 are temporary redirects, and 302 are permanent redirects. For example:

location /help {
    return 301 https://google.com
}

We can also have a subdomain. We can have a lot of different servers and a lot of different subdomains in Nginx.

Process manager

It's good practice to add a process manager to our server. This way we can manage restarts, and keep the server running. A common one is pm2.

Bash basics

Bash is a Unix shell and a command line language used everywhere. There are some common operators and tricks that we should know:

• | and >: the pipe operator (|) gets the output and pipes it into something else. For example ps | grep bash. It's a redirection operator. > will write to a file.
• find and grep: find will search file names, and grep will search file contents.

Security

If we do sudo apt install unattended-upgrades, it will auto upgrade packages to prevent against known vulnerabilities.

We should have a firewall. Keep all the ports closed unless needed. To check which ports are open, we can use nmap. If we do nmap OUR_IP, we can see which ports are open and closed.

There is a tool called ufw (uncomplicated firewall), that will make closing and opening ports easy for us. For example, ufw allow ssh.

HTTP

HTTP is HyperText Transfer Protocol, it is based on a request/response model. We send and receive packets, and each packet contains HTTP data. These packets have HTTP headers and the contents.

The headers are like the envelope where we see information about the packet. Example of headers: host, user-agent, accept, accept-encoding. Custom headers usually start with X-.

Everything in HTTP is stateless, that's why we use cookies, which are a way to persist information over time.

We can create custom headers and custom status codes.

HTTPS

HTTPS is encrypted HTTP. It encrypts all data in-transit

HTTP2

Requires SSL. It's faster because it can do multiplexing, we can do everything in one connection. For example: https://http2.akamai.com/demo

Cookies cannot be compressed.

Load balancers

top and htop tell us everything that goes on in the server. Kind of like Activity Monitor, for a server.

Nginx can be used as a load balancer: https://nginx.org/en/docs/http/load_balancing.html

WebSockets

Bidirectional connection between server and client. We keep the connection open. Usual example is for a chat app, or a chatbot.