Frontends
EdgeOne Pages offers high-quality support for popular front-end frameworks, optimizing your website building and functioning experience. In most cases, no additional configuration is needed to complete the deployment.
| | |
Learn about the build command and output directory so that the deployment can make smooth progress.
Build command: This is the command to be executed during project build, such as
npm run build. The build command will run in the Bash shell and use Bash-compatible syntax.Output directory: The directory containing deployable HTML files and resources generated after build. This directory is relative to the project directory, which is the root directory
(/) by default. Please ensure the specified output directory includes ALL necessary files to enable smooth deployment by Pages.
Next, we will show the basic configuration of each framework to help you quickly deploy on Pages.
Note:
Pages fully support multiple rendering modes of Next.js, including SSR, ISR, and SSG. For usage, see document Framework Guide - Full Stack - Next.js.
Support for Nuxt.js, Remix, and Svelte server rendering (SSR) is currently under development.
React.js
Features: React.js is a JavaScript library for building user interfaces, suitable for building SPAs and complex user interfaces.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
build
Usage recommendations: Underwrite all dependencies are installed before build and use npm start to develop locally.
Vue.js
Features: Vue.js is a progressive framework, easy to use and suitable for rapid development and prototype design.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
dist
Usage recommendations: Use Vue CLI to create a project, which can automatically configure build settings.
Nuxt.js
Features: Nuxt.js is a framework based on Vue.js that supports static site generation.
Default build settings are as follows:
Build command:
npm run generateOutput directory:
dist
Usage recommendations: Suitable for projects requiring SEO optimization. Underwrite routing is configured before generation.
Astro
Features: Astro is a modern static site generator that supports various front-end frameworks and focuses on performance.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
dist
Usage Recommendations: Leverage Astro's component system for seamless integration with frameworks such as React and Vue.
Docusaurus
Features: Docusaurus is a framework that focuses on documentation websites, providing a good default style and features.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
build
Usage recommendations: Suitable for building technical documentation and blogs, write content in Markdown format.
Angular
Features: Angular is a powerful front-end framework suitable for building large enterprise-level applications.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
dist/angular/browser
Usage recommendations: Use Angular CLI to create project and underwrite following best practice.
Gatsby
Features: Gatsby is a React-based static site generator that focuses on performance and SEO.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
public
Usage recommendations: Leverage the plugin ecosystem to enhance site functionality.
Hexo
Features: Hexo is a fast, simple blog framework based on Node.js.
Default build settings are as follows:
Build command:
hexo generateOutput directory:
public
Usage recommendations: Use themes and plug-ins to customize blog appearance and features.
Qwik
Features: Qwik is an emerging framework that focuses on ultimate performance and fast loading.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
dist
Usage recommendations: Suitable for high-performance applications. Focus on user experience.
Remix
Features: Remix is a modern React framework that supports server-side rendering and data access.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
build/client
Usage recommendations: Leverage Remix's data loading function to optimize page performance.
Solid
Features: Solid is a high-performance front-end framework that focuses on reactive programming.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
dist
Usage recommendations: Suitable for applications requiring efficient rendering. Focus on component performance.
Svelte
Features: Svelte is an innovative framework that converts components to efficient JavaScript code when compiling.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
build
Usage Recommendations: Leverage Svelte's Concise Syntax to quickly build interactive applications.