Create Your First Hello World App Extension

This tutorial walks you through the complete lifecycle:

1. Build a tiny extension
2. Test it in your App
3. Configure and export it
4. Import it into another App

Step 1: Create the Extension File

In your App, create this folder:

/extensions/hello-world/

Inside it, create Greeting.cshtml:

@inherits Custom.Hybrid.RazorTyped

<div class="alert alert-info">
  Hello, World
</div>

Tip

@inherits Custom.Hybrid.RazorTyped is optional, but recommended so you can use the 2sxc API later.

Step 2: Test the Extension Locally

• 1. Create a Test Razor View
• 2. Create a View Definition
• 3. Add the View to a Page

Create a test Razor file in your App (not in /extensions/). Render your extension in that file using @Html.Partial(...).

Tip

Keep this test file outside /extensions/ so it does not become part of your extension package.

Step 3: Configure and Build the Extension

• 1. Configure the Extension Definition
• 2. Export the Extension Package

Open App Settings -> App Extensions, then edit your extension.

Enable:

• Has Razor Files

Save the configuration.

Step 4: Import into Another App

• 1. Install the Package
• 2. Use It in a View

1. Go to App Settings -> App Extensions in the target App
2. Click +
3. Choose Select Files
4. Pick the exported package
5. Click Install

Optional: Publish to Marketplace

For production-ready extensions, you can publish packages in the 2sxc Marketplace.

Tip

If you want to publish, reach out and we can help with the packaging checklist.

Recap

You created, tested, configured, exported, and re-imported a working extension. That is the core workflow for all App Extensions.