Local Development vs. Remote¶

In most of my classes, I encourage remote development using VS Code's Remote Development Extension. In the Node.js version CS 304, I'm allowing local development.

This document compares and contrasts the two, so that you can make a more informed choice. I will say that in Spring 2023, almost everyone developed remotely (meaning on the server), using the VS Code Remote Development, rather than on their own laptop.

This reading is optional. You can always return to it later.

Remote Development¶

This is what students in my classes have been doing for years. It was necessary because the database was only available on tempest, not over the network.

How to edit files:

1. Launch VS Code on your laptop
2. Click on the green Remote Development icon in the lower left corner
3. Click on "connect current window to host"
   • Windows users probably need to specify that the remote host is running Linux. This is a one-time requirement
4. Give user@host info, which is youracct@cs.wellesley.edu
5. Type your password
6. Opening a terminal opens a remote terminal on Tempest
7. Navigate to your desired files by either
   • using the VS Code Explorer
   • in terminal, cd to correct folder on Tempest and use the code command on a file

Starter Files:

• If there are starter files, you can copy them to your account with cp command

Running Code:

• For web pages, files must be in public_html. Can use Apache to view.
  • URL is like https://cs.wellesley.edu/~youraccount/page/to/file.html
• For Node.js applications, files will be in a prescribed directory.
• There are firewall issues.
  • You have to do SSH tunnel or VPN to access your server
  • Each student runs on their own port

Submitting Assignments:

• Create tarfile and drop it, or
• tell me where your files are on the server

Advantages:

• Uniform environment. I can tell you a command to type (even copy/paste) and it will (very likely) work.
• Common knowlege: other students in the class are doing similar commands and may be able to help.
• No software installation (other than VS Code)
• Easy submission: you can tar up a folder and drop it, or even just leave it where it is, and I can run/grade what you have.
• Easier assistance. If you run into a problem, I can easily look at your files and try to help.

Disadvantages:

• permissions: the default permissions on files means that you have to use opendir to view files via Apache
• Have to authenticate each time (though SSH Keys makes this trivial)

Local Development¶

This is a new option for this semester, because the database is on MongoDB's servers and accessible everywhere.

How to edit files:

1. Launch VS Code on your laptop
2. Opening a terminal opens a local terminal on your laptop
3. Navigate to your desired files using VS Code Explorer

Starter Files:

• If there are starter files, you have to copy them from the server with scp, which means giving your password, unless you use SSH Keys

Running Code:

• For web pages, you can open them in your browser with
  • File > Open and URL like file:///Users/scott/path/to/file.html
  • run local web server and URL like: localhost:8000/path/to/file.html
• For Node.js applications, files will be in a directory of your choosing
• There are no firewall issues.
  • Each student runs on port 8080 or whatever

Submitting Assignments:

Must scp files from your laptop to the server, then

• Create tarfile and drop it, or
• tell me where your files are on the server

Advantages:

• Personal environment. You can and will become expert at navigating your personal machine.
• Development speed: no need to connect to Tempest to start coding.
• Never permission or port problems

Disadvantages:

• Lack of experience: Scott/Olivia may not always know the right command to help you.
  • Olivia is better with Windows
  • Scott is better with Macs
  • There's a good chance we'll be able to help on the "other" platform
• have to copy to server to submit
• If you lose your laptop, you lose everything (unless you have backups)

Visualizations¶

First, here's a high-level boxology of three accounts to consider:

1. The course account (lower right)
2. Your laptop (upper left)
3. Your Tempest account (upper right)

Remote Development Visualization¶

Steps are

1. copy starter code (if any) from course account to Tempest account using cp
2. edit using VS Code with remote development
3. view result using browser and https://cs.wellesley.edu/~ww12/path/to/stuff/file.html

Local Development Visualization¶

Steps are

1. copy starter code (if any) from course account to laptop using scp
2. edit using VS Code
3. view result using browser and file:///path/to/stuff/file.html or localhost:8080/path/to/stuff/file.html
4. copy finished work to server using scp