Lesson Weekend

For working remotely, Epicodus uses Visual Studio Code Live Share to share the following:

  • Code
  • The terminal
  • Servers (since we can't share web browsers)
  • Audio (if Discord goes down)

Live Share Instructions

Installing Live Share

Sharing Code

Sharing Terminal

Starting a Server

Sharing a Server

Sharing Audio

Note: If you are using a Mac, Live Share will only work on macOS High Sierra 10.13 and above. If you're on a lower version of macOS, please upgrade your computer now. Contact your teacher or advisor if you have any issues. If you do not have access to a personal computer, please reach out to your teacher or career services staff.

Installing Live Share

After you install VS Code, click the four squares on the left side of the screen to access the Extensions menu. In the image below, the icon with four squares is the bottom icon.

 Click the 4 squares icon in bottom left of screen.

Search for and install Live Share. Next, search for and install the VS Code Live Server extension (by Ritwick Dei). Finally, search for and install the Live Share Audio extension.

Sharing Code

To share your code, terminal, and browser with another student or teacher, you'll first want to make sure that all the files you want to share are open in VS Code.

Since we will be working on projects with our pairs, we need the entire file tree of the project to show in VS Code. To do this, we can navigate to the root directory of the project we want to share in the terminal and then type code .. This will open all the files in that directory.

Note: You must run code . in the directory of the project you are working on - not a directory higher up in the file tree. You will be sharing access (including write access) of all these files with your pair. For instance, if you were to run code . in the root directory of your computer, you'd be giving your pair both read and write access to every file on your computer - not just the files in your project. This is a security risk - someone could install malware, damage system files, or access files you don't want to share. While the risk of a fellow Epicodus student doing this is low, there is no good reason to take this risk!

You should see the files listed in the left-hand pane of VS Code. If the file tree isn't showing, click the top left icon that shows two overlapping squares to show the file tree.

If only one file is showing, or you're not seeing the expected files, close the VS Code window, make sure you are in the correct directory in the terminal, and type code . again.

Once you've ensured that the project you want to share is open in VS Code, click the square with an arrow on the left side of your screen to access Live Share. That is the bottom icon on the left in the image below. (This icon will be added after you've installed Live Share.)

Image of tab with square with arrow on left side.

Make sure the file you're working on is saved. (Live Share won't work on new, unsaved files.) Then click "Start collaboration session". In the image above, that is the second option. Only the first two words are showing because that pane hasn't been widened. If you are confused about which option to select, use your mouse to widen the left-side pane in VS Code.

When you click on "Start collaboration session", a link will be copied to your clipboard that you can share with pairs. If you need to get the link again, just click on "Invite participants", which is highlighted in the image below.

 Click on the "Invite participants link" on left side of screen.

Anybody with that link can now view and edit code along with you!

Sharing Terminal

To share your terminal, click "Share terminal." You will have two options: you can either choose "read" or "read/write."

It's very important to understand the difference between read and write access in the terminal. When someone only has read access, that means they can see what's happening in the terminal but can't actually write terminal commands. When someone has write access, that means they can write terminal commands. If you were to give terminal write access to someone with malicious intent (or whose computer was infected with a specially-designed virus for exploiting VS Code Live Share), they could take over your computer, destroy files, or install malware. For that reason, you should only give write access to people you trust.

We recommend only giving your partner read access to your terminal just to be on the safe side. Your partner won't be able to type any terminal commands, so you'll need to make sure that you're regularly switching who is hosting, doing so at least once a day. After lunch is a good time to switch if you haven't before then.

Once you've given read (or read/write) access, you'll have a terminal at the bottom of your screen that you and the people you're sharing with can use together.

 Image of the shared terminal.

For the people joining your session, they can go to the bottom left corner of their screen and click on the terminal under Shared Terminals to see and use your terminal.

 You can click on terminal beneath "Shared Terminals."

Starting a Server

Technically, you can't actually share your browser, but you can let your Live Share participants access a server on your computer. If you're in Intermediate JS or beyond, you can skip this section because you're already using web servers. For Intro, you'll need to use the Live Server VS Code extension you downloaded earlier.

To use a server to share a file with other people, click "Go Live" in the bottom right corner of your screen.

 Click the blue "Go Live" bar at bottom of screen.

Sharing a Server

Once you have a server running, you can share it with others in Live Share. In Live Share, in the upper left corner, click "Share server" and type "5500" for the port to share (or whatever port you're using).

 Click share server.

 Type 5500 for the port to share.

Now, participants can go to the lower left corner of their screen. Under "Shared Servers", click "localhost:5500" to launch the browser and access the server.

 Now you can click on localhost:5500 on the left side of the screen.

Debugging Live Server

Occasionally a server will fail to display your page or will display an error message. If this happens, try finding the specific file you want to serve e.g. index.html and right click. Click the first item in the menu, which should read "Open with Live Server".

Sharing Audio

If Discord goes down, you can switch to using audio through Live Share. In the upper right corner, under Session Details, under Audio Call, click "Start audio call". When Discord comes back up, switch back to Discord (so that teachers can visit your audio channel). If you need help from a teacher while Discord is down, submit your Live Share link at help.epicodus.com.

Image shows that you can "Start Audio Call" on left side of screen.

Lesson 3 of 12
Last updated August 14, 2020