Feat/rust actix postgres quickstart

src/components/QuickStartFilter.js

@@ -1,14 +1,14 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import quickstarts from "./QuickStartList";
 import Link from "@docusaurus/Link";
-import {FaGolang} from "react-icons/fa6";
-import {FaJava, FaLaptopCode, FaDocker, FaPython, FaCheck, FaArrowRight, FaArrowLeft} from "react-icons/fa";
-import {TbBrandCSharp} from "react-icons/tb";
-import {IoLogoJavascript} from "react-icons/io5";
-import {useColorMode} from "@docusaurus/theme-common";
+import { FaGolang, FaRust } from "react-icons/fa6";
+import { FaJava, FaLaptopCode, FaDocker, FaPython, FaCheck, FaArrowRight, FaArrowLeft } from "react-icons/fa";
+import { TbBrandCSharp } from "react-icons/tb";
+import { IoLogoJavascript } from "react-icons/io5";
+import { useColorMode } from "@docusaurus/theme-common";
 
-export default function QuickstartFilter({defaultLanguage = null}) {
-  const {colorMode} = useColorMode();
+export default function QuickstartFilter({ defaultLanguage = null }) {
+  const { colorMode } = useColorMode();
   const isDark = colorMode === "dark";
 
   const [currentStep, setCurrentStep] = useState(defaultLanguage ? 2 : 1);
@@ -23,22 +23,23 @@ export default function QuickstartFilter({defaultLanguage = null}) {
   });
 
   const languages = [
-    {name: "Go", icon: <FaGolang size={24} />, color: "#00ADD8"},
-    {name: "Python", icon: <FaPython size={24} />, color: "#3776AB"},
-    {name: "Java", icon: <FaJava size={24} />, color: "#007396"},
-    {name: "JS/TS", icon: <IoLogoJavascript size={24} />, color: "#F7DF1E"},
-    {name: "C#", icon: <TbBrandCSharp size={24} />, color: "#512BD4"},
+    { name: "Go", icon: <FaGolang size={24} />, color: "#00ADD8" },
+    { name: "Python", icon: <FaPython size={24} />, color: "#3776AB" },
+    { name: "Java", icon: <FaJava size={24} />, color: "#007396" },
+    { name: "JS/TS", icon: <IoLogoJavascript size={24} />, color: "#F7DF1E" },
+    { name: "C#", icon: <TbBrandCSharp size={24} />, color: "#512BD4" },
+    { name: "Rust", icon: <FaRust size={24} />, color: "#DEA584" },
   ];
 
   const servers = [
-    {name: "Local", icon: <FaLaptopCode size={24} />, description: "Run directly on your machine"},
-    {name: "Docker", icon: <FaDocker size={24} />, description: "Run in a Docker container"},
+    { name: "Local", icon: <FaLaptopCode size={24} />, description: "Run directly on your machine" },
+    { name: "Docker", icon: <FaDocker size={24} />, description: "Run in a Docker container" },
   ];
 
   const steps = [
-    {id: 1, label: "Language", icon: languages.find(l => l.name === language)?.icon || null},
-    {id: 2, label: "Environment", icon: server === "Docker" ? <FaDocker size={16} /> : server === "Local" ? <FaLaptopCode size={16} /> : null},
-    {id: 3, label: "Quickstart", icon: null},
+    { id: 1, label: "Language", icon: languages.find(l => l.name === language)?.icon || null },
+    { id: 2, label: "Environment", icon: server === "Docker" ? <FaDocker size={16} /> : server === "Local" ? <FaLaptopCode size={16} /> : null },
+    { id: 3, label: "Quickstart", icon: null },
   ];
 
   const handleLanguageSelect = (lang) => {
@@ -372,10 +373,10 @@ export default function QuickstartFilter({defaultLanguage = null}) {
               </div>
               <span>{step.label}</span>
               {currentStep > step.id && step.id === 1 && language && (
-                <span style={{color: '#ff914d', marginLeft: '0.25rem'}}>({language})</span>
+                <span style={{ color: '#ff914d', marginLeft: '0.25rem' }}>({language})</span>
               )}
               {currentStep > step.id && step.id === 2 && server && (
-                <span style={{color: '#ff914d', marginLeft: '0.25rem'}}>({server})</span>
+                <span style={{ color: '#ff914d', marginLeft: '0.25rem' }}>({server})</span>
               )}
             </div>
             {idx < steps.length - 1 && (
@@ -402,7 +403,7 @@ export default function QuickstartFilter({defaultLanguage = null}) {
                   <div className="wizard-option-radio">
                     {language === lang.name && <FaCheck size={10} color="#fff" />}
                   </div>
-                  <div className="wizard-option-icon" style={{color: lang.color}}>
+                  <div className="wizard-option-icon" style={{ color: lang.color }}>
                     {lang.icon}
                   </div>
                   <span className="wizard-option-label">{lang.name}</span>
@@ -417,15 +418,15 @@ export default function QuickstartFilter({defaultLanguage = null}) {
           <>
             <h3 className="wizard-title">Select your environment</h3>
             <p className="wizard-subtitle">Choose where you want to run the application server</p>
-            <div className="wizard-options" style={{gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))'}}>
+            <div className="wizard-options" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))' }}>
               {servers.map((srv) => (
                 <button
                   key={srv.name}
                   className={`wizard-option ${server === srv.name ? 'selected' : ''}`}
                   onClick={() => handleServerSelect(srv.name)}
-                  style={{flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem'}}
+                  style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}
                 >
-                  <div style={{display: 'flex', alignItems: 'center', gap: '0.75rem', width: '100%'}}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', width: '100%' }}>
                     <div className="wizard-option-radio">
                       {server === srv.name && <FaCheck size={10} color="#fff" />}
                     </div>
@@ -434,7 +435,7 @@ export default function QuickstartFilter({defaultLanguage = null}) {
                     </div>
                     <span className="wizard-option-label">{srv.name}</span>
                   </div>
-                  <p className="wizard-option-desc" style={{marginLeft: '3.5rem'}}>{srv.description}</p>
+                  <p className="wizard-option-desc" style={{ marginLeft: '3.5rem' }}>{srv.description}</p>
                 </button>
               ))}
             </div>

src/components/QuickStartList.js

@@ -395,6 +395,23 @@ const quickstarts = [
       "A sample app to demonstrate Keploy integration capabilities using TypeScript and Nhost.",
     link: "/docs/quickstart/samples-typescript/#running-the-app-using-docker",
   },
+  // Rust list
+  {
+    title: "Actix + Postgres",
+    language: "Rust",
+    server: "Docker",
+    description:
+      "A sample Actix-web app to demonstrate how seamlessly Keploy integrates with Rust and PostgreSQL.",
+    link: "/docs/quickstart/rust-actix-postgres/#option-1-using-docker-compose-",
+  },
+  {
+    title: "Actix + Postgres",
+    language: "Rust",
+    server: "Local",
+    description:
+      "A sample Actix-web app to demonstrate how seamlessly Keploy integrates with Rust and PostgreSQL.",
+    link: "/docs/quickstart/rust-actix-postgres/#option-2-running-locally-",
+  },
 ];
 
 export default quickstarts;

versioned_docs/version-4.0.0/quickstart/rust-actix-postgres.md

@@ -0,0 +1,169 @@
+---
+id: rust-actix-postgres
+title: Application with Postgres
+sidebar_label: Actix + Postgres
+description: A sample Actix-web application to demonstrate Keploy integration capabilities using Rust and Postgres.
+tags:
+  - Rust
+  - Actix
+  - Postgres
+  - Quickstart
+keyword:
+  - Rust
+  - Actix
+  - Postgres
+  - API Test generator
+  - Auto Testcase generation
+---
+
+import InstallReminder from '@site/src/components/InstallReminder';
+
+<InstallReminder />
+
+## Introduction
+
+This guide will walk you through setting up a simple **Rust** application using **Actix-web** and **Postgres** (via **SQLx**) and integrating it with **Keploy** for automated testing.
+
+We will cover two methods:
+1. **Docker Compose** (Recommended)
+2. **Local Binary**
+
+## Application Setup
+
+### Clone the Repository
+
+```bash
+git clone https://github.com/keploy/samples-rust.git
+cd samples-rust/rust-actix-postgres
+```
+
+## Option 1: Using Docker Compose
+
+This is the easiest way to get started as it sets up both the application and the Postgres database for you.
+
+### 1. Start the Application
+
+```bash
+docker compose up -d
+```
+
+![Start Application](/img/rust-docker-up.png)
+
+The application will be running at `http://localhost:8080`.
+
+### 2. Record Test Cases
+
+To record test cases, we use the `keploy record` command. This will start your application (via Docker) and proxy the traffic to record interactions.
+
+```bash
+keploy record -c "docker compose up" --container-name rust-app
+```
+
+![Start Recording](/img/rust-record-start.png)
+
+Now, generate some traffic using `curl` or Postman:
+
+**Create an Item:**
+
+```bash
+curl -X POST http://localhost:8080/items \
+  -H "Content-Type: application/json" \
+  -d '{"name": "Keploy Guide", "description": "Writing tests made easy"}'
+```
+
+**Get Items:**
+
+```bash
+curl http://localhost:8080/items
+```
+
+![Make API Calls](/img/rust-curl-traffic.png)
+
+Stop the recording by pressing `Ctrl+C`. You should see a `keploy/` directory created with your test cases.
+
+![Captured Test Cases](/img/rust-record-captured.png)
+
+### 3. Replay Test Cases
+
+Now, let's verify the recorded test cases.
+
+```bash
+keploy test -c "docker compose up" --container-name rust-app --delay 10
+```
+
+![Test Replay](/img/rust-test-run.png)
+
+Keploy will compare the current responses with the recorded ones.
+
+---
+
+## Option 2: Running Locally
+
+If you prefer to run the Rust binary directly, follow these steps.
+
+### 1. Start the Database
+
+We'll use Docker to spin up the Postgres database only.
+
+```bash
+docker compose up db -d
+```
+
+![Start Database](/img/rust-local-db.png)
+
+### 2. Configure Environment
+
+To connect to the database, you need to set the connection string. You can either create a `.env` file or export the variable.
+
+```bash
+export DATABASE_URL=postgres://postgres:password@localhost:5432/keploy
+```
+
+### 3. Record Test Cases
+
+Now, run the application with Keploy to record traffic.
+
+```bash
+keploy record -c "cargo run"
+```
+
+![Start Recording](/img/rust-local-record.png)
+
+Once the application matches `Server running at http://0.0.0.0:8080`, generate some traffic.
+
+**Create an Item:**
+
+```bash
+curl -X POST http://localhost:8080/items \
+  -H "Content-Type: application/json" \
+  -d '{"name": "Keploy Guide", "description": "Writing tests made easy"}'
+```
+
+**Get Items:**
+
+```bash
+curl http://localhost:8080/items
+```
+
+![Generate Traffic](/img/rust-local-curl.png)
+
+Stop the recording by pressing `Ctrl+C`.
+
+### 4. Replay Test Cases
+
+Now, let's verify the recorded test cases.
+
+```bash
+keploy test -c "cargo run" --delay 10
+```
+
+![Test Replay](/img/rust-local-test.png)
+
+Keploy will run the tests and show the results in the terminal.
+
+## Summary
+
+You have successfully:
+1.  Set up a Rust Actix-web application.
+2.  Recorded API interactions using Keploy.
+3.  Replayed and validated the interactions.

versioned_sidebars/version-4.0.0-sidebars.json

@@ -118,6 +118,15 @@
               "items": [
                 "quickstart/samples-csharp"
               ]
+            },
+            {
+              "type": "category",
+              "label": "Rust",
+              "collapsible": true,
+              "collapsed": true,
+              "items": [
+                "quickstart/rust-actix-postgres"
+              ]
             }
           ]
         },