Skip to main content

App Setup

||

Every Showpad App is built around a manifest.json file that defines its metadata, extensions, and configuration. This page walks you through creating the root folder, manifest, and folder structure needed to get started.

What you’ll learn:

  • How to create your app’s root folder
  • How to write a minimal manifest.json
  • What a typical folder structure looks like

The following diagram shows a Showpad App with four extensions: two Experience types (A & B), one User Settings, and one Admin Settings.

Showpad App folder structure with four extensions

Create Root Folder​

Create a root folder to contain all of your app’s files:

mkdir my-app
cd my-app

Create Manifest​

Inside the root folder, create a manifest.json file. The following is a starting-point example — you will add a required extension declaration in the next step. This example:

  • Defines an app called My App with the unique identifier my.org.my-app and version 0.0.1
  • Includes both a short and full description
  • References an icon and gallery images displayed on the app’s details view in the Admin App
{
  "$schema": "https://schema.showpad.com/app/manifest.v2.json",
  "schema": {
    "type": "app-manifest",
    "version": 2
  },
  "appKey": "my.org.my-app",
  "name": "My App",
  "version": "0.0.1",
  "icon": "main-icon.png",
  "images": ["gallery-image-1.jpg", "gallery-image-2.jpg"],
  "description": {
    "short": "My short description",
    "full": "My long description"
  },
  "developer": {
    "name": "My organization",
    "websiteUrl": "https://my-organization.com"
  }
}

Folder Structure Example​

The following folder structure matches the diagram above - an app with two Experience types, one Admin Settings extension, and one User Settings extension:

/my-app/
/my-app/manifest.json
/my-app/main-icon.png
/my-app/gallery-image-1.jpg
/my-app/gallery-image-2.jpg
/my-app/experience-type-a/index.html
/my-app/experience-type-a/config.json
/my-app/experience-type-a/resources/app.js
/my-app/experience-type-b/index.html
/my-app/experience-type-b/config.json
/my-app/experience-type-b/resources/styles.css
/my-app/my-admin-setting/index.html
/my-app/my-user-setting/index.html

Next Steps​

Was this page helpful?