Step 2

Let's explore the template project created by vite:

.
└── brick-breaker
    ├── counter.js
    ├── index.html
    ├── javascript.svg
    ├── main.js
    ├── package.json
    ├── public
    │   └── vite.svg
    └── style.css

• The .gitignore is a minimal list of files and folders to be ignored when Git tracks this project.
• The javascript.svg and vite.svg are Scalar Vector Graphics (SVG). These graphics are displayed in the sample web app that comes in the template project.
• The index.html is a minimal boilerplate HTML file similar to those we created in the earlier chapters.
• The main.js is a minimal JavaScript file linked to the index.html similar to those we created in the earlier chapters. It makes use of counter.js which implements a simple counter!
• The style.css is linked to the index.html file and provides minimal styling similar to those we created in the earlier chapters.
• The package.json holds metadata relevant to the project. It is also used by Yarn for managing the project's dependencies, scripts, version, and a lot more. We will explore this further in a future chapter.

Let's glance over the content of package.json:

{
  "name": "brick-breaker",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^3.1.0"
  }
}

Notice the section under "scripts." We can use the keywords under the script to run the commands associated with them. First, however, you must install the "dependencies" for this project. In this case, the only dependency is the vite library.

Open the terminal and change the directory to brick-breaker folder. Then, run the following command.

yarn install

It will take a moment for the dependencies to be installed. Once done, you will have a folder, node_modules, added to brick-breaker. This folder contains the dependencies of your application (and their dependencies).

Make sure to always exclude the node_modules folder from your Git repository. The folder name is already included in your .gitignore file.

Additionally, a file, yarn.lock, is added to the brick-breaker folder. This file contains the dependency tree of your application (its dependencies, and the dependencies of the dependencies, etc.).

The yarn.lock is automatically generated and modified. Therefore, you should never directly edit it.

Make sure to include yarn.lock in your Git repository. You need this file to get the exact dependencies your project is built on for any subsequent installs.