Skip to main content

Bundle App

You're in the home stretch! It's time to bundle your app. Bundling optimizes your code to reduce the number of server requests.

To bundle your app, you need to:

  1. Increment and synchronize your app version
  2. Build your app
  3. Create a Showpad bundle

Increment Version​

Incrementing your app's version allows you to distinguish between different releases. You can use your preferred package manager to increment your Showpad App's version number in the package.json file.

npm version [<version> | major | minor | patch]
tip

It's a good idea to use pre patches or tagged versions while developing in order to have consistent versioning while testing multiple versions in production.

Examples: 1.0.0-x | 1.0.0-beta.1 | 1.0.0-rc.1

Sync Version​

After incrementing your app's version, it's important to synchronize to avoid mismatch errors. Use the Experience App CLI to sync the app version from the package.json file to the manifest.json file.

npx experience-app-cli sync
tip

This command is the same in both versions of the CLI.

Build App​

Once your app's version is incremented and synchronized, you need to merge file types and create production files. This is known as a build.

npm run build

Alternatively, you can use your preferred frontend tooling to build or move the app to a folder called dist. Make sure the config.json and manifest.json files are present at the root of this folder.

Showpad Bundle​

The last step in the process is to create a Showpad bundle. Use the Experience App CLI to bundle the dist folder to a .showpad bundle.

npx experience-app-cli bundle --dist dist

The Experience App CLI will prompt for a directory if no --dist option has been passed.