Vibe coding basics: how an app is built (node_modules, package.json and npm explained)

0:00 Vibe coding basics: how an app is built

In this video, I'll show you the basics of how an app is built, so you know what's going on when an AI builds one for you. We'll have Copilot build a glowing beat maker with one prompt, and then use it to explain the four things every vibe coder runs into: the IDE, the file structure, dependencies, and the difference between development and production. You won't write any code. You'll need VS Code with Copilot connected to Linux, which we set up in an earlier video. The link is in the description.

0:35 What an IDE is (the 4 parts of VS Code)

Every project starts with its own folder. Click File, then Open Folder, type a name like beat maker and click OK. VS Code is what's called an IDE, an integrated development environment. That just means one app has everything you need to build. On the left is the Explorer, with every file in your project. The middle is the editor, where files open, and where you'll see your app running. On the right is the chat, where you talk to the AI. And at the bottom is the terminal, where you type commands. Open it from the Terminal menu with New Terminal.

1:12 Install Node.js and npm

Apps like this one run on Node.js, and they get their parts with npm, which comes with it. You install them once, and every project uses them. Type this command and press Enter. It asks for the password you made when you set up Ubuntu. Type it and press Enter. Each letter shows as a star. When it's done, type node, a space and dash v. If it shows a version number, Node.js is ready.

1:42 Build the app with one prompt

Now describe the app to Copilot in the chat. Build me a neon beat maker that runs in my browser. Make it a Vite project that uses Tone.js for the sound. Give it a glowing step sequencer for drums and bass that pulses to the music, load a catchy beat so it plays as soon as I press play, and add tempo and volume controls. After a few seconds, Copilot may stop with a question, like whether it can download Vite's project setup. Its recommended answer is already picked, so click Submit. Asking for a Vite project gets you the standard setup that most web apps use, and Tone.js is a ready-made sound engine, so Copilot doesn't have to write one from scratch. Copilot's permissions are set to Allow all here, so it runs its commands without asking each time. If yours are on Default, click Allow whenever it asks. When it says Completed, it's done, and it sums up what it built. Click Keep to save the changes. Then press play.

2:53 The file structure: index.html, src, public

Now look at what Copilot made in the Explorer. This layout is the same in almost every web app, so once you know it, you can find your way around any project. index.html is the page the browser loads first. The src folder, short for source, holds the app's own code, and that's where Copilot did most of its work. You don't need to read it. The public folder is for files that are used just as they are, like icons and images. The files at the top level, like package.json, hold the project's settings. And dist is a production build that Copilot made while testing. We'll come back to that at the end.

3:34 Dependencies: package.json and node_modules

Dependencies are code that other people wrote and shared, so your app doesn't start from zero. package.json lists them. Here's Tone.js, the sound engine, which becomes part of the app. And here's Vite, a dev dependency, which is a tool that's only used while you build. When Copilot ran npm install, npm downloaded all of them into the node_modules folder. Tone.js and Vite are in here, along with everything they need, because every dependency brings its own dependencies. That's about ninety megabytes in over five thousand files. You never change anything in it, and you never send it to anyone. If it ever breaks, delete it and run npm install, and it comes back exactly the same. package-lock.json records the exact version of every package, so every install gets the same ones. Copilot keeps it up to date, so leave it alone. Every dependency is code that runs on your computer, so stick to well-known packages. If the AI adds one you've never heard of, ask it why.

4:41 Development: npm run dev and hot reload

While you build, your app runs on a development server. Copilot started one in the background to test the app, but when you come back to a project later, you start it yourself. Open a new terminal and type npm run dev. The address it shows says localhost, which means your own computer, so only you can see it. The dev server watches your files while the app runs. For a new task, start a new chat with the plus button, so Copilot can focus on just that. A new chat starts on Default permissions, so switch it back to Allow all. Then ask for a change, like make it purple and pink. The moment it saves a file, the page updates by itself, without a refresh. That's called hot reload, and it's why building in development is so fast. Click Keep to save it.

5:38 Production: npm run build and the dist folder

Development is made for you. Production is what your visitors get. To make it, open another terminal with the plus button and type npm run build. If Copilot already made one, this replaces it with your latest changes. In a second, Vite packs your code, and just the parts of Tone.js the app uses, into a few small files in the dist folder. Look at the difference in size. node_modules is ninety megabytes, and the whole production build is about three hundred kilobytes. The dist folder is what you put online, and nothing else. To try the production build first, type npm run preview and open the address it shows. It's the same app, but now it's small, fast and ready for any web host. Everything in dist can be seen by anyone who visits, so never let the AI put a password or a secret key in your app's code. Those are the basics every app is built on: an IDE, a clear file structure, dependencies, and a development and production version. You bring the ideas, the agent brings the know-how, and now you understand what it's doing along the way. Be sure to leave a like and subscribe, so we can keep bringing you more great videos.