Skip to main content

Scaffolding

Legacy Process

The information here applies only for Showpad Apps v1 (deprecated). While your existing v1 Showpad Apps will continue to work, we strongly recommend:

For a fast and lean development experience, the first step when developing a custom Showpad App is to create a project with the Vite build tool.

Key features include:

  • Dev server that provides rich feature enhancements
  • Build command to bundle your code for pre-configured output
  • Wide browser compatibility
  • TypeScript support
  • and more!

Create Vite Project​

Open a terminal and use the following command to create your project:

npm init vite@latest create-experience-app

The Vite CLI will prompt you to select a framework and a variant. Select the following:

  • Select a framework: Vanilla
  • Select a variant: TypeScript

Execute the suggested commands.

Change working directory​

Change the working directory to your new project:

cd create-experience-app

Install required packages​

Vite will prompt you to install the required packages from the package.json file. Use your preferred package manager to run the following:

npm install

Configure Filepaths​

Showpad Apps are displayed in iframes. Absolute paths might resolve incorrectly which can cause issues when importing files or routing in your single-page application (SPA). Therefore, you should configure Vite to use relative paths.

touch vite.config.ts

Add the following to vite.config.ts to specify a relative base path:

export default {
  base: './',
};