Step 2

Let's explore the template project created by create-vite:

.
└── brick-breaker
    ├── .gitignore
    ├── favicon.svg
    ├── index.html
    ├── main.js
    ├── package.json
    └── style.css
  • The .gitignore is a minimal list of files and folders to be ignored when Git tracks this project.
  • The favicon.svg is a Scalar Vector Graphic (SVG). The word favicon (pronounced /ˈfæv.ɪˌkɒn/) is short for "favorite icon." You link it in the HTML file. Browsers display a page's favicon in the address bar next to the page's title.
  • 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.
  • 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 NPM, 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",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.5.4"
  }
}

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.

npm 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, package-lock.json, 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 package-lock.json is automatically generated and modified. Therefore, you should never directly edit it.

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