Start and stop Live Preview

Intro

Before we start coding, let’s open up the live preview so we can see what our code does to the webpage.

Steps

Start live preview

To open the live preview, click the button in the upper righthand corner that looks like 2 rectangles with a magnifying glass.

This will start a server on Port:3000 and open up a web browser tab on the right side of your editor. Tip: You can close the Explorer view by clicking on the Explorer icon if you need more room. You can also click on it again to open it back up.

Alternative method

If the live preview isn’t working, use the alternative method described in the next lesson to open up the file directly in your browser.

Stop live preview

To stop the preview, click on Port: 3000 in the status bar and then click on Live Preview: Stop Server.

I always stop the server before quitting VS Code. I’m not sure if it’s necessary, but it’s something I always try to do.

You can try stopping the live preview when you’re done with your coding session for the day. If you need to start the server again, just follow the instructions at the beginning of this lesson again.

Final code

There is no code for this lesson.