📔
ui-o-matic documentation
  • UI-O-Matic Docs
  • Usage
  • Default Field Editor Views
  • Custom Field Editor Views
  • Listview
  • List Field Views
  • List View Actions
  • Dashboard
  • Property Editors
  • Event Model
  • Config Settings
  • Addons
  • Advanced
  • KnowIssues
  • FurtherReading
  • Content Apps
  • SPA and Front.API
Powered by GitBook
On this page
  • Installation
  • Front.API Setup
  • SPA Setup
  • Using the SPA
  • Customization
  • API Customization
  • SPA Customization
  • Example
  • Configuration Options
  • Front.API Options
  • SPA Options
  • Security Considerations
  • Troubleshooting
  • Further Reading

Was this helpful?

SPA and Front.API

UIOMatic now includes a standalone SPA (Single Page Application) and Front.API that can be used independently of Umbraco. This allows you to create a custom backend for your UIOMatic data without requiring Umbraco.

Installation

You can install the required packages via NuGet:

# For the API
dotnet add package UIOMatic.Front.API

# For the SPA
dotnet add package UIOMatic.SPA

Front.API Setup

The Front.API provides a RESTful API for managing your UIOMatic data. To set it up:

  1. Add the following to your Program.cs:

using UIOMatic.Front.API;

var builder = WebApplication.CreateBuilder(args);

// Add services
builder.Services.AddUIOMaticFrontAPI();

// Add authentication (optional)
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options => {
        // Configure JWT options
    });

var app = builder.Build();

// Configure middleware
app.UseUIOMaticFrontAPI();

app.Run();
  1. Configure your database connection in appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "your-connection-string"
  }
}

SPA Setup

The SPA provides a modern Vue.js-based interface for managing your UIOMatic data. To set it up:

  1. Add the SPA middleware to your Program.cs:

app.UseUIOMaticSPA();
  1. Configure the SPA settings in appsettings.json:

{
  "UIOMatic": {
    "SPA": {
      "ApiUrl": "https://your-api-url",
      "AuthEnabled": true
    }
  }
}

Using the SPA

The SPA provides the following features:

  • Modern, responsive UI built with Vue.js

  • Authentication support

  • CRUD operations for your UIOMatic types

  • List views with sorting and filtering

  • Form validation

  • File uploads

  • Rich text editing

  • And more...

Customization

API Customization

You can customize the API behavior by:

  1. Implementing custom repositories

  2. Adding custom controllers

  3. Configuring authentication

  4. Adding custom middleware

SPA Customization

The SPA can be customized by:

  1. Modifying the Vue components

  2. Adding custom field types

  3. Customizing the theme

  4. Adding custom actions

Example

Here's a complete example of setting up both the API and SPA:

// Program.cs
using UIOMatic.Front.API;

var builder = WebApplication.CreateBuilder(args);

// Add services
builder.Services.AddUIOMaticFrontAPI();

// Add authentication
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options => {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = builder.Configuration["Jwt:Issuer"],
            ValidAudience = builder.Configuration["Jwt:Audience"],
            IssuerSigningKey = new SymmetricSecurityKey(
                Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
        };
    });

var app = builder.Build();

// Configure middleware
app.UseUIOMaticFrontAPI();
app.UseUIOMaticSPA();

app.Run();

Configuration Options

Front.API Options

{
  "UIOMatic": {
    "FrontAPI": {
      "EnableSwagger": true,
      "EnableCors": true,
      "CorsOrigins": ["https://your-spa-url"],
      "DefaultPageSize": 20
    }
  }
}

SPA Options

{
  "UIOMatic": {
    "SPA": {
      "ApiUrl": "https://your-api-url",
      "AuthEnabled": true,
      "Theme": "light",
      "DefaultPageSize": 20,
      "EnableFileUploads": true
    }
  }
}

Security Considerations

When using the Front.API and SPA:

  1. Always enable authentication in production

  2. Use HTTPS

  3. Configure CORS properly

  4. Implement rate limiting

  5. Use secure connection strings

  6. Keep packages updated

Troubleshooting

Common issues and solutions:

  1. API not responding: Check connection strings and database access

  2. SPA not loading: Verify API URL and CORS settings

  3. Authentication failing: Check JWT configuration

  4. File uploads not working: Verify file permissions and configuration

Further Reading

PreviousContent Apps

Last updated 14 days ago

Was this helpful?

Front.API GitHub Repository
SPA Documentation
Vue.js Documentation
ASP.NET Core Documentation