Skip to main content

Develop App

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();