Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
      • Start with AI
    • Framework Guide
      • Frontends
        • Vite
        • React
        • Vue
        • Other Frameworks
      • Backends
      • Full-stack
        • Next.js
        • Nuxt
        • Astro
        • React Router
        • SvelteKit
        • TanStack Start
        • Vike
      • Custom 404 Page
    • Project Guide
      • Project Management
      • edgeone.json
      • Configuring Cache
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
      • Using Github Actions
      • Using Gitlab CI/CD
      • Using CNB Plugin
      • Using IDE PlugIn
      • Using CodeBuddy IDE
    • Domain Management
      • Overview
      • Custom Domain
      • HTTPS Configuration
        • Overview
        • Apply for Free Certificate
        • Using Managed SSL Certificate
      • Configure DNS CNAME Record
    • Observability
      • Overview
      • Metric Analysis
      • Log Analysis
    • Pages Functions
      • Overview
      • Edge Functions
      • Cloud Functions
        • Overview
        • Node Functions
    • Middleware
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Message Notification
    • Integration Guide
      • AI
        • Dialogue Large Models Integration
        • Large Models for Images Integration
      • Database
        • Supabase Integration
        • Pages KV Integration
      • Ecommerce
        • Shopify Integration
        • WooCommerce Integration
      • Payment
        • Stripe Integration
        • Integrating Paddle
      • CMS
        • WordPress Integration
        • Contentful Integration
        • Sanity Integration
        • Payload Integration
      • Authentication
        • Supabase Integration
        • Clerk Integration
    • Best Practices
      • Using General Large Model to Quickly Build AI Application
      • Use the DeepSeek model to quickly build a conversational AI site
      • Building an Ecommerce Platform with Shopify
      • Building a SaaS Site Using Supabase and Stripe
      • Building a Company Brand Site Quickly
      • How to Quickly Build a Blog Site
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • Troubleshooting
    • FAQs
    • Contact Us
    • Release Notes
Docs Overview/
Edge Developer Platform/
Pages/
Framework Guide/
Frontends/
Vite/

Vite

Vite is a modern frontend build tool designed to significantly improve development experience and building efficiency. Its core architecture is as follows:
1. Development server: Based on Native ES modules, it provides feature-rich development support, including extremely fast module hot replacement (HMR).
2. Build command: Based on Rollup, it packs and supports client and server builds, outputting highly optimized production resources.
3. SSR support: Built-in server-side rendering primitives, providing APIs such as ssrLoadModule and transformIndexHtml, support building full-stack applications.
The following will introduce how to use the Vite framework to deploy a static site and full-stack application to EdgeOne Pages.

Deploy a Static Website

Git Deployment

1. Push your code to a remote repository (GitHub, Gitee, Coding).
2. Import the project to EdgeOne Pages. If you have no Vite project, you can use the Vite React Template.
3. EdgeOne Pages will detect that you are using Vite and enable the appropriate configured correctly deploy.
4. Your app is deployed (example: vite-react.edgeone.app).

After your project is imported and deployed, all submissions to the designated production branch (defaults to "main") will automatically trigger a new deployment. View Git integration to learn more.

CLI Deployment

1. Install EdgeOne CLI and initialize.
2. Run edgeone pages deploy -n <project name> to deploy.
3. Your app is deployed (example: vite-react.edgeone.app).
npm install -g edgeone
edgeone login
edgeone pages deploy -n vite-react-demo
After successful deployment, click the Console URLs to access specific building information and URLs after deployment.


Deploying a Native Vite SSR

@edgeone/vite is the official Vite adapter provided by Pages, used to generate Pages deployment products. In conjunction with the Pages scaffolding tool, it can quickly deploy Vite full-stack projects to the Pages platform.

1. Installing an Adapter

npm install @edgeone/vite

2. Configure Vite

In vite.config.ts, introduce and enable the adapter:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import edgeoneAdapter from "@edgeone/vite";

export default defineConfig({
  plugins: [
    react(),
    edgeoneAdapter(),
  ],
});
Note:
The native Vite SSR solution requires developers to implement their own server-side rendering logic. When using @edgeone/ite-adapter, ensure the rendering function exported by the server entry point (such as entry-server.js) returns a complete HTML string or a standard Web Response object.

3. Deploy Project

Git Connection Deployment
After seamless integration of the adapter, you can submit the project to platforms such as GitHub and GitLab, and use our Import Git Repo.
CLI Deployment
Alternatively, use the scaffolding tool from Pages to deploy a local project. For detailed installation and how to use, refer to EdgeOne CLI. Once configured, run the following command to quickly deploy:
edgeone pages deploy
During deployment, the CLI first builds the project automatically, then uploads and publishes the build artifacts.

More Resources

<Vite official documentation>