build(docker): add web client and control center services to docker compose setup #4197

prasad89 · 2024-03-26T08:35:46Z

Type of Change

Description

Added web client and control center services to docker-compose.yml
REF : #4110

Additional Changes

This PR modifies the API contract
This PR modifies the database schema
This PR modifies application configuration/environment variables

SanchithHegde

Did you test the changes in this PR? How does the setup process look like?

docker-compose.yml

prasad89 · 2024-03-26T19:04:02Z

Did you test the changes in this PR? How does the setup process look like?

Yes, I have tested changes locally by following
after doing docker compose up -d I'm able to see UI with Hyperswitch Unified Checkout text on page.

SanchithHegde · 2024-03-26T19:39:30Z

Yes, I have tested changes locally by following after doing docker compose up -d I'm able to see UI with Hyperswitch Unified Checkout text on page.

If you're seeing only the text on the page, then the setup in incomplete, you should be able to see a demo store on the left, and a form to enter card details on the right as well, if you set it up correctly. Could you open the network tab in the browser developer tools and fix any problems that you notice?

prasad89 · 2024-03-26T21:29:36Z

@SanchithHegde Thank you for guiding me in the right direction.
I've checked the network tab and fixed errors by adding the following block in the hyperswitch-web section:

- HYPERSWITCH_PUBLISHABLE_KEY=PUBLISHABLE_KEY
- HYPERSWITCH_SECRET_KEY=SECRET_KEY
- HYPERSWITCH_SERVER_URL=http://hyperswitch-server:8080
- HYPERSWITCH_CLIENT_URL=http://hyperswitch-web:9050
- SELF_SERVER_URL=http://hyperswitch-web:5252

For HYPERWITCH_PUBLISHABLE_KEY and HYPERWITCH_SECRET_KEY, I've followed the steps mentioned in the documentation and generated the keys.
After this changes I'm able to see the demo store on the left and a form to enter card details on the right.

prasad89 · 2024-03-27T05:04:42Z

Did you test the changes in this PR? How does the setup process look like?

To set up, create a .env file and configure the following keys:

HYPERSWITCH_PUBLISHABLE_KEY=your_publishable_key
HYPERSWITCH_SECRET_KEY=your_secret_key
HYPERSWITCH_SERVER_URL=http://hyperswitch-server:8080
HYPERSWITCH_CLIENT_URL=http://hyperswitch-web:9050
SELF_SERVER_URL=http://hyperswitch-web:5252

Then execute docker-compose up -d.

SanchithHegde · 2024-03-27T13:26:12Z

After this changes I'm able to see the demo store on the left and a form to enter card details on the right.

Could you please include screenshots for the same?

prasad89 · 2024-03-27T13:43:01Z

After this changes I'm able to see the demo store on the left and a form to enter card details on the right.

Could you please include screenshots for the same?

prasad89 · 2024-03-27T17:48:49Z

Looks like I need to further investigate and fix environment variables for the web.
HyperLoader is still not functioning, but I have managed to make the control center functional.

prasad89 · 2024-03-27T18:44:39Z

@SanchithHegde I got the card details in right hand side now.

prasad89 · 2024-04-04T09:49:39Z

Hello @SanchithHegde can you review the changes?

docker-compose.yml

lsampras · 2024-04-24T07:40:23Z

docker/web.Dockerfile

+RUN sed -i '/hot: true,/a \  host: "0.0.0.0",' webpack.dev.js
+RUN sed -i '/hot: true,/a \  host: "0.0.0.0",' Hyperswitch-React-Demo-App/webpack.dev.js


is this still needed after this PR?

lsampras · 2024-04-24T07:41:12Z

docker-compose.yml

+
+  ### Control Center
+  hyperswitch-control-center:
+    image: juspaydotin/hyperswitch-control-center


can you use the latest tag here?

Okay, will make the changes

lsampras · 2024-04-24T07:45:18Z

docker/web.Dockerfile

+EXPOSE 5252
+EXPOSE 9060
+
+CMD concurrently "npm run re:start" "npm run start" "npm run start:playground"


@vsrivatsa-juspay can you check this one?

it seems that npm run re:start does the compilation and needs to be completed before the other 2 commands are executed...

also would prefer npm run re:build instead on npm run re:start since we don't need the hot reloading here...

lsampras · 2024-04-24T07:49:39Z

docker-compose.yml

+    networks:
+      - router_net


this might not be needed since there isn't any inter-service communication happening here...
since all communication happens on the host machine and is initiated by browser.

docker-compose.yml

lsampras · 2024-04-24T08:48:38Z

docker-compose.yml

+    networks:
+      - router_net


this might not be needed since there isn't any inter-service communication happening here...
since all communication happens on the host machine and is initiated by browser.

docker-compose.yml

lsampras

Some minor changes,
also can you share a screenshot of the SDK loading locally (inside the control-center) as shown in the reference screenshot from sandbox

lsampras · 2024-04-29T07:32:12Z

docker/web.Dockerfile

+EXPOSE 5252
+EXPOSE 9060
+
+CMD concurrently "npm run re:build" "npm run start" "npm run start:playground"


Suggested change

CMD concurrently "npm run re:build" "npm run start" "npm run start:playground"

CMD concurrently "npm run re:build && npm run start" "npm run start:playground"

Thanks for the suggestion.

docker/web.Dockerfile

docker-compose.yml

lsampras · 2024-04-29T08:09:20Z

docker-compose.yml

+      context: ./docker
+      dockerfile: web.Dockerfile
+    env_file:
+      - ./.env


@prasad89 Can you make sure the SDK loads in control-center
sharing a reference screenshot from our sandbox environment (app.hyperswitch.io)

docker-compose.yml

…ockerfile

prasad89 · 2024-04-29T15:45:56Z

@lsampras, I've addressed your review. Could you please review it?
Additionally, I'm encountering a 401 unauthorized status when attempting to load the SDK.
I've created both HYPERSWITCH_PUBLISHABLE_KEY and HYPERSWITCH_SECRET_KEY, and exported them accordingly.
I can confirm that HYPERSWITCH_PUBLISHABLE_KEY is visible at localhost:5252/config.
Could you provide any guidance on how to proceed?
Your assistance would be greatly appreciated.

lsampras · 2024-04-29T15:51:04Z

docker-compose.yml

+      - SDK_ENV=${SDK_ENV:-local}
+      - ENV_SDK_URL=${ENV_SDK_URL:-http://localhost:9050/HyperLoader.js}
+      - ENV_BACKEND_URL=${ENV_BACKEND_URL:-http://localhost:8080}
+      - ENV_LOGGING_URL=${ENV_LOGGING_URL:-http://localhost:3100}


I believe you picked this up from the issue that was mentioned in the fix, but that change hasn't been merged to main branch yet,

either use the older SDK variable keys or pull that branch instead of main in your dockerfile

lsampras · 2024-04-29T15:51:18Z

docker/web.Dockerfile

@@ -4,12 +4,12 @@ RUN npm install concurrently -g

 WORKDIR /hyperswitch-web

-RUN git clone https://github.com/juspay/hyperswitch-web .
+RUN git clone https://github.com/juspay/hyperswitch-web . --depth 1


The ordering here seems incorrect

lsampras · 2024-04-29T15:51:46Z

docker-compose.yml

-      hyperswitch-server:
-        condition: service_started
+      - SDK_ENV=${SDK_ENV:-local}
+      - ENV_SDK_URL=${ENV_SDK_URL:-http://localhost:9050/HyperLoader.js}


This won't have the HyperLoader.js at the end this is supposed to be the base url only

lsampras · 2024-04-30T08:32:52Z

docker-compose.yml

-      - SDK_ENV=${SDK_ENV:-local}
-      - ENV_SDK_URL=${ENV_SDK_URL:-http://localhost:9050/HyperLoader.js}
-      - ENV_BACKEND_URL=${ENV_BACKEND_URL:-http://localhost:8080}
-      - ENV_LOGGING_URL=${ENV_LOGGING_URL:-http://localhost:3100}


can you add these variables back?

Okay, will add it.

I'm getting this errors since morning on hyperswitch-router:standalone

Unable to deserialize `stripe` as `api_models::enums::PayoutConnectors`: Matching variant not found thread 'main' panicked at crates/router/src/bin/router.rs:14:10: Unable to construct application configuration: ConfigurationError(Some errors occurred: Unable to deserialize `stripe` as `api_models::enums::PayoutConnectors`: Matching variant not found) note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

@lsampras do you have any idea regarding this?

Oh, this seems to be caused by recent changes to the docker_compose.toml file.

I would have suggested checking out to the v1.107.0 tag before running the Docker Compose setup, but since you need to open a PR against the main branch, that isn't an option. You can remove stripe from the payout_connector_list line in the docker_compose.toml file to be able to run the Docker Compose setup, and you need not push the docker_compose.toml change as part of this PR.

Thanks for the help @SanchithHegde
Also when I'm trying to preview payment from control center UI is authenticating request with beta.hyperswitch.io is that expected?

prasad89 · 2024-04-30T17:45:31Z

I'm getting this errors on hyperswitch-router:standalone

Unable to deserialize `stripe` as `api_models::enums::PayoutConnectors`: Matching variant not found
thread 'main' panicked at crates/router/src/bin/router.rs:14:10:
Unable to construct application configuration: ConfigurationError(Some errors occurred:
Unable to deserialize `stripe` as `api_models::enums::PayoutConnectors`: Matching variant not found)
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

@SanchithHegde do you have any idea regarding this?

lsampras

Can get this merged for now, seems good for the most part

prasad89 · 2024-05-06T08:12:56Z

Thanks @SanchithHegde and @lsampras for your time and approving this PR.
This will keep me motivating to contribute further.

…ompose setup (#4197)

Added web client and control center services to docker-compose.yml

e9e33d7

prasad89 requested review from a team as code owners March 26, 2024 08:35

SanchithHegde assigned prasad89 Mar 26, 2024

SanchithHegde added A-infra Area: Infrastructure C-feature Category: Feature request or enhancement S-waiting-on-review Status: This PR has been implemented and needs to be reviewed hiring-challenge labels Mar 26, 2024

Update server and web URLs in docker-compose.yml

f606675

SanchithHegde reviewed Mar 26, 2024

View reviewed changes

docker-compose.yml Outdated Show resolved Hide resolved

prasad89 added 2 commits March 26, 2024 23:41

Fix formatting in docker-compose.yml file

a84bb9e

Update Dockerfile to use latest LTS version of Node.js

115ba2a

prasad89 requested a review from SanchithHegde March 26, 2024 19:04

prasad89 added 2 commits March 27, 2024 03:16

Add environment variables for Hyperswitch configuration

89fa634

Update environment variables in docker-compose.yml

2c62e41

Update URLs in control-center

270db2a

Update URLs in docker-compose.yml and modify CMD in web.Dockerfile

13ed018

SanchithHegde reviewed Apr 4, 2024

View reviewed changes

docker-compose.yml Show resolved Hide resolved

docker-compose.yml Outdated Show resolved Hide resolved

lsampras reviewed Apr 24, 2024

View reviewed changes

docker-compose.yml Outdated Show resolved Hide resolved

docker-compose.yml Show resolved Hide resolved

addressed review comments by @lsampras

dd1d576

prasad89 requested a review from lsampras April 24, 2024 11:58

Update SDK base URL in docker-compose.yml

ce5ca87

lsampras reviewed Apr 29, 2024

View reviewed changes

Update URLs and environment variables in docker-compose.yml and web.D…

61573ac

…ockerfile

prasad89 requested a review from lsampras April 29, 2024 15:47

lsampras reviewed Apr 29, 2024

View reviewed changes

prasad89 and others added 3 commits April 29, 2024 22:12

minor changes

42c8346

Merge branch 'main' into docker-compose

3e9a23c

Merge branch 'main' into docker-compose

5b126a0

lsampras reviewed Apr 30, 2024

View reviewed changes

prasad89 and others added 2 commits April 30, 2024 20:20

Merge branch 'main' into docker-compose

e44f2a7

Updatevenvironment variables in docker-compose.yml

7a552e5

prasad89 requested review from lsampras and SanchithHegde April 30, 2024 17:45

lsampras approved these changes May 6, 2024

View reviewed changes

SanchithHegde approved these changes May 6, 2024

View reviewed changes

SanchithHegde changed the title ~~build(docker) : Added web client and control center services to docker-compose.yml~~ build(docker): add web client and control center services to docker compose setup May 6, 2024

lsampras linked an issue May 6, 2024 that may be closed by this pull request

Setup Hyperswitch Web & Control center #4561

Closed

likhinbopanna added this pull request to the merge queue May 6, 2024

Merged via the queue into juspay:main with commit b1cfef2 May 6, 2024
12 of 15 checks passed

SanchithHegde removed the S-waiting-on-review Status: This PR has been implemented and needs to be reviewed label May 6, 2024

prasad89 deleted the docker-compose branch May 12, 2024 15:34

lsampras pushed a commit that referenced this pull request May 28, 2024

build(docker): add web client and control center services to docker c…

d201f9c

…ompose setup (#4197)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build(docker): add web client and control center services to docker compose setup #4197

build(docker): add web client and control center services to docker compose setup #4197

prasad89 commented Mar 26, 2024 •

edited

Loading

SanchithHegde left a comment

prasad89 commented Mar 26, 2024 •

edited

Loading

SanchithHegde commented Mar 26, 2024

prasad89 commented Mar 26, 2024 •

edited

Loading

prasad89 commented Mar 27, 2024

SanchithHegde commented Mar 27, 2024

prasad89 commented Mar 27, 2024

prasad89 commented Mar 27, 2024

prasad89 commented Mar 27, 2024 •

edited

Loading

prasad89 commented Apr 4, 2024

lsampras Apr 24, 2024

prasad89 Apr 24, 2024

lsampras Apr 24, 2024

prasad89 Apr 24, 2024

lsampras Apr 24, 2024

lsampras Apr 24, 2024

prasad89 Apr 24, 2024

lsampras Apr 24, 2024

lsampras left a comment •

edited

Loading

lsampras Apr 29, 2024

prasad89 Apr 29, 2024

lsampras Apr 29, 2024

prasad89 commented Apr 29, 2024

lsampras Apr 29, 2024

lsampras Apr 29, 2024

lsampras Apr 29, 2024

lsampras Apr 30, 2024

prasad89 Apr 30, 2024 •

edited

Loading

SanchithHegde Apr 30, 2024

prasad89 Apr 30, 2024 •

edited

Loading

prasad89 commented Apr 30, 2024

lsampras left a comment

prasad89 commented May 6, 2024

		RUN sed -i '/hot: true,/a \ host: "0.0.0.0",' webpack.dev.js
		RUN sed -i '/hot: true,/a \ host: "0.0.0.0",' Hyperswitch-React-Demo-App/webpack.dev.js

	CMD concurrently "npm run re:build" "npm run start" "npm run start:playground"
	CMD concurrently "npm run re:build && npm run start" "npm run start:playground"

build(docker): add web client and control center services to docker compose setup #4197

build(docker): add web client and control center services to docker compose setup #4197

Conversation

prasad89 commented Mar 26, 2024 • edited Loading

Type of Change

Description

Additional Changes

SanchithHegde left a comment

Choose a reason for hiding this comment

prasad89 commented Mar 26, 2024 • edited Loading

SanchithHegde commented Mar 26, 2024

prasad89 commented Mar 26, 2024 • edited Loading

prasad89 commented Mar 27, 2024

SanchithHegde commented Mar 27, 2024

prasad89 commented Mar 27, 2024

prasad89 commented Mar 27, 2024

prasad89 commented Mar 27, 2024 • edited Loading

prasad89 commented Apr 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lsampras left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prasad89 commented Apr 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prasad89 Apr 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prasad89 Apr 30, 2024 • edited Loading

Choose a reason for hiding this comment

prasad89 commented Apr 30, 2024

lsampras left a comment

Choose a reason for hiding this comment

prasad89 commented May 6, 2024

prasad89 commented Mar 26, 2024 •

edited

Loading

prasad89 commented Mar 26, 2024 •

edited

Loading

prasad89 commented Mar 26, 2024 •

edited

Loading

prasad89 commented Mar 27, 2024 •

edited

Loading

lsampras left a comment •

edited

Loading

prasad89 Apr 30, 2024 •

edited

Loading

prasad89 Apr 30, 2024 •

edited

Loading