Development Environment

The combination of SSH and Emacs (or VI) on the server is effective and sufficient.

However, there may be something better, something worth investing in.

Goals

What do we want and need?

• editor: an intuitive, point-and-click editor, like Atom
• preview: a way to see what a page looks like in a web browser, usually delivered from a web server
• cloud storage: a way for your files to be stored in a neutral location in the cloud, such as a CodeAnywhere container or the CS server, Tempest

Atom gives us an editor, but not preview or cloud storage.

We'd like something that does all three.

Concepts/Big Picture

Let's talk about some of the concepts underlying that last section:

• The web works with a client-server architecture.
• The clients are web browsers (and similar kinds of software). They request stuff (files like HTML files, CSS files, JavaScript files, images, videos, and such) from servers.
• A web server listens to the network, gets requests from clients, and sends back responses (the requested files or error codes like 404 file not found and 403 permission denied).

Visual Studio Code

Visual Studio Code is an editor that, with an extension pack, can edit files on remote machines. We'll use it to edit files on Tempest, the CS department server.

This also has the pleasant side effects that (1) your files are backed up, (2) you can keep them until you graduate, and (3) it doesn't cost the department.

Follow these instructions to install VSC and the remote development extension

Catching up

Last time, our goal was to edit some MySQL batch files and run them. To help us catch up, and to learn a bit of how we will use VSC in our course, let's follow the following steps. I'll explain each step.

1. Launch VSC and connect to youracct@cs.wellesley.edu. I've checked that all of you who are enrolled in the course have a "shell" account (meaning you can run commands on the server).
2. Click the "file explorer" icon and then on your account
3. You'll see a folder called public_html and the cs304 folder you created on Friday.
4. If you don't see the cs304 folder, click the "new folder" icon and create that folder

Now we're going to switch to the terminal for a bit, because certain commands are much easier that way. They are unix commands, which are worth learning in their own right.

1. Choose "Terminal / New Terminal" This will connect you to the CS server and put you in your home directory.
2. Do an ls command. That will list your current directory. You might see some 111 or 115 folders. You'll definitely see a public_html folder and your cs304 folder
3. Do a cd cs304 command. That puts you "in" that directory.
4. Do an ls command to see what's in that directory. Probably the part1 folder from last time.
5. Do cp -r ~cs304/pub/downloads/part2 . That recursively copies that folder from the course directory to your current directory.
6. In the file browser, click on the cs204 folder and you'll see the new folders and files.
7. Navigate to a batch file from part 1 and open it. You'll now be able to edit it using VSC!

Here's what that sequence of commands looks like:

New CentOS 7 [cs304guest@tempest ~]$ ls
cs111    cs115    cs304     public_html
New CentOS 7 [cs304guest@tempest ~]$ cd cs304
New CentOS 7 [cs304guest@tempest cs304]$ ls
part1
New CentOS 7 [cs304guest@tempest cs304]$ cp ~cs304/pub/downloads/part2 .
New CentOS 7 [cs304guest@tempest cs304]$ ls
part1   part2

Practicing Editing

Let's practice our development cycle:

1. Go to VSC
2. navigate to one of the batch files from part 1
3. Edit it
4. Save the file
5. Go to the terminal window
6. run your changed file

Closing up

When you're done with some editing:

1. Use the exit command to close any terminals you opened
2. Click on the SSH connection bar in the lower left and choose "close connection"
3. Quit Visual Studio Code