Skip to content

Commit dde59f8

Browse files
CarlosCortizasCTCarlosCortizasCT
authored
Fix Playground echo server view (#2752)
* fix(playground): fix echo server view * feat(playground): refactor server code
1 parent 652e59d commit dde59f8

6 files changed

Lines changed: 156 additions & 3 deletions

File tree

‎playground/.env.local.template‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
APP_ID="<application_id>"
44
MC_API_URL=""
55
CTP_INITIAL_PROJECT_KEY="<project_key>"
6-
ECHO_SERVER_URL="http://localhost:3000/api/echo"
6+
ECHO_SERVER_URL="http://localhost:3000/api/echo"
7+
PLAYGROUND_API_AUDIENCE="http://localhost:3000"

‎playground/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,26 @@
88
This is a Custom Application used to help developing features in this repository.
99

1010
Please read the [documentation](https://docs.commercetools.com/custom-applications) about Custom Applications before getting started.
11+
12+
## Using the Echo Server view
13+
14+
One of the example views showcases sending requests to a remote server. If you want to use that functionality, you will need to start a local server to echo the response back to the browser.
15+
16+
Since that view uses the `[proxy/forward-to](https://docs.commercetools.com/custom-applications/concepts/integrate-with-your-own-api)` MC endpoint and it only allows to forward requests to an external service through HTTPS protocol, we need to start that kind of service locally.
17+
18+
You can use a [secure local tunnel](https://docs.commercetools.com/custom-applications/concepts/integrate-with-your-own-api#local-development-using-a-secure-tunnel) to help with this context. For instance, using **[ngrok](https://docs.commercetools.com/custom-applications/concepts/integrate-with-your-own-api#ngrok)**.
19+
The local server will listen in port `3003` by default (you can change it with the `PLAYGROUND_SERVER_PORT` environment variable). You will need to use it when starting the local tunnel.
20+
21+
When using the tunnel, you will need to configure some environment variables with the domain assigned.
22+
Once you get the tunnel domain, head over the `.env.local` file (in the root directory) and make sure you use it in these variables:
23+
24+
```
25+
PLAYGROUND_API_AUDIENCE="<tunnel_domain>"
26+
ECHO_SERVER_URL="<tunnel_domain>/api/echo"
27+
```
28+
29+
Once you did that, you also need to start the local server with this command:
30+
31+
```
32+
yarn start:server
33+
```

‎playground/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"private": true,
66
"scripts": {
77
"build": "mc-scripts build",
8+
"start:server": "NODE_ENV=development && ts-node ./src/server.ts",
89
"start": "mc-scripts start",
910
"compile-html": "mc-scripts compile-html",
1011
"compile-html:local": "MC_APP_ENV=development mc-scripts compile-html --transformer @commercetools-frontend/mc-dev-authentication/transformer-local.js",
@@ -55,6 +56,11 @@
5556
"@commercetools-frontend/mc-dev-authentication": "21.12.0",
5657
"@commercetools-frontend/mc-scripts": "21.12.0",
5758
"@formatjs/cli": "4.8.4",
58-
"@vercel/node": "^2.0.0"
59+
"@types/dotenv-flow": "^3.2.0",
60+
"@vercel/node": "^2.0.0",
61+
"dotenv-flow": "^3.2.0",
62+
"express": "4.18.1",
63+
"ts-node": "^10.9.1",
64+
"typescript": "4.7.4"
5965
}
6066
}

‎playground/src/server.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import express from 'express';
2+
import dotenv from 'dotenv-flow';
3+
dotenv.config();
4+
// eslint-disable-next-line import/first
5+
import echoHandler from '../api/echo';
6+
7+
const app = express();
8+
const port = process.env.PLAYGROUND_SERVER_PORT || 3003;
9+
10+
// @ts-ignore
11+
app.use('/api/echo', echoHandler);
12+
13+
app.listen(port, () => {
14+
console.log(`Playground server listening on port ${port}`);
15+
});

‎playground/tsconfig.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
// Reference: https://github.com/tsconfig/bases#readme
3+
"$schema": "https://json.schemastore.org/tsconfig",
4+
"compilerOptions": {
5+
"lib": ["ESNext"],
6+
"target": "ESNext",
7+
"module": "ESNext",
8+
"moduleResolution": "Node",
9+
"strict": true,
10+
"esModuleInterop": true,
11+
"skipLibCheck": true,
12+
"forceConsistentCasingInFileNames": true,
13+
"isolatedModules": true,
14+
"allowJs": false,
15+
"rootDir": "./"
16+
},
17+
"include": ["src/server.ts"],
18+
"ts-node": {
19+
"compilerOptions": {
20+
"module": "commonjs"
21+
}
22+
}
23+
}

‎yarn.lock‎

Lines changed: 86 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5441,6 +5441,15 @@ __metadata:
54415441
languageName: node
54425442
linkType: hard
54435443

5444+
"@cspotcode/source-map-support@npm:^0.8.0":
5445+
version: 0.8.1
5446+
resolution: "@cspotcode/source-map-support@npm:0.8.1"
5447+
dependencies:
5448+
"@jridgewell/trace-mapping": 0.3.9
5449+
checksum: 5718f267085ed8edb3e7ef210137241775e607ee18b77d95aa5bd7514f47f5019aa2d82d96b3bf342ef7aa890a346fa1044532ff7cc3009e7d24fce3ce6200fa
5450+
languageName: node
5451+
linkType: hard
5452+
54445453
"@csstools/selector-specificity@npm:^2.0.1":
54455454
version: 2.0.2
54465455
resolution: "@csstools/selector-specificity@npm:2.0.2"
@@ -8000,6 +8009,16 @@ __metadata:
80008009
languageName: node
80018010
linkType: hard
80028011

8012+
"@jridgewell/trace-mapping@npm:0.3.9":
8013+
version: 0.3.9
8014+
resolution: "@jridgewell/trace-mapping@npm:0.3.9"
8015+
dependencies:
8016+
"@jridgewell/resolve-uri": ^3.0.3
8017+
"@jridgewell/sourcemap-codec": ^1.4.10
8018+
checksum: d89597752fd88d3f3480845691a05a44bd21faac18e2185b6f436c3b0fd0c5a859fbbd9aaa92050c4052caf325ad3e10e2e1d1b64327517471b7d51babc0ddef
8019+
languageName: node
8020+
linkType: hard
8021+
80038022
"@jridgewell/trace-mapping@npm:^0.3.0":
80048023
version: 0.3.4
80058024
resolution: "@jridgewell/trace-mapping@npm:0.3.4"
@@ -10400,6 +10419,13 @@ __metadata:
1040010419
languageName: node
1040110420
linkType: hard
1040210421

10422+
"@types/dotenv-flow@npm:^3.2.0":
10423+
version: 3.2.0
10424+
resolution: "@types/dotenv-flow@npm:3.2.0"
10425+
checksum: ff11155349578fe76f0b69556f3e22e13115b17a7684cef1dec9f5d7fdaa1bfc1848b1337e3d08093687a3e372cf1b4b0fd0c9900a2db62031a3ee02ffabe3e6
10426+
languageName: node
10427+
linkType: hard
10428+
1040310429
"@types/eslint-scope@npm:^3.7.0, @types/eslint-scope@npm:^3.7.3":
1040410430
version: 3.7.3
1040510431
resolution: "@types/eslint-scope@npm:3.7.3"
@@ -17697,6 +17723,15 @@ __metadata:
1769717723
languageName: node
1769817724
linkType: hard
1769917725

17726+
"dotenv-flow@npm:^3.2.0":
17727+
version: 3.2.0
17728+
resolution: "dotenv-flow@npm:3.2.0"
17729+
dependencies:
17730+
dotenv: ^8.0.0
17731+
checksum: 8e34ea8f5cb216acb0f9cc602752dceef6e1c0b52c39045d6b92fadbefcbfecaf0cc868d3e115c9764860293d62d0bb31d46cfa41d29cb9fc7039797e20de03e
17732+
languageName: node
17733+
linkType: hard
17734+
1770017735
"dotenv@npm:16.0.0":
1770117736
version: 16.0.0
1770217737
resolution: "dotenv@npm:16.0.0"
@@ -17718,7 +17753,7 @@ __metadata:
1771817753
languageName: node
1771917754
linkType: hard
1772017755

17721-
"dotenv@npm:^8.1.0, dotenv@npm:^8.6.0":
17756+
"dotenv@npm:^8.0.0, dotenv@npm:^8.1.0, dotenv@npm:^8.6.0":
1772217757
version: 8.6.0
1772317758
resolution: "dotenv@npm:8.6.0"
1772417759
checksum: 38e902c80b0666ab59e9310a3d24ed237029a7ce34d976796349765ac96b8d769f6df19090f1f471b77a25ca391971efde8a1ea63bb83111bd8bec8e5cc9b2cd
@@ -30463,8 +30498,11 @@ __metadata:
3046330498
"@commercetools-uikit/spacings": ^15.1.0
3046430499
"@commercetools-uikit/text": ^15.1.0
3046530500
"@formatjs/cli": 4.8.4
30501+
"@types/dotenv-flow": ^3.2.0
3046630502
"@vercel/node": ^2.0.0
3046730503
apollo-link-rest: ^0.9.0-rc.1
30504+
dotenv-flow: ^3.2.0
30505+
express: 4.18.1
3046830506
graphql-anywhere: ^4.2.7
3046930507
moment: ^2.29.4
3047030508
moment-timezone: ^0.5.34
@@ -30473,6 +30511,8 @@ __metadata:
3047330511
react-dom: 17.0.2
3047430512
react-intl: ^5.25.1
3047530513
react-router-dom: 5.3.1
30514+
ts-node: ^10.9.1
30515+
typescript: 4.7.4
3047630516
vercel: 24.2.1
3047730517
languageName: unknown
3047830518
linkType: soft
@@ -36159,6 +36199,44 @@ __metadata:
3615936199
languageName: node
3616036200
linkType: hard
3616136201

36202+
"ts-node@npm:^10.9.1":
36203+
version: 10.9.1
36204+
resolution: "ts-node@npm:10.9.1"
36205+
dependencies:
36206+
"@cspotcode/source-map-support": ^0.8.0
36207+
"@tsconfig/node10": ^1.0.7
36208+
"@tsconfig/node12": ^1.0.7
36209+
"@tsconfig/node14": ^1.0.0
36210+
"@tsconfig/node16": ^1.0.2
36211+
acorn: ^8.4.1
36212+
acorn-walk: ^8.1.1
36213+
arg: ^4.1.0
36214+
create-require: ^1.1.0
36215+
diff: ^4.0.1
36216+
make-error: ^1.1.1
36217+
v8-compile-cache-lib: ^3.0.1
36218+
yn: 3.1.1
36219+
peerDependencies:
36220+
"@swc/core": ">=1.2.50"
36221+
"@swc/wasm": ">=1.2.50"
36222+
"@types/node": "*"
36223+
typescript: ">=2.7"
36224+
peerDependenciesMeta:
36225+
"@swc/core":
36226+
optional: true
36227+
"@swc/wasm":
36228+
optional: true
36229+
bin:
36230+
ts-node: dist/bin.js
36231+
ts-node-cwd: dist/bin-cwd.js
36232+
ts-node-esm: dist/bin-esm.js
36233+
ts-node-script: dist/bin-script.js
36234+
ts-node-transpile-only: dist/bin-transpile.js
36235+
ts-script: dist/bin-script-deprecated.js
36236+
checksum: 090adff1302ab20bd3486e6b4799e90f97726ed39e02b39e566f8ab674fd5bd5f727f43615debbfc580d33c6d9d1c6b1b3ce7d8e3cca3e20530a145ffa232c35
36237+
languageName: node
36238+
linkType: hard
36239+
3616236240
"ts-node@npm:^9":
3616336241
version: 9.1.1
3616436242
resolution: "ts-node@npm:9.1.1"
@@ -37321,6 +37399,13 @@ __metadata:
3732137399
languageName: node
3732237400
linkType: hard
3732337401

37402+
"v8-compile-cache-lib@npm:^3.0.1":
37403+
version: 3.0.1
37404+
resolution: "v8-compile-cache-lib@npm:3.0.1"
37405+
checksum: 78089ad549e21bcdbfca10c08850022b22024cdcc2da9b168bcf5a73a6ed7bf01a9cebb9eac28e03cd23a684d81e0502797e88f3ccd27a32aeab1cfc44c39da0
37406+
languageName: node
37407+
linkType: hard
37408+
3732437409
"v8-compile-cache@npm:^2.0.3, v8-compile-cache@npm:^2.1.1, v8-compile-cache@npm:^2.3.0":
3732537410
version: 2.3.0
3732637411
resolution: "v8-compile-cache@npm:2.3.0"

0 commit comments

Comments
 (0)