> For the complete documentation index, see [llms.txt](https://timgeyssens.gitbook.io/ui-o-matic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://timgeyssens.gitbook.io/ui-o-matic/16.spaandfrontapi.md).

# 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:

```bash
# 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`:

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

2. Configure your database connection in `appsettings.json`:

```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`:

```csharp
app.UseUIOMaticSPA();
```

2. Configure the SPA settings in `appsettings.json`:

```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:

```csharp
// 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

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

### SPA Options

```json
{
  "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](https://github.com/TimGeyssens/UIOMatic)
* [SPA Documentation](https://github.com/TimGeyssens/UIOMatic)
* [Vue.js Documentation](https://vuejs.org/)
* [ASP.NET Core Documentation](https://docs.microsoft.com/en-us/aspnet/core/)