Most of you will use VS Code and the Remote Development extension to edit files using VS Code while they reside on the CS server. This is very cool and works pretty well, but sometimes it fails, for reasons that aren't clear, but are probably related to network bandwidth.
This reading tells you how to work locally, meaning on your laptop.
Note that, under the covers, VS Code is copying files to/from the server. To edit locally, what you'll do is to explicitly copy files back and forth. That will be something of an administrative burden (which is what makes the Remote Development extension so cool), but the upside is that editing will be very quick, since there will be no network delays.
Background¶
You'll need to have an editor on your laptop. Of course, VS Code is a very good editor and you already have that installed, so you could use that. Alternatively, you could install an editor such as Atom, as advised by our book.
Setup¶
You're going to want to have a folder on your laptop that corresponds to your account on the CS server, so that you can copy files and folders back/forth and not get confused about how things are organized.
By the end of the term, your files on the server will be in either the
cs204
or the cs204-assignments
folders in your ~/public_html
, so
it will look something like this (leaving out some of the files and
folders deeper in the hierarchy).
youracct/ public_html/ cs204/ day2/ ch5/ ottergram/ ch6/ ottergram/ unix/ ... cs204-assignments/ mypage/ mobile/ zodiac/ ...
So, I suggest you create a folder called, say, server
and put a
pub
folder in it. So, eventually things will look like this, with
the server files on the left and your laptop on the right.
server
youracct/ public_html/ cs204/ day2/ ch5/ ottergram/ ch6/ ottergram/ unix/ ... cs204-assignments/ mypage/ mobile/ zodiac/ ...
local
server/ pub/ cs204/ day2/ ch5/ ottergram/ ch6/ ottergram/ unix/ ... cs204-assignments/ mypage/ mobile/ zodiac/ ...
To achieve this setup, you'll have to navigate to wherever you want
your server
folder to be and do:
mkdir server
cd server
mkdir pub
cd pub
scp -r youracct@cs.wellesley.edu:~/public_html/cs204 .
scp -r youracct@cs.wellesley.edu:~/public_html/cs204-assignments .
The last two commands will recursively copy the cs204
and
cs204-assignments
folders to your laptop.
Workflow¶
When working on an assignment, the most important thing as you copy files back and forth is to make sure that you don't copy in the wrong direction, overwriting the files with all your hard work.
To avoid this, I suggest that you work like this:
- On your laptop, create the assignment folder
- Copy the setup files, if any, from the server to your new assignment folder
- Work locally, editing files on your laptop, and copying them to the server for testing and, of course, for grading
So, the step that you'll do repetitively will only be copying to the server, never from it.
Here's an example for the plotting
assignment. The following does
step 2, above, copying the setup files from your account on the server
to your laptop:
cd server/pub/
scp youracct@cs.wellesley.edu:~cs204/pub/assignments/plotting/solution/assign.html plotting/assign.html
Notice the similarity to the standard instructions, except for the scp
instead of cp
.
Now, (step 3), we'll recursively copy the entire local plotting
directory on your laptop to the equivalent directory on the server:
cd server/pub/
scp -r plotting/ youracct@cs.wellesley.edu:~/public_html/cs204-assignments/
Once you've copied the folder to the server, you can test it in your browser.
You can repeat that last scp
command as often as necessary, as you revise your work.
So, the more detailed workflow looks like:
- On your laptop, create the assignment folder
- Copy the setup files, if any, from the server to your new assignment folder
- edit the local files
- scp the local folder to the server
- test the page in the browser, using the folder on the server
- if not done, go to step 3
Local Preview¶
Optionally, if you want to view your pages locally, you should install something that will act as a web server. There are two straightforward possibilities:
- node.js as advised by our book. They explain how to install it, and you can follow their instructions.
http.server
inpython3
.
You probably already have Python (hopefully Python 3) installed on your laptop. If so, you can use that, which is even easier.
To use Python as a local webserver, open a (local) terminal and go to
the server/pub/cs204-assignments
folder. Then run python3, loading
module called http.server
, which will then serve files from the
local folder until you quit from python (control-c):
cd server/pub/cs204-assignments
python3 -m http.server
Then, go to the browser you'll use for testing, and visit the following URL:
localhost:8000
Navigate to the file you want to test, and you're in business.
Working with a Partner¶
TBD