Instructor: [00:00] Getting up and running with Parcel is easy. It only takes a couple of steps. The first thing we need to do is install the package globally via NPM or Yarn.

[00:09] In this example, we'll use NPM. We'll type NPM install -gparcel-bundler. I already have the package installed, so I won't execute this.

[00:20] The next step is to initialize a project. We'll say NPM init-y. This will give us a package.json file with all of the defaults filled in. The next thing we'll do is go ahead and initialize an index.html file. The next thing we'll do is open up the index.html file in our text editor.

[00:41] I'm going to stub out an HTML, slip it here. We'll say "Up and Running with Parcel" as the title. Lastly, we will go ahead and create a script reference to source and then ./index.js, which does not exist yet, but we will create it in a second. We're going to save this.

[01:05] Now we will create an index.js file. This is going to be the entry point for our app. We'll open up this index.js file. We will say constl equals document.queryselector, and we'll call that on an ID of app, which does not yet exist.

[01:25] Then we will say l.innerHTML equals Hello World. We'll use it template literal there. Now we'll open up the index.html file again and we'll make that element. We'll say div with an ID of app, and we will close the tag there.

[01:49] The next step is to launch our dev server with the command Parcel, and we'll call it on index.html. By default, it will launch a dev server on localhost 1234.

[02:02] We will open that up here and we see Hello World. Now let's go back to the code base to learn a little more about what Parcel just did for us.

[02:11] If you look over here, you're going to see two new folders. You have a .cache folder and a dist folder. These were generated by Parcel when we ran the Parcel command.

[02:19] The cache folder is used by Parcel to speed up build time during development. We can ignore this for now, as we will cover this more in-depth in a future lesson.

[02:26] The dist folder is the output directory where Parcel puts all the files after it builds the project. You'll see in this folder we have an index.html file, a JavaScript file, and a source map.

[02:36] If we take a look at the index.html file, we'll notice that it's pretty much the same as the one that we created with one small change here at the bottom.

[02:44] Instead of pointing to index.js as the entry point for the app, Parcel is now pointing to a special JavaScript file that it generated during the build. We can open this file here and take a look. Now this file is obviously much bigger than the simple one we created.

[03:00] The app we created was only a few lines long and just output Hello World to the screen. This file is 280 lines long. That's not anything to worry about.

[03:08] This is just something Parcel is outputting during development mode in order to give us hot module replacement, error output, and things like that.

[03:16] Now if we scroll down a bit, we can actually see our app begin here on line 106. This is where we select the app element and this is where we output Hello World.