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:

  1. On your laptop, create the assignment folder
  2. Copy the setup files, if any, from the server to your new assignment folder
  3. 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:

  1. On your laptop, create the assignment folder
  2. Copy the setup files, if any, from the server to your new assignment folder
  3. edit the local files
  4. scp the local folder to the server
  5. test the page in the browser, using the folder on the server
  6. 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 in python3.

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