Skip to main content

Develop App

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:

Now we're getting somewhere! It's time to really dig in and develop your custom Showpad App.

Development Server​

It's always helpful to be able to view your progress. For this, you want to run the development server to view your app.

npm run dev

The server is now running on the URL returned by the command. Open your browser and go to this local URL, and you'll see the HTML content of your index.html file.

Proxy Server​

Since you don't have access to the Showpad functionality on your development server, an intermediate server is required. Both versions of the Experience App CLI provide a command to spin up this proxy server:

Version 3.xVersion 2.x
The proxy command is available. It includes the option to specify a --profile.The proxy command is available.
npx experience-app-cli proxy
Terminals

Make sure the development server and proxy server are running parallel.

tip

You can add the code for this command in the "scripts" section of your package.json file. This creates a shortcut you can use to start the proxy server with:

npx proxy

Update TypeScript File​

Replace the contents of the main.ts file with the following code. This will make your app display "Hello" + the user' name instead of "Hello Vite".

import { Showpad } from '@showpad/experience-app-sdk';
import './style.css';

const app = document.querySelector<HTMLDivElement>('#app')!;

const main = async (): Promise<void> => {
  // Always wait for ShowpadLib to be loaded.
  await Showpad.onShowpadLibLoaded();

  try {
    // Get current Showpad user information and display it in the title.
    const userInfo = await Showpad.getUserInfo();
    app.innerHTML = `<h1>Hello ${userInfo.fullName}!</h1>`;
  } catch (error) {
    // Show a native error toast.
    Showpad.handleErrorWithToast(error);
  }
};

main();