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

• Front.API GitHub Repository

• SPA Documentation

• Vue.js Documentation

• ASP.NET Core Documentation