ESA Functions and Pages templates supports a variety of mainstream frontend frameworks and build tools. Whether you are building a static website, a single-page application (SPA), or a server-side rendering project, ESA provides an end-to-end workflow for one-click deployment and automated builds, making your code accessible via points of presence around the globe.
Vite + React.js
Vite is a frontend build tool with fast cold starts and instant Hot Module Replacement (HMR). Combining with React.js, they help you quickly build high-performance SPA for complex user interfaces. Vite improves the developer experience by leveraging the browser's native support for ES Modules.
Default build settings:
Build command:
npm run buildDevelopment startup command:
npm run devStatic resource directory:
./dist
Vite + Vue.js
Vite and Vue.js 3 deliver a fast developer experience. Vue officially recommends Vite as a scaffolding tool. The @vitejs/plugin-vue provides out-of-the-box support for .vue files, avaScript XML (JSX), and server-side rendering (SSR).
Default build settings:
Build command:
npm run buildDevelopment startup command:
npm run devStatic resource directory:
./dist
Next.js
Next.js is a React-based, full-stack frontend framework that provides out-of-the-box SSR, static site generation (SSG), Incremental Static Regeneration, and API routing features. It supports the React Server Components and App Router architecture, which significantly improves an application's first-paint loading and SEO performance. Next.js includes the built-in, Rust-based fast packaging tool Turbopack and Webpack 5. Combined with file-system-based routing, it enables fast development server startup and hot updates, providing smooth developer experience for React applications. ESA only supports SSG mode for Next.js.
Default build settings:
Build command:
npm run buildDevelopment startup command:
npm run devStatic resource directory:
./out(For more information, see the configuration example.)
React Router
React Router is one of the most popular frontend routing libraries for React. It is designed for SPAs and supports declarative routing, dynamic route matching, nested routes, and programmatic navigation. Starting with version 6, React Router features a simpler API design that focuses on component-based configuration and best practices. This improves application maintainability and performance. It integrates seamlessly with React, supporting functional components and Hooks such as useNavigate, useParams, and useLocation to manage complex client-side routing logic.
Default build settings:
Build command: For example,
npm run build. Determined by the main project.Development startup command: For example,
npm run dev. Determined by the main project.Static resource directory: For example,
./build/client. Determined by the main project.
Astro
Astro is a lightweight frontend framework for building static websites and content-driven applications. Its core concept is the Islands Architecture: By default, Astro sends minimal JavaScript to the client and activates interactive components, such as React, Vue, or Svelte components. This approach improves initial load speed and performance. Astro lets you use components from different UI frameworks in the same project. It outputs pure HTML, CSS, and minimal JavaScript, resulting in nearly zero-cost interactivity.
Default build settings:
Build command:
npm run buildDevelopment startup command:
npm run devStatic resource directory:
./dist
Nuxt
Nuxt is a full-stack frontend framework based on Vue.js. It is designed for statically generated pages and SPAs. Since Nuxt 3, the framework has fully adopted Vue 3, Vite, and the Nitro engine to deliver a fast developer experience and highly scalable server-side logic. Nuxt supports file-system-based automatic routing, automatic component imports, a modular plugin system, and built-in features such as an API layer, TypeScript, ESLint, and Progressive Web App (PWA) support. These features improve development efficiency and project maintainability.
Default build settings:
Build command:
npm run buildDevelopment startup command:
npm run devStatic resource directory:
./dist
React chatbot solution
React chatbot is a conversational UI solution built on React. It integrates with state management tools, such as Redux or Context API, Natural Language Processing (NLP) services, and backend AI models, such as LLMs, Dialogflow, or Rasa, to create smart interactions. The solution is component-based and supports highly customizable UI design, multi-turn conversation logic, and rich media messages such as text, cards, buttons, and images. It can also use WebSocket or REST APIs for real-time communication.
Default build settings:
Build command:
npm run buildDevelopment startup command:
npm run startornpm run devStatic resource directory:
./dist
Gatsby
Gatsby is a static site generator based on React, designed for building high-performance, SEO-friendly websites. It uses GraphQL to fetch content from various data sources, such as local files, Content Management Systems (CMS), APIs, Markdown, and Contentful. During the build, Gatsby pre-renders pages into static HTML, CSS, and JavaScript files. This provides very fast loading speeds and excellent SEO. Gatsby is ideal for rapidly developing content-driven websites. It accelerates development via hot-reloading, and automatic code splitting, and a rich plugin ecosystem with plugins such as gatsby-plugin-image and gatsby-source-contentful. Gatsby also integrates seamlessly with TypeScript and supports Progressive Web Apps (PWAs)
Default build settings:
Build command:
npm run buildDevelopment startup command:
npm run developStatic resource directory:
./public
Svelte
Svelte framework's core concept is to do work at compile-time instead of at runtime. Unlike React or Vue, Svelte does not use a virtual Document Object Model (DOM). It compiles components directly into efficient, native JavaScript. This approach results in almost no framework overhead at runtime, significantly improving performance and reducing package size. Svelte offers simple syntax, with features such as declarative assignments and the reactive $:, built-in animation support, a context API, and flexible state management. Its official full-stack framework, SvelteKit, provides capabilities such as routing, SSR, SSG, and API routes, making it a lightweight yet complete web framework.
Default build settings:
Build command:
npm run build(SvelteKit)Development startup command:
npm run devStatic resource directory:
./build