Setup Hyperswitch Web & Control center

[lsampras]

Context

Developer experience is one of the key tenets at Hyperswitch. Setting up and running Hyperswitch should be fun, fast and easy for all developers out there !!

However, when we fully open sourced Hyperswitch in Nov 2023, we had to create three repositories to easily manage Hyperswitch product suite from a compliance and from a developer productivity perspective. We feel that there is a lot of scope for optimixing the local setup of a multi-repository product suite like Hyperswitch.

Problem Statement

As of now, our Docker Compose setup within the juspay/hyperswitch repository only covers the backend services of the Hyperswitch apps server. The current setup lacks inclusion of the web client and the control center. Docker Compose setup needs to be extended to include these components seamlessly.

You can find the documentation for setting up the Hyperswitch app server (and other services including database, Redis, monitoring services) here, and the Docker Compose file here

How to Get Started

Web Client Setup

• The web client and React demo app don't have a Docker-based setup yet.
• Start by creating a Docker-based setup for the web client. Utilize a node-based Docker image to run the SDK and demo app

Control Center

• The control center setup is simple, you can just include another service in the Docker Compose file to pull the control center image from Docker Hub
• Please Note: The control center however requires you to run the web client beforehand, and the web client URL must be configured in the control center configuration to be able to run it

Integration

• Once Docker setups for both the web client and control center are available, integrate them into the existing Docker Compose setup.
• Ensure that the control center configuration references the web client URL correctly, and that the web client and React demo app configuration references the app server URL correctly.

Expected outcome

Submit a pull request to the juspay/hyperswitch repository with the following changes:

• Modify the Docker Compose file to include three new services: the web client, the React demo app (for the web client), and the control center.
• The pull request should enable anyone trying out Hyperswitch to set up all three components seamlessly, enhancing client adoption.

Brownie points

• Providing clear and comprehensive technical documentation along with the Docker setup
  Addressing these blockers will not only streamline the Docker Compose setup process but also enhance the overall user experience for developers integrating Hyperswitch. It is crucial for ensuring smooth adoption of Hyperswitch

Originally posted by @NarsGNA in #4110