Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 17 commits into from
May 6, 2024
Merged

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

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e9e33d7
Added web client and control center services to docker-compose.yml
prasad89 Mar 26, 2024
f606675
Update server and web URLs in docker-compose.yml
prasad89 Mar 26, 2024
a84bb9e
Fix formatting in docker-compose.yml file
prasad89 Mar 26, 2024
115ba2a
Update Dockerfile to use latest LTS version of Node.js
prasad89 Mar 26, 2024
89fa634
Add environment variables for Hyperswitch configuration
prasad89 Mar 26, 2024
2c62e41
Update environment variables in docker-compose.yml
prasad89 Mar 27, 2024
270db2a
Update URLs in control-center
prasad89 Mar 27, 2024
13ed018
Update URLs in docker-compose.yml and modify CMD in web.Dockerfile
prasad89 Mar 27, 2024
dd1d576
addressed review comments by @lsampras
prasad89 Apr 24, 2024
542b115
Remove unused network configuration in docker-compose.yml
prasad89 Apr 24, 2024
ce5ca87
Update SDK base URL in docker-compose.yml
prasad89 Apr 26, 2024
61573ac
Update URLs and environment variables in docker-compose.yml and web.D…
prasad89 Apr 29, 2024
42c8346
minor changes
prasad89 Apr 29, 2024
3e9a23c
Merge branch 'main' into docker-compose
prasad89 Apr 29, 2024
5b126a0
Merge branch 'main' into docker-compose
prasad89 Apr 30, 2024
e44f2a7
Merge branch 'main' into docker-compose
prasad89 Apr 30, 2024
7a552e5
Updatevenvironment variables in docker-compose.yml
prasad89 Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,45 @@ services:
labels:
logs: "promtail"

### Web Client
hyperswitch-web:
prasad89 marked this conversation as resolved.
Show resolved Hide resolved
ports:
- "9050:9050"
- "9060:9060"
- "5252:5252"
build:
context: ./docker
dockerfile: web.Dockerfile
networks:
- router_net
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct

env_file:
- ./.env
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@prasad89 can you add this env file if it is needed, I'd prefer all variables in the below environment block tho?

Copy link
Contributor Author

@prasad89 prasad89 Apr 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lsampras We've set up a configuration block with default variable pointers.

 - HYPERSWITCH_SERVER_URL=${HYPERSWITCH_SERVER_URL:-http://hyperswitch-server:8080}
 - HYPERSWITCH_CLIENT_URL=${HYPERSWITCH_CLIENT_URL:-http://localhost:9050}
 - SELF_SERVER_URL=${SELF_SERVER_URL:-http://localhost:5252}

For confidentiality, HYPERSWITCH_PUBLISHABLE_KEY and HYPERSWITCH_SECRET_KEY are considered personal secrets and should be stored in a .env file.

Therefore, the complete .env file should appear as follows:

HYPERSWITCH_PUBLISHABLE_KEY=HYPERSWITCH_PUBLISHABLE_KEY
HYPERSWITCH_SECRET_KEY=HYPERSWITCH_SECRET_KEY
HYPERSWITCH_SERVER_URL=http://hyperswitch-server:8080
HYPERSWITCH_CLIENT_URL=http://localhost:9050
SELF_SERVER_URL=http://localhost:5252

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but then you are specifying these keys here as well,

    environment:
      - HYPERSWITCH_PUBLISHABLE_KEY=$HYPERSWITCH_PUBLISHABLE_KEY
      - HYPERSWITCH_SECRET_KEY=$HYPERSWITCH_SECRET_KEY
prasad89 marked this conversation as resolved.
      - HYPERSWITCH_SERVER_URL=${HYPERSWITCH_SERVER_URL:-http://hyperswitch-server:8080}
      - HYPERSWITCH_CLIENT_URL=${HYPERSWITCH_CLIENT_URL:-http://localhost:9050}
      - SELF_SERVER_URL=${SELF_SERVER_URL:-http://localhost:5252}

in that case we can remove the .env file

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In our configuration, we're defining the environment block and specifying that HYPERSWITCH_PUBLISHABLE_KEY and HYPERSWITCH_SECRET_KEY are required for running Docker Compose, indicated by the presence of the '$ symbol. For other variables, Docker Compose will use values from the .env file if provided, otherwise, it will proceed with default value from environment block

We are using interpolation method here.
REF : https://docs.docker.com/compose/environment-variables/env-file/#interpolation

Copy link
Contributor Author

@prasad89 prasad89 Apr 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lsampras, so the process for configuring the application flow will involve creating a .env file.
You'll need to set the HYPERSWITCH_PUBLISHABLE_KEY and HYPERSWITCH_SECRET_KEY, as well as any other environment variables (in case of user has done some customization over the app)
If users don't provide these essential environment variables, Docker Compose setup will fail, as it relies on them.

Copy link
Contributor Author

@prasad89 prasad89 Apr 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lsampras Yes, those should be present in the .env file in order to run docker compose.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lsampras hope I explained you well.
Let me know if there are anymore changes.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah,
can you make the env file optional as mentioned here.
Also it seemed that control-center was facing some problems when loading the sdk for test payment..
image

Can you test that flow once on your end and lmk if you are able to make payments through that?
you can configure a test connector for the same.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lsampras have tested the flow added one fix for the same.
Screenshot from 2024-04-26 20-04-43

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

image

environment:
- HYPERSWITCH_PUBLISHABLE_KEY=$HYPERSWITCH_PUBLISHABLE_KEY
- HYPERSWITCH_SECRET_KEY=$HYPERSWITCH_SECRET_KEY
prasad89 marked this conversation as resolved.
Show resolved Hide resolved
- HYPERSWITCH_SERVER_URL=${HYPERSWITCH_SERVER_URL:-http://hyperswitch-server:8080}
- HYPERSWITCH_CLIENT_URL=${HYPERSWITCH_CLIENT_URL:-http://localhost:9050}
prasad89 marked this conversation as resolved.
Show resolved Hide resolved
- SELF_SERVER_URL=${SELF_SERVER_URL:-http://localhost:5252}
SanchithHegde marked this conversation as resolved.
Show resolved Hide resolved
depends_on:
hyperswitch-server:
condition: service_started
lsampras marked this conversation as resolved.
Show resolved Hide resolved

### Control Center
hyperswitch-control-center:
prasad89 marked this conversation as resolved.
Show resolved Hide resolved
image: juspaydotin/hyperswitch-control-center
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you use the latest tag here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, will make the changes

ports:
- "9000:9000"
networks:
- router_net
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

environment:
- apiBaseUrl=http://localhost:8080
- sdkBaseUrl=http://localhost:9050
prasad89 marked this conversation as resolved.
Show resolved Hide resolved
depends_on:
hyperswitch-server:
condition: service_started
hyperswitch-web:
condition: service_started
lsampras marked this conversation as resolved.
Show resolved Hide resolved

### Clustered Redis setup
redis-cluster:
image: redis:7
Expand Down
18 changes: 18 additions & 0 deletions docker/web.Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
FROM node:lts

RUN npm install concurrently -g

WORKDIR /hyperswitch-web

RUN git clone https://github.com/juspay/hyperswitch-web .
lsampras marked this conversation as resolved.
Show resolved Hide resolved

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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this still needed after this PR?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No


RUN npm install

EXPOSE 9050
EXPOSE 5252
EXPOSE 9060

CMD concurrently "npm run re:start" "npm run start" "npm run start:playground"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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...

Loading