Run Code on Your Machine

You've cloned your project from GitHub to your computer. The files are on your machine. But if you try to just open them in a browser, nothing useful happens — you won't see your website. That's because modern web projects need tools to run: compilers, bundlers, development servers. This exercise is about setting up those tools so you can actually work on your project locally.

Your code editor

The first thing you need is a code editor. Code editors are specialized tools for writing and editing code — they're different from regular text editors like Notepad or TextEdit. They give you syntax highlighting (color-coding that makes code easier to read), autocomplete, a file tree (the sidebar showing your project's folder structure), and built-in Git integration.

There are several popular code editors, and most of them are very similar because they're all built on top of the same foundation: VS Code (Visual Studio Code), an open-source editor by Microsoft. Cursor, which is what I use in this course, is built on VS Code but adds AI features directly into the editor. Other options include Windsurf and Antigravity. Any of them will work for this course — pick the one that feels right to you.

Once you have an editor installed, you'll open your project folder in it. Use "File → Open Folder" to navigate to where you cloned your repository. You'll see your project's file structure in the sidebar — all the files and folders that make up your project.

package.json and dependencies

One of the most important files in any web project is package.json. Think of it as a recipe for your project. It contains metadata (the project's name, version, and description), a list of dependencies (other code packages your project needs to function), and scripts — commands you can run, like dev for starting the development server or build for creating a production version.

Dependencies are a key concept. Most web projects don't build everything from scratch — they rely on external libraries and frameworks maintained by the community. A library is a focused tool for a specific task (like animation or date formatting). A framework is a more comprehensive toolkit that provides structure and conventions for building entire applications — like Next.js or Astro, which you'll use in this course.

Think of your code as design files and dependencies as the software and plugins needed to make them work. Just like a Figma file needs the Figma app to open it, your code needs its dependencies to run. And here's where scale matters: the dependencies you see listed in package.json are just the top level. Each of those has its own dependencies, which have their own dependencies, and so on. A small project might list a dozen packages, but the total tree can easily run into hundreds. Larger commercial projects have thousands. This is normal — it's how modern web development works.

Node.js and npm

To install and manage dependencies, you need two things: Node.js and npm.

A lot of modern web development is built around JavaScript. It's essential for websites to function — it's the language responsible for most of the interactivity on the web. When you see data change on the page, when you open a dropdown or see a dialog pop up, this, in most cases, is JavaScript. It's also critical for running web development environments. But here's the thing: JavaScript was originally created to run only inside web browsers like Chrome and Firefox, not directly on a computer.

Node.js fixes that by providing a runtime environment that lets JavaScript run outside the browser — on your computer, directly in the terminal. This is what powers all the build tools and development servers that modern web projects rely on.

npm (Node Package Manager) comes bundled with Node.js. It's the tool that reads your package.json, downloads all the listed dependencies, and installs them into a folder called node_modules. That folder can be huge — thousands of files — but you never edit it directly and never commit it to Git. It can always be recreated by running npm install.

The development server

Once dependencies are installed, you can start the development server by running npm run dev in your terminal. This starts a local web server — typically at localhost:3000 — that compiles your code and serves it in your browser. The key feature is hot reload: every time you save a file, the browser automatically updates to show your changes. No manual refreshing needed. This makes the development experience fast and fluid.

Development vs production

It's worth understanding the difference between your development environment and the production environment. The development environment is what you're running right now on your computer — it's optimized for a good developer experience: detailed error messages, debugging tools, and instant reloads. The production environment is what Vercel hosts — it's optimized for users: the code is compressed, optimized, and fast. CSS, HTML, and JavaScript all get processed and minified during the build step.

Local development is the practice of building and testing on your own machine before deploying. This is where you'll spend most of your time as you work through this course.

The complete programming environment you've set up — a code editor, Node.js, npm, Git, and a terminal — is exactly what professional developers use every day. It's also what AI tools operate within. When an AI agent in Cursor runs npm install or starts a dev server, it's using the same tools you just set up. Understanding this environment means you understand what's happening when AI works on your behalf.