Skip to content

Commit 4b44012

Browse files
ishita1805ishita1805
authored
Merge pull request #14 from cloudflare/fix/new-demo-app
feat: add demo app
2 parents e82241d + e0348e3 commit 4b44012

94 files changed

Lines changed: 12728 additions & 1206 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/angular-deploy.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ jobs:
3535
run: pnpm run build
3636
working-directory: ./angular-examples
3737

38-
- name: Deploy to Cloudflare Pages
38+
- name: Deploy to Cloudflare Workers
3939
uses: cloudflare/wrangler-action@v3
4040
with:
4141
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
4242
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
4343
wranglerVersion: '4.42.1'
44-
command: pages deploy ./dist --project-name=realtimekit-angular-examples
44+
command: deploy
4545
workingDirectory: ./angular-examples

‎.github/workflows/deploy.yml‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
name: Deploy Web Examples
2+
permissions:
3+
contents: read
4+
5+
on:
6+
push:
7+
branches:
8+
- main
9+
paths:
10+
- 'demo-app/**'
11+
12+
jobs:
13+
deploy:
14+
runs-on: ubuntu-latest
15+
name: Deploy Web Examples
16+
steps:
17+
- name: Checkout
18+
uses: actions/checkout@v4
19+
20+
- name: Setup pnpm
21+
uses: pnpm/action-setup@v4
22+
with:
23+
version: 9
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: '18'
29+
cache: 'pnpm'
30+
cache-dependency-path: '**/pnpm-lock.yaml'
31+
32+
- name: Install Dependencies
33+
run: pnpm install --frozen-lockfile
34+
working-directory: ./
35+
36+
- name: Build
37+
run: pnpm run build
38+
working-directory: ./demo-app
39+
40+
- name: Deploy to Cloudflare Workers
41+
uses: cloudflare/wrangler-action@v3
42+
with:
43+
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
44+
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
45+
wranglerVersion: '4.42.1'
46+
command: deploy
47+
workingDirectory: ./demo-app

‎.github/workflows/html-deploy.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ jobs:
3535
run: pnpm run build
3636
working-directory: ./html-examples
3737

38-
- name: Deploy to Cloudflare Pages
38+
- name: Deploy to Cloudflare Workers
3939
uses: cloudflare/wrangler-action@v3
4040
with:
4141
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
4242
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
4343
wranglerVersion: '4.42.1'
44-
command: pages deploy ./dist --project-name=realtimekit-html-examples
44+
command: deploy
4545
workingDirectory: ./html-examples

‎.github/workflows/react-deploy.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ jobs:
3535
run: pnpm run build
3636
working-directory: ./react-examples
3737

38-
- name: Deploy to Cloudflare Pages
38+
- name: Deploy to Cloudflare Workers
3939
uses: cloudflare/wrangler-action@v3
4040
with:
4141
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
4242
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
4343
wranglerVersion: '4.42.1'
44-
command: pages deploy ./dist --project-name=realtimekit-react-examples
44+
command: deploy
4545
workingDirectory: ./react-examples

‎angular-examples/.assetsignore‎

Whitespace-only changes.

‎angular-examples/favicon.ico‎

678 Bytes
Binary file not shown.

‎angular-examples/index.html‎

Lines changed: 18 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,86 +2,31 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Angular Examples - Cloudflare RealtimeKit</title>
7+
<title>RealtimeKit - Angular Examples</title>
78
<style>
8-
body {
9-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
9+
html, body {
1010
margin: 0;
1111
padding: 0;
12-
background-color: #f0f2f5; /* Light gray background */
13-
color: #333;
14-
display: flex;
15-
justify-content: center;
16-
align-items: flex-start; /* Align to top */
17-
min-height: 100vh;
18-
padding-top: 40px; /* Add some padding at the top */
12+
height: 100%;
13+
width: 100%;
14+
overflow: hidden;
1915
}
20-
#root {
21-
background-color: #ffffff; /* White card background */
22-
padding: 30px 40px;
23-
border-radius: 8px;
24-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
25-
width: 90%;
26-
max-width: 700px;
27-
}
28-
h1 {
29-
color: #f38020; /* Cloudflare Orange */
30-
text-align: center;
31-
margin-bottom: 30px;
32-
font-size: 28px;
33-
font-weight: 600;
34-
}
35-
ul {
36-
list-style-type: none;
37-
padding: 0;
16+
iframe {
17+
display: block;
3818
margin: 0;
39-
}
40-
li {
41-
margin-bottom: 15px;
42-
border-bottom: 1px solid #e0e0e0; /* Light separator line */
43-
padding-bottom: 15px;
44-
}
45-
li:last-child {
46-
border-bottom: none;
47-
margin-bottom: 0;
48-
padding-bottom: 0;
49-
}
50-
a {
51-
text-decoration: none;
52-
color: #0053a0; /* Cloudflare Blue */
53-
font-size: 18px;
54-
font-weight: 500;
55-
display: block; /* Make the whole area clickable */
56-
padding: 8px 0;
57-
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
58-
}
59-
a:hover {
60-
color: #f38020; /* Cloudflare Orange on hover */
61-
transform: translateX(5px);
62-
}
63-
/* Responsive adjustments */
64-
@media (max-width: 600px) {
65-
#root {
66-
padding: 20px;
67-
}
68-
h1 {
69-
font-size: 24px;
70-
}
71-
a {
72-
font-size: 16px;
73-
}
19+
padding: 0;
20+
width: 100%;
21+
height: 100vh;
22+
border: none;
7423
}
7524
</style>
7625
</head>
77-
<body>
78-
<div id="root">
79-
<h1>Cloudflare RealtimeKit Angular Examples</h1>
80-
<ul>
81-
<li><a href="/examples/create-your-own-ui/dist">Create Your Own UI</a></li>
82-
<li><a href="/examples/default-meeting-ui/dist">Default Meeting UI</a></li>
83-
<li><a href="/examples/with-video-transformer/dist">With Video Transformer</a></li>
84-
</ul>
85-
</div>
86-
</body>
26+
<body></body>
27+
<script>
28+
if (window.location.pathname === '/') {
29+
window.location.href = 'https://examples.realtime.cloudflare.com/angular';
30+
}
31+
</script>
8732
</html>

‎angular-examples/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
],
66
"scripts": {
77
"update-cloudflare-realtime-deps": "./update-cloudflare-realtime-deps.sh",
8-
"build": "npm run build --workspaces --if-present && npm run postbuild",
8+
"build": "npm run build --workspaces --if-present",
99
"postbuild": "./postbuild.sh",
1010
"format": "prettier -w .",
11-
"deploy": "wrangler pages deploy ./dist"
11+
"deploy": "wrangler deploy"
1212
},
1313
"devDependencies": {
1414
"prettier": "^2.8.0",
@@ -17,5 +17,8 @@
1717
"prettier": {
1818
"singleQuote": true,
1919
"proseWrap": "always"
20+
},
21+
"dependencies": {
22+
"@cloudflare/kv-asset-handler": "^0.4.0"
2023
}
2124
}

‎angular-examples/postbuild.sh‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@ find "$EXAMPLES_DIR" -mindepth 1 -maxdepth 1 -type d | while read example_dir_pa
2525
if [ -d "$source_dist_path" ]; then
2626
echo "Found $source_dist_path for example: $example_name"
2727
echo "Moving $source_dist_path to $destination_example_path"
28-
# Move the examples/example_name/dist directory to dist/example_name
29-
cp -r "$source_dist_path" "$destination_example_path"
28+
# Copy the contents of examples/example_name/dist to dist/example_name
29+
mkdir -p "$destination_example_path"
30+
cp -r "$source_dist_path/"* "$destination_example_path/"
3031
else
3132
echo "No dist directory found in $example_dir_path (for example $example_name). Skipping."
3233
fi
@@ -50,4 +51,22 @@ else
5051
echo "Warning: $ROOT_INDEX_HTML_SOURCE not found in the root directory."
5152
fi
5253

54+
# Copy worker.js to dist directory for SPA routing support
55+
WORKER_FILE="worker.js"
56+
WORKER_DEST="$OUTPUT_DIR/$WORKER_FILE"
57+
58+
if [ -f "$WORKER_FILE" ]; then
59+
echo "Copying $WORKER_FILE to $WORKER_DEST"
60+
cp "$WORKER_FILE" "$WORKER_DEST"
61+
echo "Worker file copied successfully."
62+
else
63+
echo "Warning: $WORKER_FILE not found in the root directory."
64+
fi
65+
66+
# Create .assetsignore to prevent worker.js from being uploaded as an asset
67+
ASSETSIGNORE_FILE="$OUTPUT_DIR/.assetsignore"
68+
echo "Creating $ASSETSIGNORE_FILE to exclude worker.js from asset uploads"
69+
echo "worker.js" > "$ASSETSIGNORE_FILE"
70+
echo ".assetsignore file created successfully."
71+
5372
echo "Postbuild script finished successfully."

‎angular-examples/worker.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { getAssetFromKV } from '@cloudflare/kv-asset-handler'
2+
3+
addEventListener('fetch', event => {
4+
event.respondWith(handleEvent(event))
5+
})
6+
7+
async function handleEvent(event) {
8+
try {
9+
// Try to serve the requested static asset
10+
return await getAssetFromKV(event)
11+
} catch (e) {
12+
// If not found, fall back to index.html (for React Router / SPA routes)
13+
return await getAssetFromKV(event, {
14+
mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/index.html`, req),
15+
})
16+
}
17+
}

0 commit comments

Comments
 (0)