First things first. You need a local development environment.
Why is this important you ask. Couldn’t I just copy code over to a server every time I make changes? You could. But imagine debugging, every change you make you spend a few seconds maybe copying code over, or pushing git. This time adds up. Save yourself hours of your life, get your laptop set up for coding now.
💻 : run in Terminal 🚀 : a step to not forget
We’ll be doing a lot of commandline stuff. We’ll introduce stuff as we go, so do not fear, commandline is best — it is the experts way to tell your computer what to do!
If you are interested here’s a tutorial that gives you more than enough to be a master: learn just enough command-line to be dangerous
🚀 First, pick a Terminal program. I like to recommend Tabby.
There are lots of other options:
What I don’t recommend is using the default Terminal on MacOS or CMD/Powershell on Windows.
Here’s some commandline basics:
ls -la will list files in current directorypwd will show current directorycd somedirectory will change directory to somedirectorycp source target will copy filesmv source target will moverm somefile will remove that file (permanently, bypassing trash)mkdir somedirectory will create a folder (directory)On OSX:
open somefile will open the file in the default app associated with itopen somedirectory will open that folder in Finder🚀Install VSCode. VSCode is a code editor. VSCode is an open source, made by Microsoft web technology written in html+css+javascript using a platform called Electron. Using Electron to create a desktop app is an option for the final project. We’ll be using VSCode for coding and utilizing a lot of its plugins. After installing and starting up VSCode, run: cmd + shift + p -> Shell Command: Install ‘code’ command in PATH to be able to run code from the command line. You are welcome to use another editor like Cursor instead if you want more AI power!
🚀If you don’t have it, install Google Chrome. Why? Because we’ll be using Chrome Developer Tools for debugging — more on that later. Also because all the other browsers support slightly different standards, and Chrome simply displays pages more correctly and sticks to the actual standards so we can all be on the same page. To re-iterate: you are required to use a Chrome based browser for this class. You are welcome to use Brave or Arc instead as both are chromium based.
🚀 If you don’t have git set up on your machine: Install GitHub Desktop. We will be mostly using git from the command line but installing the desktop app will give you a nice tree visualization and setups up your local git environment.
🚀Install Homebrew. This is a package manager for all things open source. We will use brew extensively to setup your dev environment.
Most of the directions through the class will be very similar on the various flavors of linux. Mostly just replace any brew command with the package manager for your system (apt on Ubuntu or yum on Fedora).
Windows is a trickier dev environment. We’ll try to provide directions but these may need revision.
In general though whenever we refer to 💻 Terminal/iTerm you can just use Git Shell (which comes bundled with the GitHub app). You may want to check out Chocolatey which is a package manager for Windows.
You can also try out ubuntu in windows if you have Windows 10 — pretty good option.
You could also run a linux virtual machine if you don’t have windows 10 / the above didn’t work out for you. This runs a self-contained linux OS on your windows box.
see the #windows Slack channel for support
Lets start off the term right, with a domain of your own that you’ll use throughout the course.
We’ll use NameCheap as our registrar. Namecheap is a good net citizen and have free domains for students.
🚀go to: https://nc.me/ and lets register you a domain!
(if you have already used your free .me domain, you can either use an email alias or just submit what did before— we just want to see that you can get a domain registered and hosted so no need to do it all again unless you want to)
🚀I’m going to grab one for cs52 now too!
🚀When prompted, choose Github Pages Setup
🚀 Now, the automatic Github Setup in the next screen may do some of the steps below for you. It has a tendency to fail for a variety of reasons (don’t worry if that happens to you). The below are the full directions in case in fails and you need to step through it.
🚀 go to github.com if you don’t have an account, set one up! Use your .edu account and get the GitHub Student Developer Pack. You are completely welcome to just use your existing personal github account, please do not create a second one.
🚀 create a new repo for your domain, name it with your domain name.
Note: Keep this in your own personal github — later we’ll use repos under the course organization but for this one your own is fine.
Note: Do not select “Initialize this repository with a README”, we’ll create one manually later.
Grab the URL for the repository (either SSH or HTTPS depending on how you have git setup. If SSH gives you trouble just try HTTPS.)
Note: the following are transcripts of MY terminal session while setting up cs52.me with my github URL. You should replace anything with cs52.me with your repo name and your github URL instead.
💻 git clone [email protected]:dartmouth-cs52/cs52.me.git
Cloning into 'cs52.me'...
warning: You appear to have cloned an empty repository.
Checking connectivity... done.
💻 cd cs52.me/
💻 pwd #checking current working directory
/Users/tim/Sandbox/cs52.me
💻 code index.html
🚀basically just start VSCode and create a file called index.html in your cloned workspace.
💻 python -m http.server 9000
Serving HTTP on 0.0.0.0 port 9000 ...
127.0.0.1 - - [09/Jun/2016 18:25:18] "GET / HTTP/1.1" 200 -
If you are running python2.7 try: python -m SimpleHTTPServer 9000 instead
❓does anybody know what 127.0.0.1 is the address for?
Lets check out what we have made: http://localhost:9000
Note: to quit the python server type: ctrl+c (this is a default for many commandline processes).
💻 git status #check and see what the story is
On branch main
Initial commit
Untracked files:
(use "git add <file>..." to include in what will be committed)
index.html
nothing added to commit but untracked files present (use "git add" to track)
💻 git add index.html #lets track index.html
💻 git status #check again -- I'm OCD with this
On branch main
Initial commit
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: index.html
💻 git commit -am "its hideous" #please make yours prettier 😃
[main (root-commit) 93a5c69] its hideous
1 file changed, 10 insertions(+)
create mode 100644 index.html