Live Server: Local Project Preview

Hello! Welcome back to the workshop.

In our last lesson, you successfully prompted Claude to create the fundamental file structure for our animation project: index.html, styles.css, and script.js. You now have a digital canvas and a set of tools laid out, but you can't see the canvas yet.

Today's goal is to bridge that gap. We will focus on how to run and preview your local web project in a browser using a live server. This step is like turning on the gallery lights. It allows you to see your work in its intended environment and, more importantly, to see your changes reflected instantly, creating a tight feedback loop essential for any design process.

Why a "Live Server"?

You might wonder why we can't just double-click the index.html file to open it in a browser. While that works for very simple, self-contained HTML, it runs into limitations quickly. Opening a file directly uses the file:// protocol, which has security restrictions that can prevent JavaScript from loading other files or behaving as expected.

A local server, on the other hand, mimics the environment of a real website, using the http:// protocol. This provides two huge benefits for our workflow:

1. A Realistic Environment: It ensures our project behaves just as it would online.
2. Live Reloading: It can automatically refresh the browser page every time we save a file.

This second point is the real game-changer. For a motion designer, being able to tweak a value in the code and see the animation update instantly without manual refreshing is invaluable. The tool we'll use for this is a VS Code extension called Live Server.

Installing and Using Live Server

The best way to learn this is to see it in action. The following video gives a clear, concise walkthrough of installing Live Server and using it to preview a project.

Your Turn: Go Live!

Now, let's apply this to the project you created in the last lesson.

1. Make sure you have your project folder open in VS Code. This is a crucial step; Live Server needs to operate on a folder, not just a single, disconnected file.
2. Follow the video's instructions to find and install the "Live Server" extension by Ritwick Dey.
3. Once installed, open your index.html file.
4. Click the "Go Live" button in the bottom-right of the VS Code status bar.
5. Your default browser should open, displaying a page with the heading "My Animation Scene" against a dark background. Notice the URL in the address bar starts with 127.0.0.1 or something similar—this indicates you're viewing it from your local server.

Now, test the live reload feature:

• Arrange your windows so you can see both VS Code and the browser.
• Open styles.css and change the background-color to something else, for example, background-color: #553c63;.
• Save the file (Cmd+S or Ctrl+S).
• Watch your browser window. The background should update instantly without you having to do anything.

This immediate feedback is the core of our development and animation workflow.

What If It Doesn't Work?

Technology sometimes has its own ideas. If the "Go Live" button is missing or doesn't work, don't worry. This is a common hiccup with a few simple fixes.

Pro Tip: An Integrated Preview Inside VS Code

Switching between your code editor and a browser is functional, but for a designer, having your canvas and tools in a single, unified workspace is often more efficient. VS Code has a built-in feature that allows you to do just this.

You can open a simple browser tab inside VS Code and point it to your Live Server address. This keeps your visual preview right next to your code.

Let's try it:

1. With your Live Server running, copy the URL from your browser's address bar (it should look like http://127.0.0.1:5500).
2. You can now close the external browser window.
3. Back in VS Code, open the Command Palette:
   • Mac: Cmd+Shift+P
   • Windows: Ctrl+Shift+P
4. Type Simple Browser and select the Simple Browser: Show command.
5. Paste the URL you copied and press Enter.

A new tab will open in VS Code showing your live project. You can now drag this tab to create a split-screen view, allowing you to code on one side and see your live preview on the other, all within the same window. This setup is perfect for the kind of iterative visual work we'll be doing.

Key Takeaways

• A local server is crucial for web development as it creates a realistic environment and enables features like live reloading.
• The Live Server extension for VS Code is a simple, powerful tool to accomplish this with a single click.
• The most common reason for Live Server not working is not having a project folder opened in VS Code.
• You can create a highly efficient, integrated workspace by using VS Code's built-in Simple Browser to preview your project right next to your code.

Next Up

You are now fully set up. You have an AI coding assistant, a structured project, and a live preview environment for instant feedback. The workshop is ready. In the next lesson, we will turn our attention back to the design source: Figma. You'll learn how to structure and name your Figma layers to ensure a clean, optimized SVG export, preparing your visual assets to be brought into this new coding environment for animation.