Local Setup

Make sure your GitHub repository has already been set up. If not, see Setting up your repository.

To get started, install the Visual Studio Code Live Preview extension. Once you have the extension installed, you can start up a webserver by hitting Ctrl + Shift + P (or + Shift + P on MacOS) to open the command pallete. Search for Live Preview: Start Server and hit enter.

alt text

This should open a new tab within VS Code that looks something like this:

alt text

This extension is quite convenient, as every time you make a change to a local file, the page will automatically refresh. However, we’re gonna modify the extension settings to show the preview in your normal browser instead because it provides easy access to the web console, which you will need to use quite often for debugging your assignments. To do this, go to the VS Code extensions pane, search for Live Preview and click the settings cog.

alt text

Scroll down until you see a setting called Open Preview Target and switch it to External Browser.

alt text

Now every time you start up your server, it should open in your default browser. (You may need to restart VS Code for this to work).

If you want it to instead open in a different browser than your default browser, find the setting called Custom External Browser and switch it to whichever browser you want.

If it still doesn’t work, you can just manually paste the IP address into your browser.

Whatever you see at the default link (usually localhost:3000 or 127.0.0.1:3000) is whatever you have in your index.html. If you go to localhost:3000/asgn0, you’ll see the contents of your asgn0 folder.

alt text

You can use this file browser to navigate to your asgn0.html get a live preview of your code.

You can modify your index.html so that it links to each of your assignment HTML files directly. See this gist for a sample index.html.

localhost/127.0.0.1 ARE NOT LIVE HOSTED SUBMISSIONS. DO NOT TURN IN A localhost OR 127.0.0.1 LINK. See Setting up Github Pages for instructions how to get a live hosted submission working if you have not done so already.