For working and collaborating remotely, Epicodus uses Visual Studio Code Live Share, Live Server, and Live Share Audio to share the following:
Online students will use these tools throughout the program. In-person students will use these tools only in the first course section of Introduction to Programming.
If you haven't already installed VS Code by following along with the previous lesson, do so now. Instructions are located here.
Note: If you are using a Mac, VS Code 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 advisor.
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.
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. It's helpful to know the process of searching for and installing extensions through VS Code, because you will likely want to extend your code editor's functionality with extensions in the future.
Alternaitvely, you can install and read more about these extensions by visiting their pages on the Visual Studio online marketplace and selecting the option to install:
We recommend following along with these instructions to the extent that is possible! You'll get more practice in the first week of class. 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. There are two options to do this:
Open your project folder through VS Code.
Use the terminal to open up VS Code. We cover how to use the terminal starting in this introduction lesson and in the two lessons that follow. Using the terminal, 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. Take 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!
Once you've opened your project in VS Code, you should see the files listed in the left-hand pane. 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 VS Code Live Share. That is the bottom icon on the left in the image below. (This icon will be added after you've installed VS Code Live Share.)
Make sure the file you're working on is saved. (VS Code 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.
Anybody with that link can now view and edit code along with you!
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 affecting your computer -- deleting and creating folders, making commits, etc. 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.
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.
Technically, you can't actually share your browser, but you can let your VS Code 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.
Once you have a server running, you can share it with others in VSC Code 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).
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.
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".
If Discord goes down, you can switch to using audio through VS Code 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 VS Code Live Share link in the Epicodus help queue.
Lesson 4 of 15
Last updated July 29, 2021