Frontends
EdgeOne Pages supports various popular front-end frameworks to optimize your website building and functioning experience. We offer high-quality support for a range of popular front-end frameworks. You can use various front-end frameworks to build Web applications, and in many cases, complete the deployment without any initial configuration.
To help you get started faster, we provide some ready-made templates. You can create a project with one-click deployment to facilitate the construction of your applications.
| | |
Learn about build command and output directory to ensure smooth deployment.
Build command: This is the command to be executed during project build, such as
npm run build. The build command runs in the Bash shell, so you can use Bash-compatible syntax.Output directory: The directory containing deployable HTML files and resources post-generation. This directory is relative to the project directory, which by default is the root directory
(/). Please ensure the designated output directory includes ALL necessary files so that EdgeOne Pages can deploy smoothly.
Next, we will show the basic configuration of each framework to help you quickly deploy on EdgeOne Pages.
Note:
Pages fully support multiple Next.js rendering modes, including SSR, ISR, and SSG. For usage, see document Framework Guide - Full Stack - Next.js.
Nuxt.js, Remix, and Svelte support for server-side rendering (SSR) is 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: Install all dependencies before building 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 Vue.js-based framework 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. Ensure routes are 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 easy integration with frameworks such as React and Vue.
Docusaurus
Features: Docusaurus is a framework that focuses on documentation websites, providing good default styles 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 follow 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 various plugin ecosystem to enhance site functionality.
Hexo
Features: Hexo is a fast and 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 applications requiring high performance. 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.