Integrasi Kerangka Kerja Frontend
Integrasikan Workers dengan kerangka kerja frontend populer seperti React, Vue, atau Svelte untuk aplikasi full-stack dinamis.
Integrasi Kerangka Kerja Frontend adalah pelajaran Edge Computing with Cloudflare Workers & Deno gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Edge Computing with Cloudflare Workers & Deno, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Edge Computing with Cloudflare Workers & Deno mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Full-Stack Edge with Frontend Apps
Welcome to integrating frontend frameworks with Cloudflare Workers! This lesson explores how popular frameworks like React, Vue, or Svelte can work seamlessly with Workers to create dynamic, full-stack applications at the edge.
By combining them, you get the best of both worlds: a rich user interface and a super-fast, globally distributed backend.
How Frontends Talk to Workers
At its core, a frontend framework (running in the user's browser) communicates with a Cloudflare Worker using standard HTTP requests. The Worker acts as a lightweight API backend.
- The frontend sends requests (GET, POST, etc.) to the Worker's URL.
- The Worker processes the request and returns a response, often JSON data.
- The frontend then updates the UI based on this data.
Worker: A Simple JSON API
Let's see a basic Worker that acts as a simple API, returning a JSON message. Your frontend application can easily fetch data from this endpoint.
Try running this example to see the Worker's response.
export default {
async fetch(request, env, ctx) {
const data = {
message: "Hello from the Edge!",
timestamp: new Date().toISOString()
};
return new Response(JSON.stringify(data), {
headers: { 'Content-Type': 'application/json' }
});
}
}Frontend: Making a GET Request
From your frontend app (e.g., a React component), you'd use the browser's fetch API or a library like Axios to call your Worker. Here's how it generally looks (conceptual code, not runnable on its own):
fetch('/api/hello')
.then(response => response.json())
.then(data => console.log(data));The frontend sends a GET request to the Worker, which then sends back the JSON data.
Worker: Handling POST Requests
Frontends often send data to the backend using POST requests, for example, when submitting a form or creating a new item. The Worker can read the request body to get this data.
Run this Worker and imagine your frontend sending a POST request with {"name": "Coddy"} in the body.
export default {
async fetch(request, env, ctx) {
if (request.method === 'POST') {
try {
const body = await request.json();
const name = body.name || 'Guest';
return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
headers: { 'Content-Type': 'application/json' }
});
} catch (error) {
return new Response('Invalid JSON body', { status: 400 });
}
}
return new Response('Please send a POST request.', { status: 405 });
}
}Understanding CORS for Edge APIs
CORS (Cross-Origin Resource Sharing) is a security feature that browsers use. If your frontend (e.g., myapp.com) tries to fetch data from a Worker on a different origin (e.g., myworker.workers.dev), the browser will block it unless the Worker explicitly allows it.
You need to add specific HTTP headers to your Worker's responses to enable CORS.
Implementing Basic CORS in a Worker
To allow your frontend to communicate with your Worker, include CORS headers in your Worker's responses. The Access-Control-Allow-Origin header is crucial.
This example shows how to add basic CORS headers, allowing requests from any origin (*). For production, specify your frontend's exact domain.
export default {
async fetch(request, env, ctx) {
const headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*', // Allow requests from any origin
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
};
if (request.method === 'OPTIONS') {
// Handle preflight requests for CORS
return new Response(null, { headers });
}
const data = { message: 'CORS enabled response!' };
return new Response(JSON.stringify(data), { headers });
}
}Environment Variables & Secrets
Your Workers might need access to API keys or other sensitive configuration. Use environment variables (often called 'bindings' in Workers) to securely provide these.
Never embed secrets directly in your code or expose them to the frontend. Workers can access these securely at runtime, acting as a proxy for sensitive operations.
- Define variables in
wrangler.toml. - Access them via the
envobject in your Worker.
Best Practices for Integration
To build robust full-stack edge applications, consider these best practices:
- API Versioning: Use paths like
/api/v1/usersfor easier updates. - Clear Endpoint Naming: Make your Worker routes intuitive (e.g.,
/products,/orders). - Error Handling: Return meaningful HTTP status codes (400, 401, 404, 500) and JSON error messages from your Worker.
- Authentication: Workers can handle authentication tokens (JWTs) and manage user sessions for your frontend.
Quick Check: Worker Integration
When integrating a frontend framework with a Cloudflare Worker, what is the primary mechanism for the frontend to retrieve dynamic data from the Worker?
Recap: Full-Stack Edge Integration
In this lesson, we explored how to integrate frontend frameworks with Cloudflare Workers. We learned that Workers act as powerful, globally distributed API backends that your frontend apps can communicate with via standard HTTP requests.
Key takeaways:
- Workers serve JSON data and handle various request methods.
- CORS headers are essential for cross-origin communication.
- Best practices include clear API design and secure secret management.
This integration allows you to build fast, scalable full-stack applications at the edge!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Integrasi Kerangka Kerja Frontend” gratis?
Ya — teks lengkap “Integrasi Kerangka Kerja Frontend” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Edge Computing with Cloudflare Workers & Deno, upgrade ke CoddyKit PRO. Kursus Edge Computing with Cloudflare Workers & Deno mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Integrasi Kerangka Kerja Frontend”?
Integrasikan Workers dengan kerangka kerja frontend populer seperti React, Vue, atau Svelte untuk aplikasi full-stack dinamis. Kamu berlatih Edge Computing with Cloudflare Workers & Deno dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Edge Computing with Cloudflare Workers & Deno?
Tidak diperlukan pengalaman sebelumnya. Edge Computing with Cloudflare Workers & Deno di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Integrasi Kerangka Kerja Frontend” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Edge Computing with Cloudflare Workers & Deno ini?
Ya. Setiap pelajaran Edge Computing with Cloudflare Workers & Deno menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Workers Sites & Pages
- Integrasi Kerangka Kerja Frontend
- Proksi Basis Data dengan Deno
- Rendering Sisi Server di Edge