EdgeOne Pages supports various popular front-end frameworks, aiming to optimize your website construction and running experience. We provide premium support for a range of popular front-end frameworks, allowing you to build web applications with frameworks such as Next.js to SvelteKit, and in many cases, deployment can be completed without any initial configuration.
To help you get started faster, we offer some ready-made templates that you can deploy with one click when creating a project, easily building your application.
Learn the relevant concepts of the compile commands and output directory for a smooth deployment.
Compile command: This is the command that needs to be executed during project build, for example, npm run build. The compile command will run in the Bash shell, so you can use Bash-compatible syntax.
Output Directory: The directory where the deployable HTML files and resources are generated after the build. This directory is relative to the project directory, which by default is the root directory (/). Please ensure that the specified output directory contains all the necessary files so that EdgeOne Pages can deploy smoothly.
Next, we will show the basic configuration for each framework to help you deploy quickly on EdgeOne Pages.
Next.js
Characteristics: Next.js is a React-based framework that supports Static Generation (SSG), making it ideal for building high-performance Web applications and websites.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: out
Usage Recommendations: During development, you can use npm run dev to start the local development server. Next.js offers powerful routing features and API routing, suitable for building complex applications. Ensure next.config.js is configured before building to meet specific requirements.
Description:
Pages currently supported by Next.js need to be configured for static export mode. Try modifying next.config.js as follows:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export', // Enable static export
images: {
unoptimized: true // Disable image optimization for static export
},
trailingSlash: true, // Add trailing slash to improve compatibility
};
React.js
Characteristics:React.js is a JavaScript library for building user interfaces, suitable for building Single Page Applications (SPA) and complex user interfaces.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: build
Usage Recommendations:Ensure all dependencies are installed before building, and use npm start for local development.
Vue.js
Characteristics:Vue.js is a progressive framework, easy to get started with, suitable for rapid development and prototype design.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: dist
Usage recommendations:Use Vue CLI to create projects, which can automatically configure build settings.
Nuxt.js
Characteristics:Nuxt.js is a framework based on Vue.js, supporting Server-side Rendering (SSR) and Static Site Generation.
The default build settings are as follows:
Compilation Command: npm run generate
Output Directory: dist
Usage recommendations:Suitable for projects that require SEO optimization. Make sure to configure the routes before generation.
Astro
Characteristics:Astro is a modern static site generator that supports multiple front-end frameworks and focuses on performance.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: dist
Usage recommendations:Utilize Astro's component system to easily integrate frameworks like React and Vue.
Docusaurus
Characteristics:Docusaurus is a framework focused on documentation websites, offering good default styles and features.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: build
Usage recommendations: Suitable for building technical documentation and blogs, using Markdown format to write content.
Angular
Characteristics: Angular is a feature-rich front-end framework, suitable for building large enterprise-level applications.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: dist/angular/browser
Usage recommendations: Use Angular CLI to create projects, ensuring best practices are followed.
Gatsby
Characteristics: Gatsby is a React-based static site generator, focusing on performance and SEO.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: public
Usage recommendations: Utilize the rich plugin ecosystem to enhance site features.
Hexo
Characteristics: Hexo is a fast and concise blog framework based on Node.js.
The default build settings are as follows:
Compilation Command: hexo generate
Output Directory: public
Usage recommendations:Customize the blog appearance and features with themes and plugins.
Qwik
Characteristics:Qwik is an emerging framework focused on ultimate performance and fast loading.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: dist
Usage recommendations:Suitable for applications that require high performance and focus on user experience.
Remix
Characteristics:Remix is a modern React framework that supports server-side rendering and data acquisition.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: build/client
Usage recommendations: Utilize Remix's data loading feature to optimize page performance.
Solid
Characteristics: Solid is a high-performance front-end framework that focuses on reactive programming.
The default build settings are as follows:
Compilation Command: npm run build
Output Directory: dist
Usage recommendations: Suitable for applications that require efficient rendering and focus on component performance.
Svelte
Characteristics: Svelte is an innovative framework that compiles components into efficient JavaScript code.
