Professional Documents
Culture Documents
for
Frontend Engineers
Frontend Masters
Jem Young
Senior Software Engineer
Serious Business ● Slides
○ jemyoung.com/fsfe
● Tools
○ Windows
■ Bash for Windows
○ MacOS/OSX
■ terminal
How does the internet work?
http://www.cisco1900router.com/wp-content/uploads/2013/03/1-tutorial-osi-7-layer-model.gif
Things you’ll learn
$ ping google.com
DNS
● Local cache
● LAN DNS server LAN - Local Area Network
● ISP DNS server
ISP - Internet Service Provider
DNS
23.23.185.61
X
jemyoung.com
104.24.122.137
Exercise
Trace Route
Trace Route
Windows OSX
What is VIM?
“Vim isn't an editor
A ubiquitous text editor designed to hold its users'
hands. It is a tool, the use of
which must be learned.”
Why should I care?
Because servers don’t have GUI’s http://www.vim.org/about.php
VIM
$ vi
VIM
● command mode
● insert mode
● last-line mode
VIM
last-line mode
insert mode
VIM - insert mode
1. press i
2. type “Haha VIM is easy”
https://vimgifs.com/i/
VIM - command mode
1. press esc
2. press u
3. press i
4. type “Haha VIM is ok”
5. press esc
6. press dd
https://vimgifs.com/u/
VIM - command mode
http://vim.wikia.com/wiki/Copy,_cut_and_paste
Exercise
editing and saving in VIM
VIM - last-line mode
*Updated 4/17/17
$ ssh student@138.197.253.87
● SSH
● servers
Part 2 ● VPS
servers ahoy ● (basic) server setup
● let’s buy a domain
SSH
Authentication
● 12345
● password
● qwerty
● qazwsx
● 12345678
SSH
$ cd ~/.ssh/
$ ssh-keygen -t rsa
Don’t lose your private key!
Servers
● Web server
● Database server
● Storage server
Server
Dedicated Server
Providers
● AWS
● Rackspace
● Digital Ocean the cloud
Exercise
Buy a VPS
Buying a VPS
www.digitalocean.com
Buying a VPS
Buying a VPS
Buying a VPS
Buying a VPS
Buying a VPS
$ cat ~/.ssh/my_key.pub
$ top
Exercise
Set up your server
Set up your server
$ exit
$ exit
Set up your server
$ sudo vi /etc/ssh/sshd_config
www.namecheap.com
Buy a domain
Buy a domain
https://support.dnsimple.com/articles/differences-between-a-cname-alias-url/
Servers
jemyoung.com
23.23.185.61
Servers
http://keycode.info/
https://github.com/wesbos/keycodes/blob/gh-pages/CNAME
● Ubuntu
Part 3 ● Nginx
setting up your server ● Node
Ubuntu
windows unix
freeBSD
ubuntu debian red hat
OSX/MacOS
● ubiquity
Why Unix? ● open-source
● (mostly) free
Ubuntu
Common unix
commands
● cd
Why Unix? ● crontab
● ls
● mkdir
● pwd
● rm
Ubuntu
Nginx (engine x)
PROXY
Nginx
PROXY
NODE
Exercise
Nginx
Nginx
start nginx
$ sudo service nginx start
23.23.185.61
Nginx/Apache
Setup continued
$ sudo vi /etc/nginx/sites-available/default
location / {
proxy_pass http://127.0.0.1:3001/;
}
Nginx
23.23.185.61
Nginx/Apache
Node
Exercise
html
html
Similar:
● Grunt
● Broccoli
● Brunch
● Jake
Gulp
Exercise
Create gulp tasks
Create gulp tasks
1. Create a gulp task to compile and concat your less files. The css should be
placed in the dist folder.
2. Add your new task to build task.
Gulp
https://docs.npmjs.com/getting-started/fixing-npm-permissions
How do we keep our app up
and running?
Forever
Similar:
$ pwd
/var/www/app
$ npm i -g forever
Run Forever
"scripts": {
"deploy": "gulp deploy && forever stopall && forever start app.js
>> /var/log/forever/forever.log"
}
https://github.com/young/Full-Stack-For-Frontend/blob/master/package.json#L7
Build and Deploy
● Complete project
○ https://github.com/young/Full-Stack-For-Frontend
● Make your site secure with Lets Encrypt and Acme Tiny
○ https://github.com/diafygi/acme-tiny
● Use Fail2Ban to prevent attackers from brute forcing
○ https://www.digitalocean.com/community/tutorials/how-to-protect-
ssh-with-fail2ban-on-ubuntu-14-04