Spot On Service

quick-demo.mp4

A responsive Next.js frontend project that:

• Call the spot-start-service - Serverless Function to check if a service is active and retrieve a redirect URL.
• Redirects the user based on the JSON response (using the redirect_url attribute) if active
• Displays a loading spinner and error messages as needed

Features

• Built with Tailwind CSS for a responsiveness and mobile-friendly interface.
• Real-time Status Check: Check service status and start or restart Docker service stacks managed by Portainer on page load.
• Automatic Redirection: Redirects to the specified URL if service is already running.

Setup

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open http://localhost:3000 in your browser to see the result.

API Integration

Warning

This application requires a hosted Portainer instance with appropriate environment variables configured for the function to work.

Note

The frontend currently depends on an active OpenFaaS backend with the spot-start-service installed. In a future update, a separate FastAPI server will be introduced to provide the same functionality without relying on OpenFaaS, thereby enhancing accessibility. For more details, refer to the spot-start-service/handler.py (bearlike/Script) and Docs (bearlike/Script)

The application integrates with the spot-start-service OpenFAAS function:

• Endpoint: https://open-faas.server.local/function/spot-start-service

• Method: POST

• Request Body:

  {
    "referral_url": "https://service.example.com"
  }

• Response Format:

  {
    "statusCode": 200,
    "body": {
      "success": true,
      "message": "Service successfully started",
      "details": {
        "service": "example-service",
        "endpoint": "prod-vm-1",
        "stack_id": "123"
      }
    }
  }

How to Use

1. Add the referral_url as a query parameter: http://localhost:3000/?referral_url=https://your-service.example.com
2. The application will:
   • Send this URL to the spot-start-service function
   • Start or restart the service if needed
   • Redirect to the specified URL once the service is running

Customization

• Modify the UI in pages/index.js
• Adjust the Tailwind configuration in tailwind.config.js
• Change the API response format in pages/api/status.js (for testing)

Stack

• Next.js: For the React framework and API routes
• Tailwind CSS: For responsive styling
• Fetch API: For making API requests