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:

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

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:

Add the SPA middleware to your Program.cs:

app.UseUIOMaticSPA();

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:

Implementing custom repositories
Adding custom controllers
Configuring authentication
Adding custom middleware

SPA Customization

The SPA can be customized by:

Modifying the Vue components
Adding custom field types
Customizing the theme
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:

Always enable authentication in production
Use HTTPS
Configure CORS properly
Implement rate limiting
Use secure connection strings
Keep packages updated

Troubleshooting

Common issues and solutions:

API not responding: Check connection strings and database access
SPA not loading: Verify API URL and CORS settings
Authentication failing: Check JWT configuration
File uploads not working: Verify file permissions and configuration