Skip to content

Latest commit

 

History

History

remix-cars-service

README.md

Car Services Example app

This is an example Remix app that demonstrates and experiments with Custom UI Extensions in its three types: Custom panels, Custom modals and Custom UI for app settings.

NB: This app should not be used as a production-ready app as OAuth installation and token verification are not covered here.
Sensitive information, such as tokens or credentials, should always be securely encrypted and stored according to best practices. Do not use hardcoded or plaintext tokens in production.

Examples

Custom Modal

Custom Modal

Custom Panel

Custom Panel

Custom UI Settings

Custom UI Settings

Run with StackBlitz

This option works well if you want to try out the examples without the need of local development setup or deployment to the cloud servers.

Open project in StackBlitz.

Use the generated URL in Marketplace Manager as the iframe URL for Custom UI Extension, i.e.

  • Set https://remix-cars-service--3000.local.webcontainer.io/list as the Iframe URL for the Custom Panel
  • Set https://remix-cars-service--3000.local.webcontainer.io/details as the Iframe URL for the Custom Modal. The name of Custom UI Extension should be set as Details, otherwise it won't be opened from Custom Panel with SDK command
  • Set https://remix-cars-service--3000.local.webcontainer.io/settings as the Iframe URL for the Settings page

Known issues

There is a limitation with Backend API when running service with StackBlitz: the item proposal update and reset from settings will not work. Please choose Deploy with Vercel for a full working example.

Deploy with Vercel

Create project

Deploy with Vercel

Alternative: use CLI

Clone the repository and switch to the folder with the project. Install vercel CLI tool and follow its instructions.

npm i -g vercel
vercel

Setup application in Marketplace Manager

Use the generated project URL in Marketplace Manager for Custom UI Extension, i.e.

  • Set https://remix-cars-service.vercel.app/list as the Iframe URL for the Custom Panel.
  • Set https://remix-cars-service.vercel.app/details as the Iframe URL for the Custom Modal. The name of Custom UI Extension should be set as Details. Otherwise, it won't be open from the Custom Panel with the SDK command.
  • Set https://remix-cars-service.vercel.app/settings as the Iframe URL for the Settings page

Known issues

If you see a 404 error on the main page, you might need to choose Remix as the Framework Preset for your project in settings.

Vercel App Settings

Local development

From your terminal:

npm i
npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Open up http://localhost:3000 and you should be ready to go!

Credits