Step 1

JavaScript is changing faster than its runtime environments can keep pace. For example, we will use import and export keywords (part of ES6 modules) in this chapter. These keywords were not supported in Chrome (or other browsers) until recently.

As a workaround, the community developed programs to write JavaScript using the latest features and transform it to an earlier version that would run seamlessly on the browser. These programs are typically called "transpiler" and are part of a "build tool." In addition to a transpiler, a build tool typically includes a bundler to combine several JavaScript files into a single (minified) .js file. As well as other utilities, like using a framework or library to bootstrap a web application.

There are many build tools available, and it is common practice to use one for web development. In this chapter, we will use a build tool called Vite (a French word for "fast," pronounced /vit/).

You must have Node and NPM installed on your computer. Please refer to Logistics for more details.

Open the terminal and change the directory to where you would like to store the files for this chapter. Next, run the following command: 

npx create-vite brick-breaker --template vanilla

This command will create the folder brick-breaker with the following files:

.
└── brick-breaker
    ├── .gitignore
    ├── favicon.svg
    ├── index.html
    ├── main.js
    ├── package.json
    └── style.css

We will explore these files. However, let's first demystify the command: 

npx create-vite brick-breaker --template vanilla
  • npx is an application build into NPM (Node Package Manager). It allows running a package (a library or program) without having to install it first.
  • create-vite is a command-line tool that scaffolds a Vite application.
  • brick-breaker is the name of our application.
  • --template allows quickly starting a project from a basic template for popular frameworks like React, Vue, and Svelte.
  • vanilla is a term developers use to refer to using plain JavaScript instead of a framework like React.
Resources