In this off-platform project, we will apply a build tool to a finished project. We will use a React app for a photo gallery of vacation destinations that currently don't have any build tools. This project won't focus on adding new functionality. Instead, we will only be changing how the different resources are combined. You will get to choose to use either esbuild, parcel, or vite. If you need help deciding which tool to practice, check out the [Comparison of Build Tools](https://www.codecademy.com/content-items/c1b2b87f3d57213693331457df2c2a3e?preview=true) article. Or, you could try practicing all three tools! Remember that you can always review how to use esbuild, Parcel, and Vite in these articles: * [Building Apps with esbuild](https://www.codecademy.com/content-items/8bc4d5800d7176baeb95bfe26a2f30b7) * [Building Apps with Parcel](https://www.codecademy.com/content-items/75590844099192b35f4cc2dca9e7787f) * [Building Apps with Vite](https://www.codecademy.com/content-items/f49d9f4be7e9d27768f0dad6049aea2b) ### Download the Starting and Solution Code Download the [folder containing the starting and solution codes of the project](https://static-assets.codecademy.com/Courses/Learn-Build-Tools/vacation-destinations.zip). The **starting-codes** folder contains code to help you get started. The folder contains starting code for each tool: **esbuild-starting-code**, **parcel-starting-code**, and **vite-starting-code**. Make sure to use the starting code for the build tool of your choice, as the file structure will be slightly different. Follow the instructions below to complete the project. We've also included a **solution-codes** folder to help guide you if you get stuck. The folder contains solution code for each tool: **esbuild-solution-code**, **parcel-starting-code**, and **vite-starting-code**. You can also compare the solutions after you complete the project. ### Part 1 - Setting up the Project Let's get started by installing the necessary packages. First, install the dependencies in **package.json**. Then, install the package for the build tool of your choice.

Hint

You can install dependencies using `npm`. You will need to run installation twice—first to install dependencies defined in **package.json**, and second to install the package for the build tool. We recommand installing build tool packages using the `--save-dev` flag.

### Part 2 - Adding Scripts Next, let's define some custom scripts to the `scripts` section of **package.json**. Regardless of which build tool you are using, you will want to define a `build` command.

Hint

When defining the `build` command, if you are using esbuild or Parcel, you will need to set an entry point at **src/index.html**. If you are using esbuild, you will also need to set an exit point at **./dist**. Remember that we define custom commands through the following syntax: ```js scripts: { "customCommand" : "commandsToRun" } ``` If you are using Parcel or Vite, you will also want to define a `start` command to utilize their hot module reloading feature.

### Part 3 - Configuring the Build Tool Time to start setting up our build tool! Let's start by making sure our JavaScript files will be built properly. Depending on which build tool you are using, you might need to configure **.js** files to be interpreted as JSX.

Hint

If you are using esbuild, you will need to add a loader for `.jsx` in the `build ` command in the `scripts` section of **package.json**. If you are using Vite, you will need to change files with **.js** extensions to **.jsx**, with exception of **src/image.js** file. Make sure that the `src` file path for the `