×
Community Blog From Prompt to Production: Shipping a Full-Stack App with Qoder and ESA Functions

From Prompt to Production: Shipping a Full-Stack App with Qoder and ESA Functions

ESA Functions&Pages provide the capability to host lightweight website on it's serverless infrastructure, which is also called Edge Routine.

ESA Functions&Pages provide the capability to host lightweight website on it's serverless infrastructure, which is also called Edge Routine, and equivalent to Cloudflare Worker and Pages. When I want to publish a price calculation tool and don't want to let users know about my code, I choose to use the ESA Functions to host my code and provide as API. And I choose Qoder as my AI Coding tool to help me do almost everything.

The tool will take a customer's Enterprise plan ESA (Edge Security Acceleration) configuration — traffic volume, DDoS protection tier, WAF, Anti-Bot, L4/L7 traffic, smart routing, edge functions — and outputs an estimated monthly bill with a base fee plus pay-as-you-go overages.

f3

The calculation is running on the ESA Functions through API call, if there's no protection, the API can be called frequently through any AI bots, which may increase the cost of ESA Functions and at the same time bring the possibility for malicious access. So I ask Qoder to integrate AI CAPTCHA, which is a free service from ESA, to protect my API.
F4

The Architecture: One Edge Function, Full-Stack

Traditional full-stack hosting requires a frontend CDN, a backend API server, a database, maybe a worker process, and a deployment pipeline to stitch them together. For this project, we collapsed the entire stack into a single JavaScript file deployed to ESA Edge Functions:

GET  /                 → serves the embedded HTML frontend
POST /api/calculate    → runs the pricing algorithm, returns JSON

To make it simple, the frontend HTML (~50 KB) is embedded directly into the edge function as a template literal, if the static page is complicated, there's ESA Pages feature which can deploy your website directly linked with Github. A small build script (build_combined.py) reads the source HTML, escapes it, and stitches it together with the calculation engine into a unified index-combined.js. The result:

Zero servers. No EC2 instances, no containers, no load balancers. But the capacity of ESA Functions is almost unlimited becasue Alibaba Cloud ESA got more than 3200+ PoPs globally, I don't need to concern about the scaling thing.

One deployable artifact. One file, one route, one ESA configuration.

Frontend and backend share a single origin. The API is at the same domain as the HTML, so there are no CORS headaches, no cookie-domain gymnastics, and no DNS juggling.

Global by default. Every deployment is pushed to ESA's worldwide edge network — the same infrastructure that accelerates some of the largest sites on the internet.

Qoder Quest Mode to Code

As I know nothing about how to code for my requirement, I use the Qoder Quest mode, which means 100% leave the work to itself, include the front-end page as well as javascript running on ESA Functions.
f7

My first promot contains an AK/SK which grant full access to ESA I created for this project, and some internal document regarding the price calculation logic.

And only two documents from ESA official website:
Functions & Pages Introduction
API document

Qoder quest mode UI is quite similar with other agent, that I don't need to care too much about the code, and it shows how AI break down the works.
f8

Deployment at the Edge

ESA Edge Functions are Alibaba Cloud's answer to the serverless-at-the-edge paradigm. The deployment flow we used is:

  1. For this small project, I choose to edit the source code locally by Qoder.

  2. Run python3 deploy/redeploy.py — a ~50-line Python script using the ESA SDK. Which is also written by Qoder, although there's skill to deploy directly to ESA Functions, I'd rather to use this script so that it is 100% fixed behavior and no token consumption for each deployment command.

  3. The script uploads the JS bundle to ESA Functions, commits a staging version, and promotes it to production. ESA Functions got a dashboard as well as API to easily manage the releases.
    f2

  4. Within few seconds, the new function is live at every ESA edge node worldwide.

There's no build step on the server, no image to bake, no cold-start penalty to speak of for a warm route. The propagation is global and nearly instantaneous — a developer in Macau sees the same byte-for-byte response as a visitor in Frankfurt or São Paulo.

What's particularly elegant for small tools like this one is the cache-control story. Because the HTML is embedded in the function, you control freshness declaratively via response headers:

return new Response(HTML_CONTENT, {
  headers: {
    'Content-Type': 'text/html; charset=utf-8',
    'Cache-Control': 'no-cache, no-store, must-revalidate'
  }
});

Every visitor gets the freshest version on every request, while ESA's edge still absorbs the TLS handshake and connection setup. Deployments become truly atomic: one API call, and the whole world sees the new code.

AI-Powered Code Generation, Deployed to AI-Powered Infrastructure

f9

The entire application — HTML, i18n dictionaries, pricing engine, CAPTCHA integration, PDF export — was written and iterated by Qoder using the Qwen-3.7Max model, both are the latest production AI product from Alibaba. Each round of development looked like:

  1. Describe the change in natural language (Chinese, no less): _"Move the calculate button to the top of the results column and make the PDF export hide the Important Notes section."_

  2. The AI edits the source files — HTML, JS, build scripts — and preserves invariants like i18n key naming.

  3. The AI deploys by invoking the Python redeploy script, verifies the live site, and reports back.

In one particularly dense session, the AI handled: rewriting the L4 DDoS pricing matrix, localizing Anti-Bot option labels into Chinese, adding a CAPTCHA SDK with readiness polling to eliminate a race condition, and fixing a currency-label swap bug on first render — and deployed each change live as soon as it was done.

The symmetry is hard to miss: AI writes the code → code is deployed to AI-accelerated infrastructure → AI verifies the deployment. The human in the loop is reduced to describing intent and approving outcomes. ESA Edge Functions is an ideal runtime for this workflow because deploys are fast, globally consistent, and don't require any ops ritual — the AI doesn't have to SSH into anything, manage a Docker daemon, or wait for a rolling update.

Security That Ships with the Platform

Because the pricing API is publicly accessible, we wanted to gate it behind bot protection. ESA provides AI CAPTCHA as a first-class feature with built-in signature verification at the edge — no external service, no additional latency.

The integration flow:

  1. The HTML loads the Aliyun CAPTCHA SDK and configures it with a scene ID and region.

  2. When the user clicks _Calculate Price_, the CAPTCHA slider renders inline, sized dynamically to match the button width.

  3. On successful verification, the SDK which connect to Alibaba Cloud security service will returns a captchaVerifyParam token.

  4. The frontend calls /api/calculate?captcha_verify_param=<token> — ESA's edge verifies the token _before_ the function even runs, and rejects empty or invalid tokens at the network layer.

The CAPTCHA language also follows the page language — when a visitor toggles to Chinese, the slider reinitializes in Chinese. This is the kind of detail that normally requires glue code across multiple services; here it's a handful of lines in the same file that serves the HTML and computes the price.

Actually as I just give a feature description link of ESA's official document to Qoder, it didn't know much about the integration of AI CAPTCHA especially the parameters and logic, the code failed few times. But I got a good idea then that I ask it to learn from the smaple code in my previous blog: AI CAPTCHA. After learned from my sample code, Qoder immediately worked it out.

What This Tells Us About Modern Full-Stack Hosting

Three observations from shipping this project:

  1. The "frontend / backend" boundary is disappearing. When your HTML and your API share a single file and a single origin, whole categories of complexity — CORS, CSRF, session cookies, API gateways — evaporate. ESA Edge Functions makes this natural.

  2. AI IDEs are a multiplier, not a replacement. The AI didn't design the pricing model or decide which DDoS tier to offer — a human did. But the AI turned each design decision into working, deployed code in seconds, and caught inconsistencies (like i18n dictionary drift) that a solo developer would miss.

  3. Edge-first is the new default. For tools like this one — stateless, CPU-light, globally consumed — there is no good reason to provision a server. ESA Edge Functions gave us global distribution, built-in security, sub-second deploys, and zero infrastructure to babysit.

Try It

The live calculator is at **https://anycast.edgecloud.site** — served entirely by ESA Edge Functions, with no origin server anywhere in the path. Toggle between English and Chinese, run a calculation, and export a PDF. Every byte you receive was generated by an edge function that an AI wrote and deployed.

0 6 0
Share on

ESA Big Fan

5 posts | 1 followers

You may also like

Comments

ESA Big Fan

5 posts | 1 followers

Related Products

  • Edge Security Acceleration (Original DCDN)

    Edge Security Acceleration (ESA) provides capabilities for edge acceleration, edge security, and edge computing. ESA adopts an easy-to-use interactive design and accelerates and protects websites, applications, and APIs to improve the performance and experience of access to web applications.

    Learn More