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 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 (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. 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. 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.