Full Stack for Front End Engineers
This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v2 course.
Table of Contents
Full Stack for Frontend Engineers
IntroductionJem 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.
Inroducing domainsJem talks about the basics of domains and how they relate to IP addresses.
DNSTalking about how IP address maps to domain names, Jem reviews the importance of DNS.
Exercise 1: PingJem 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.
DNS CachesJem reviews the concept of DNS caches and the different types of DNS caches that help speed looking up of domains.
SecurityTalking 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.
Cache PoisoningJem 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.
Exercise 2: TracerouteJem 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.
Exercise 3: Introducing VimGiving 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.
Exercise 4: Vim modesJem 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.
VIM command modeManipulating a file with Vim, Jem demonstrates common tasks available in command mode.
Exercise 5: Vim command modeJem sets up an exercise for using the Vim command mode. Then Jem demonstrates some of the more standard Vim command mode functions.
Editing and Saving in VimJem covers editing and saving commands in Vim.
Exercise 6: Editing and Saving in VimTo 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.
Exercise 7: Introducing ServersJem 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.
SSHBy talking about the problems of simple passwords, Jem further explores the concept of SSH and public key authentication.
Exercise 8: Creating an SSH KeyJem 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.
Setting up a VPS
VPS & Cloud ComputingReviewing the types of servers, dedicated servers, and VPS, Jem introduces cloud computing.
Exercise 9: Buy a VPSIn 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
Exercise 10: Log onto your own serverIn this exercise, Jem and students log into the server that they recently made.
Exercise 11: topIn 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.
Exercise 12: Setting up your serverIn 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.
Logging in with SSHJem demonstrates how to assign SSH public key to a newly created server.
Disable root accessAfter reviewing the importance of disabling root access, Jem shows how to modify the SSH config file to block root access into the server.
Getting a Domain Name
Buying a domainTo 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.
Associating the DNSTo connect a domain name to the new server, Jem demonstrates how to map an IP address to a domain name using A record.
Using CNAMEsIf a project is hosted on Github, Jem indicates that a CNAME record can be used to associate a domain name for free hosting.
Wrapping UpFinishing associating a domain name with the IP address, Jem takes questions from students about IP address and the difference between A and CNAME records.
Setting Up the Server
Introducing Unix Operating SystemsJem reviews the operating systems (OS) and why a UNIX-based OS such as Ubuntu is preferred.
Introducting NginxJem 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.
Exercise 13: NginxIn this exercise, students work on installing Nginx on your new server. Then Jem shows how to install Nginx on the new server.
Exercise 14: Nginx configurationWith 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
Installing Git, NodeJS, and NPMJem installs Git, NodeJS, and NPM onto the new server.
Making a symbolic linkCreating a symbolic link, Jem sets NodeJS to mean node on the server.
Creating a web directoryTo place files for the web site, Jem shows how to create a web directory.
Changing permissionsTo keep from the repetitive usage of sudo when creating files, Jem uses the chown command to change folder and file permissions.
Cloning a Git repositoryJem clones a repository from GitHub onto his new server.
Rename directory and installing npmTo 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.
Starting the serverJem starts the node server, which is serving off port 3001.
Modifying the Server
Changing server portsBy 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.
Exercise 15: Creating Gulp tasksIn this exercise, students build a simple Gulp task to minify CSS. Jem walks through a solution to the steps to make a Gulp task.
Installing GulpFixing NPM permissions, Jem installs Gulp globally on the server so that the task manager runs from the command line.
Keeping an app runningTo keep from having to start and stop the web server repeatedly, Jem demonstrates a process manager called Forever that keeps the process running indefinitely.
Log filesJem sets up log files to track any potential errors Forever.
Exercise 16: Tailing a log fileIn 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.
Putting it all together
Exercise 17: Putting it all togetherIn 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.
Wrapping Up and Q&A
Course wrap-upJem 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.