SvelteKit UI as JS example

README.md

@@ -8,6 +8,12 @@
 - Optional security UI for quick bootstrapping (Blazor, and components in auto mode).
 - **Designed to manage subscriptions and multi-tenants.**
 
+## News
+
+SvelteKit Frontend added. (not working in Aspire with fnm), so:
+
+`npm install, npm run dev in svelte-link-ui folder`
+
 ## Goal
 
 This project allows you to choose any OAuth provider and remain independent in terms of your security design. You can add any frontend (Blazor, Next.js, SvelteKit) or backend APIs in front or behind this security layer. For a full SPA, you can modify Yarp to be a full BFF (Backend for Frontend).

UbikLink.AppHost/Program.cs

@@ -29,7 +29,7 @@
 var serviceBus = builder.AddConnectionString("messaging");
 
 //RabbitMQ (local)
-var rabbitmq = builder.AddRabbitMQ("ubiklink-rabbitmq", rabbitUser, rabbitPassword)
+var rabbitmq = builder.AddRabbitMQ("ubiklink-rabbitmq", rabbitUser, rabbitPassword, 58842)
     .WithManagementPlugin()
     .WithLifetime(ContainerLifetime.Persistent);
 
@@ -42,7 +42,7 @@
 //var cache = builder.AddAzureRedis("cache");
 
 //Redis cache (local)
-var cache = builder.AddRedis("cache")
+var cache = builder.AddRedis("cache", 6379)
     .WithLifetime(ContainerLifetime.Persistent);
 
 //Security API
@@ -101,4 +101,11 @@
     .WithEnvironment("Messaging__RabbitUser", rabbitUser)
     .WithEnvironment("Messaging__RabbitPassword", rabbitPassword);
 
+//Add npm sevltekit project (not work with fnm.... because of path)
+//builder.AddNpmApp("svelte-ui", "../svelte-link-ui","dev")
+//    .WithEnvironment("BROWSER", "none")
+//    .WithHttpEndpoint(env: "PORT")
+//    .WithExternalHttpEndpoints()
+//    .PublishAsDockerFile();
+
 await builder.Build().RunAsync();

UbikLink.AppHost/Properties/launchSettings.json

@@ -2,7 +2,7 @@
   "profiles": {
     "https": {
       "commandName": "Project",
-      "launchBrowser": false,
+      "launchBrowser": true,
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development",
         "DOTNET_ENVIRONMENT": "Development",

UbikLink.AppHost/Realm/ubik-realm.json

@@ -3,7 +3,7 @@
   "realm": "ubik",
   "notBefore": 0,
   "defaultSignatureAlgorithm": "RS256",
-  "revokeRefreshToken": false,
+  "revokeRefreshToken": true,
   "refreshTokenMaxReuse": 0,
   "accessTokenLifespan": 660,
   "accessTokenLifespanForImplicitFlow": 900,

UbikLink.AppHost/UbikLink.AppHost.csproj

@@ -16,6 +16,7 @@
     <PackageReference Include="Aspire.Hosting.Azure.Redis" Version="9.0.0" />
     <PackageReference Include="Aspire.Hosting.Azure.ServiceBus" Version="9.0.0" />
     <PackageReference Include="Aspire.Hosting.Keycloak" Version="9.0.0-preview.5.24551.3" />
+    <PackageReference Include="Aspire.Hosting.NodeJs" Version="9.0.0" />
     <PackageReference Include="Aspire.Hosting.PostgreSQL" Version="9.0.0" />
     <PackageReference Include="Aspire.Hosting.RabbitMQ" Version="9.0.0" />
     <PackageReference Include="Aspire.Hosting.Redis" Version="9.0.0" />

UbikLink.Security.UI/Properties/launchSettings.json

@@ -14,7 +14,7 @@
       "https": {
         "commandName": "Project",
         "dotnetRunMessages": true,
-        "launchBrowser": true,
+        "launchBrowser": false,
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
         "applicationUrl": "https://localhost:7043;http://localhost:5076",
         "environmentVariables": {

svelte-link-ui/.env.local

@@ -0,0 +1,10 @@
+OIDC_ISSUER=http://localhost:8080/realms/ubik
+OIDC_CLIENT_ID=ubik_app
+OIDC_CLIENT_SECRET=Ye6Y36ocA4SaGqYzd0HgmqMhVaM2jlkE
+OIDC_AUDIENCE=account
+OIDC_REDIRECT_URI=http://localhost:5173/login/auth/callback
+REDIS_PORT=6379
+REDIS_HOST=localhost
+BACKEND_PROXY_URL=http://localhost:5235
+TOKEN_STORE_SECRET=Ye6Y36ocA4SaGqYzd0babaHgmqMhVaM2jlkE
+RABBIT_MQ_CONNECTION=amqp://guest:guest@localhost:58842

svelte-link-ui/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

svelte-link-ui/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

svelte-link-ui/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

svelte-link-ui/.prettierrc

@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"tailwindStylesheet": "./src/app.css",
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

svelte-link-ui/.vscode/settings.json

@@ -0,0 +1 @@
+{}

svelte-link-ui/README.md

@@ -0,0 +1,2 @@
+# sv
+

svelte-link-ui/eslint.config.js

@@ -0,0 +1,34 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	}
+);