Full Stack for Front End Engineers

Jem Young introduces his course, Full Stack for Engineers, and provides an agenda for the first part of course.. Demonstrating how the Internet works from server to your browser, Jem covers the fundamentals for building on the web.

Jem talks about the basics of domains and how they relate to IP addresses.

Talking about how IP address maps to domain names, Jem reviews the importance of DNS.

Jem covers ping, a network tool for testing if a domain name is reachable. Then going through several domains, Jem demonstrates how to use ping command and read the results.

Jem reviews the concept of DNS caches and the different types of DNS caches that help speed looking up of domains.

Talking about the importance of Internet security, Jem asks to be mindful of your internet practices as people are always trying to break into your server.

Jem describes a potential security problem with cache poisoning, also known as DNS spoofing. When false DNS information introduced, a hacker could divert your site's traffic to their server.

Jem shows traceroute, a network tool for illustrating the path to a server as well as the time it takes to connect. Using Netflix.com as an example, Jem reviews the output from a traceroute to show how a browser gets to the domain.

Giving an overview of the UNIX text editor, Jem discusses the importance for engineers to learning Vim. Afterwards, Jem introduces a VIM ercise. In this exercise, students open the Vim editor in their terminal application. Using his computer, Jem shows how to initiate the Vim editor.

Jem reviews three modes to operate Vim: command, insert, and the last line. At the start, Vim is in command mode. In this exercise, students open the Vim editor and change into the software's different command modes. Jem reviews Vim's inserting mode and shows how to write code within the editor.

Manipulating a file with Vim, Jem demonstrates common tasks available in command mode.

Jem sets up an exercise for using the Vim command mode. Then Jem demonstrates some of the more standard Vim command mode functions.

Jem covers editing and saving commands in Vim.

To help learn Vim through repetition, Jem sets up an exercise for writing out Vim commands in the Vim editor. Then Jem answers student questions about editing and saving with Vim.

Jem introduces Internet servers. Then Jem demonstrates logging into a server with secure remote login application, secure shell (SSH). Walking through logging into a server, Jem shows how to use SSH.

By talking about the problems of simple passwords, Jem further explores the concept of SSH and public key authentication.

Jem introduces an exercise to make an SSH key to log into a server securely. Jem walks through the steps to generate a private and public SSH keys.

Reviewing the types of servers, dedicated servers, and VPS, Jem introduces cloud computing.

In this exercise, students buy space on a VPS. Jem demonstrates differences between AWS and Digital Ocean. Using the public key generated earlier in the course, Jem walks through steps to buy a VPS through Digital Ocean. Sign up at Digital Ocean ($10 credit): https://m.do.co/c/c5c1d7c254d8

In this exercise, Jem and students log into the server that they recently made.

In this exercise, students use a task manager program to create a list of running processes on a server. Then Jem reviews top and also installs htop, an alternative to top with a color interface.

In this exercise, you will work on upgrading software and adding a new user to the server to avoid using root login. Answering student questions, Jem works through the steps to update the server. To make sure no one else uses root, Jem also adds new users to access the server and adds them to a sudo group.

Jem demonstrates how to assign SSH public key to a newly created server.

After reviewing the importance of disabling root access, Jem shows how to modify the SSH config file to block root access into the server.

To make our server easier to find on the web, an IP address should point to a domain name. Jem first illustrates how to purchase a domain name.

To connect a domain name to the new server, Jem demonstrates how to map an IP address to a domain name using A record.

If a project is hosted on Github, Jem indicates that a CNAME record can be used to associate a domain name for free hosting.

Finishing associating a domain name with the IP address, Jem takes questions from students about IP address and the difference between A and CNAME records.

Jem reviews the operating systems (OS) and why a UNIX-based OS such as Ubuntu is preferred.

Jem introduces Nginx, a web server that can be used as a reverse proxy. Unlike a proxy server, a reverse proxy accepts requests from external clients—such as browser requests for a web page—on behalf of servers.

In this exercise, students work on installing Nginx on your new server. Then Jem shows how to install Nginx on the new server.

With Nginx installed, you will look through the web server's default configuration file. Underscoring the progress of setting up a server to pointing to a web server with a new custom domain name, Jem walks through steps to display the Nginx default configuration

Jem installs Git, NodeJS, and NPM onto the new server.

Creating a symbolic link, Jem sets NodeJS to mean node on the server.

To place files for the web site, Jem shows how to create a web directory.

To keep from the repetitive usage of sudo when creating files, Jem uses the chown command to change folder and file permissions.

Jem clones a repository from GitHub onto his new server.

To make the project more friendly for development, Jem renames the "Dev-Ops-for-Frontend" directory to "app". Afterward, Jem installs npm in the app directory.

Jem starts the node server, which is serving off port 3001.

By modifying Nginx, Jem sends external browsing requests to the server to port 3001. Then within the app directory, students check out a branch of the repository and customize the HTML.

Jem introduces the concept of deploying code by setting up Gulp and a deploy system. Then Jem talks about Gulp. A JavaScript task runner, Gulp is used to streamline the build systems in front-end web development.

In this exercise, students build a simple Gulp task to minify CSS. Jem walks through a solution to the steps to make a Gulp task.

Fixing NPM permissions, Jem installs Gulp globally on the server so that the task manager runs from the command line.

To keep from having to start and stop the web server repeatedly, Jem demonstrates a process manager called Forever that keeps the process running indefinitely.

Jem sets up log files to track any potential errors Forever.

In order to monitor a server's log file to determine what is happening on the server in real-time, Jem sets up tail, a Unix program. Tail displays the end of a text file and updates the display if there is additional server activity. Jem demonstrates how to use tail to watch his server's log file.

In this exercise, students work to combine Gulp and Forever into one command. Jem reviews the exercise solution by coding a deploy command and demonstrating it on his server.

Jem reviews the steps students have gone through to create a server and launch a new web application. Answering student questions, Jem talks about the differences between HTTP and HTTP2 and benefits and constraints of HTTP2; how to associate a CSS file in the Node app; how to deploy a few or many servers from a laptop; how a server can host multiple domains on one Nginx setup; an overview of setting up HTTPS; how to backup private SSH keys; and whether GZIP, a file compression utility used for reducing the file size of web assets, can be used in tandem with HTTPS.