# How to create a component bundle

Source: https://dev.arcxp.com/pagebuilder-engine/how-to-guides/components-and-content/how-to-create-a-component-bundle/

If you’re starting a new project with PageBuilder Engine, you’ll need to create a brand new component bundle repository to work from. This is where you’ll write the code for components that make up your webpages, as well as where you define the content sources that your components will consume data from. The component bundle is where you will do almost all of your work as a PageBuilder Engine developer.

## npm, npx, and the PageBuilder Engine CLI

PageBuilder Engine applications are managed by a command-line tool: the PageBuilder Engine CLI. We’ll use the CLI tool to create and run our component bundle and perform various other maintenance tasks. If you’ve used tools like [Create-React-App](https://github.com/facebook/create-react-app) before, you’ll be right at home with the PageBuilder Engine CLI tool.

> **Note:**
> 
> Do **not** confuse the `@arc-fusion/cli` NPM package with the `fusion-cli` package created by Uber. Even though they have the same name, Arc XP’s PageBuilder Engine and CLI is an entirely different product, and (obviously) their CLI will not work with Arc XP PageBuilder Engine component bundles.

To install and run the CLI tool, first we need Node.js and its package manager, `npm` installed. If you don’t have them already, go ahead and [download and install Node.Js](https://www.npmjs.com/get-npm) (which includes Npm) and you should be good to go.

While it’s possible to install the PageBuilder Engine CLI module globally (with `npm i -g @arc-fusion/cli`), we’re instead going to install the CLI locally as a `devDependency` of our app and run it using NPM’s script executor, [Npx](https://www.npmjs.com/package/npx). This gives us the benefits of 1) not having to worry about whether our globally installed Node modules are in our system `PATH`, and 2) being able to keep our CLI versions in sync across team members, since it will be tagged in our `package.json`.

> **Note:**
> 
> `npx` comes pre-packaged with `npm` in NPM [Versions 5.2.0 And Later](https://github.com/npm/npm/releases/tag/v5.2.0). If for some reason you don’t have `npx` installed, or would like to install it separately, simply run `npm install -g npx`.

## Initializing a component bundle

To initialize a new component bundle, first let’s create a directory that we want our Feature Pack to live in and `cd` into it. We’ll call this one `Fusion-Movies`, since we’ll be displaying data about our favorite movies.

$ mkdir Fusion-Movies $ cd Fusion-Movies

Now, using the magic of `npx`, we’re going to install the PageBuilder Engine CLI and execute its `init` command all at once to create the skeleton of our repository:

$ npx @arc-fusion/cli init

> **Note:**
> 
> If you installed the `@arc-fusion/cli` as a global module instead of through `npx`, you can simply run `fusion init` in the directory you created to initialize the repo.
> 
> In the future, when this documentation references a command such as `npx fusion some-command`, run `fusion some-command`, without the `npx` prefix, to invoke its global equivalent.

If you run `ls` on the directory now, you should see that there are several files and folders created in your directory, and that your `package.json` lists `@arc-fusion/cli` as a `devDependency`! Here’s a description of what just happened:

1. `npx` downloaded the `@arc-fusion/cli` package and invoked its `init` command, which created the skeleton of our repository’s file structure
2. The `init` command also initialized the folder as an NPM package and created an accompanying `package.json` file
3. Finally, the `@arc-fusion/cli` was added to our newly created `package.json` as a `devDependency` so we can use it later to invoke further commands through `npx` without re-downloading it.

Great job. Now let’s take a closer look at what’s inside our brand new component bundle.