feat: add production snippets and resources (#8286)

Skipped .NET and Android because they are not ready. Also swift does not
support env variables, so skipped for now.

Added all rest.

frontend/src/component/onboarding/dialog/SdkConnected.tsx

@@ -45,9 +45,9 @@ export const SdkConnected: FC<ISdkConnectedProps> = ({ sdk }) => {
             <Box sx={{ mt: 2 }}>
                 <SectionHeader>Production settings</SectionHeader>
                 <Typography variant='body2'>
-                    In order to validate the connection, we changed some
+                    We updated the Unleash code snippet to be production-ready.
-                    settings that you might want to revert. We recommend the
+                    We recommend applying the following new settings to avoid
-                    following default settings.
+                    exposing the API key and to follow best practices.
                 </Typography>
                 <Markdown components={{ code: CodeRenderer }}>
                     {productionSnippet}

frontend/src/component/onboarding/dialog/snippets/flutter.md

@@ -20,3 +20,21 @@ Timer.periodic(Duration(seconds: 1), (Timer timer) {
    print('Flag is ${unleash.isEnabled("<YOUR_FLAG>") ? "enabled" : "disabled"}');
 });
 ```
+---
+```dart
+import 'package:unleash_proxy_client_flutter/unleash_proxy_client_flutter.dart';
+import 'dart:async';
+import 'dart:io';
+
+final unleash = UnleashClient(
+    url: Uri.parse('<YOUR_API_URL>'),
+    clientKey: Platform.environment['UNLEASH_CLIENT_KEY']!,
+    appName: 'unleash-onboarding-flutter');
+
+unleash.start();
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/unleash_proxy_client_flutter)
+- [Flutter example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/Flutter)
+- [A/B Testing in Flutter using Unleash and Mixpanel](https://docs.getunleash.io/feature-flag-tutorials/flutter/a-b-testing)

frontend/src/component/onboarding/dialog/snippets/go.md

@@ -28,3 +28,27 @@ func main() {
     }
 }
 ```
+
+---
+```go
+import (
+    "github.com/Unleash/unleash-client-go/v3"
+    "net/http"
+    "time"
+)
+
+func init() {
+    unleash.Initialize(
+        unleash.WithListener(&unleash.DebugListener{}),
+        unleash.WithAppName("unleash-onboarding-golang"),
+        unleash.WithUrl("<YOUR_API_URL>"),
+        unleash.WithCustomHeaders(http.Header{
+            "Authorization": {os.Getenv("UNLEASH_API_KEY")},
+        })
+    )
+}
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/unleash-client-go)
+- [Go SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/Go)

frontend/src/component/onboarding/dialog/snippets/java.md

@@ -25,3 +25,18 @@ while (true) {
     Thread.sleep(1000);
 }
 ```
+
+---
+```java
+UnleashConfig config = UnleashConfig.builder()
+    .appName("unleash-onboarding-java")
+    .instanceId("unleash-onboarding-instance")
+    .unleashAPI("<YOUR_API_URL>")
+    .apiKey(System.getenv("UNLEASH_API_KEY"))
+    .build();
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/unleash-client-java)
+- [Java SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/Java)
+- [How to Implement Feature Flags in Java](https://docs.getunleash.io/feature-flag-tutorials/java)

frontend/src/component/onboarding/dialog/snippets/javascript.md

@@ -20,3 +20,16 @@ setInterval(() => {
     console.log('Is enabled', unleash.isEnabled('<YOUR_FLAG>'));
 }, 1000);
 ```
+---
+```js
+const unleash = new UnleashClient({
+    url: '<YOUR_API_URL>',
+    clientKey: process.env.UNLEASH_API_TOKEN,
+    appName: 'unleash-onboarding-javascript',
+});
+unleash.start();
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/unleash-proxy-client-js)
+- [JavaScript SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/JavaScript)

frontend/src/component/onboarding/dialog/snippets/nodejs.md

@@ -32,5 +32,5 @@ const unleash = initialize({
 
 ---
 - [SDK repository with documentation](https://github.com/Unleash/unleash-client-node)
-- [Node.js SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/JavaScript)
+- [Node.js SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/NodeJS)
 - [Node.js SDK tutorial](https://dev.to/reeshee/how-to-implement-feature-flags-in-nodejs-using-unleash-3907)

frontend/src/component/onboarding/dialog/snippets/php.md

@@ -24,3 +24,16 @@ while (true) {
     sleep(1);
 }
 ```
+---
+```php
+$unleash = UnleashBuilder::create()
+    ->withAppName('unleash-onboarding-php')
+    ->withAppUrl('<YOUR_API_URL>')
+    ->withHeader('Authorization', getenv('UNLEASH_API_TOKEN'))
+    ->withInstanceId('unleash-onboarding-instance')
+    ->build();
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/unleash-client-php)
+- [PHP SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/PHP)

frontend/src/component/onboarding/dialog/snippets/python.md

@@ -20,3 +20,19 @@ while True:
     print(client.is_enabled("<YOUR_FLAG>"))
     asyncio.run(asyncio.sleep(1))
 ```
+---
+```python
+from UnleashClient import UnleashClient
+import asyncio
+import os
+
+client = UnleashClient(
+    url="<YOUR_API_URL>",
+    app_name="unleash-onboarding-python",
+    custom_headers={'Authorization': os.getenv('UNLEASH_API_TOKEN')}
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/unleash-client-python)
+- [Python SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/Python)
+- [How to Implement Feature Flags in Python](https://docs.getunleash.io/feature-flag-tutorials/python)

frontend/src/component/onboarding/dialog/snippets/react.md

@@ -36,3 +36,17 @@ const TestComponent = () => {
   return enabled ? 'Flag is enabled' : 'Flag is disabled'
 };
 ```
+---
+```jsx
+const config = {
+  url: '<YOUR_API_URL>', 
+  clientKey: process.env.UNLEASH_API_TOKEN,
+  appName: 'unleash-onboarding-react',
+};
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/proxy-client-react)
+- [React SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/React)
+- [https://docs.getunleash.io/feature-flag-tutorials/react](https://docs.getunleash.io/feature-flag-tutorials/react)
+

frontend/src/component/onboarding/dialog/snippets/ruby.md

@@ -12,7 +12,6 @@ require 'unleash'
   custom_http_headers: { 'Authorization': "<YOUR_API_TOKEN>" },
   app_name: 'unleash-onboarding-ruby',
   instance_id: 'unleash-onboarding-ruby',
-  refresh_interval: 3, # In production use interval of >15s
   metrics_interval: 3, # In production use interval of >15s
 )
 
@@ -26,3 +25,17 @@ while true
 end
 
 ```
+---
+```rb
+@unleash = Unleash::Client.new(
+  url: "<YOUR_API_URL>",
+  custom_http_headers: { 'Authorization': ENV['UNLEASH_API_TOKEN'] },
+  app_name: 'unleash-onboarding-ruby',
+  instance_id: 'unleash-onboarding-ruby',
+)
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/unleash-client-ruby)
+- [Ruby example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/Ruby)
+- [How to Implement Feature Flags in Ruby](https://docs.getunleash.io/feature-flag-tutorials/ruby)

frontend/src/component/onboarding/dialog/snippets/rust.md

@@ -50,3 +50,22 @@ async fn main() -> Result<(), Box<dyn Error + Send + Sync>> {
     Ok(())
 }
 ```
+---
+```rust
+let api_token = env::var("UNLEASH_API_TOKEN").expect("UNLEASH_API_TOKEN environment variable not set");
+
+let client: Client<Flags, reqwest::Client> = ClientBuilder::default()
+    .interval(5000) // Polling & metrics interval - default 15000 (ms)
+    .into_client(
+        "<YOUR_API_URL>",
+        "unleash-onboarding-rust",
+        "unleash-onboarding-instance",
+        Some(api_token.to_owned()),
+    )?;
+client.register().await?;
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/unleash-client-rust)
+- [Rust example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/Rust)
+- [How to Implement Feature Flags in Rust](https://docs.getunleash.io/feature-flag-tutorials/rust)

frontend/src/component/onboarding/dialog/snippets/svelte.md

@@ -11,8 +11,7 @@ npm install @unleash/proxy-client-svelte
 	const config = {
         url: '<YOUR_API_URL>',
         clientKey: '<YOUR_API_TOKEN>',
-        appName: 'unleash-onboarding-svelte'
+        appName: 'unleash-onboarding-svelte',
-        refreshInterval: 5,
         metricsInterval: 5,
 	};
 </script>
@@ -39,3 +38,16 @@ npm install @unleash/proxy-client-svelte
     </p>
 </section>
 ```
+---
+```svelte
+const config = {
+    url: '<YOUR_API_URL>',
+    clientKey: import.meta.env.VITE_UNLEASH_API_TOKEN,
+    appName: 'unleash-onboarding-svelte',
+};
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/proxy-client-svelte)
+- [Svelte example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/Svelte)
+- [How to Implement Feature Flags in SvelteKit](https://docs.getunleash.io/feature-flag-tutorials/sveltekit)

frontend/src/component/onboarding/dialog/snippets/vue.md

@@ -12,7 +12,6 @@ npm install @unleash/proxy-client-vue
         url: '<YOUR_API_URL>',
         clientKey: '<YOUR_API_TOKEN>',
         appName: 'unleash-onboarding-vue',
-        refreshInterval: 5,
         metricsInterval: 5,
     }
 </script>
@@ -37,3 +36,15 @@ npm install @unleash/proxy-client-vue
   </div>
 </template>
 ```
+---
+```svelte
+const config = {
+    url: '<YOUR_API_URL>',
+    clientKey: import.meta.env.VITE_UNLEASH_API_TOKEN,
+    appName: 'unleash-onboarding-vue',
+}
+```
+
+---
+- [SDK repository with documentation](https://github.com/Unleash/proxy-client-vue)
+- [Vue example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/Vue)