-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EDU-2611] vulcan and frameworks (#424)
* trigger * initialize docs for frameworks * astro * review * review frameworks compatibiliy * minor change * updates vulcan description * globals * replace deliver by static * remove next boilerplate link * remove old page * Apply suggestions from code review Co-authored-by: Bru Andrade <[email protected]> * Update src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks.mdx Co-authored-by: Bru Andrade <[email protected]> * add badges and other adjustments * Apply suggestions from code review Co-authored-by: Bru Andrade <[email protected]> * Updates docs * update docs * add menu and minor adjustments * center imports at the top * Apply suggestions from code review Co-authored-by: Mariana Bellorín Aguilera <[email protected]> Co-authored-by: hannah <[email protected]> * Update src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks.mdx Co-authored-by: hannah <[email protected]> --------- Co-authored-by: Bru Andrade <[email protected]> Co-authored-by: Mariana Bellorín Aguilera <[email protected]> Co-authored-by: hannah <[email protected]>
- Loading branch information
4 people
authored
Nov 16, 2023
1 parent
2617eb9
commit 8582034
Showing
2 changed files
with
211 additions
and
0 deletions.
There are no files selected for viewing
210 changes: 210 additions & 0 deletions
210
src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,210 @@ | ||
| --- | ||
| title: Frameworks compatibility | ||
| description: Compatibility between Azion and web frameworks through Vulcan. | ||
| namespace: documentation_products_runtime_frameworks | ||
| meta_tags: web frameworks, jamstack | ||
| permalink: /documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/ | ||
| menu_namespace: runtimeMenu | ||
| --- | ||
|
|
||
| import Button from '~/components/Button.astro' | ||
| import Badge from '~/components/Badge.astro'; | ||
|
|
||
|
|
||
| ## Vulcan | ||
|
|
||
| [Vulcan](https://github.com/aziontech/vulcan) is the framework adapter built to run on Azion Edge Runtime. It's an evolving project aimed at supporting various JavaScript frameworks. The project is open source and encourages community contributions. | ||
|
|
||
| Azion provides different ways to get started and work with web frameworks: | ||
|
|
||
| - [Azion CLI](/en/documentation/products/azion-cli/overview/) | ||
| - [Real-Time Manager](/en/documentation/products/start-with-a-template/) | ||
|
|
||
| --- | ||
|
|
||
| ## Compute x Deliver | ||
|
|
||
| Azion employs the terminology `compute` and `deliver` to describe the operational modes of applications within its framework: | ||
|
|
||
| | Mode | Description | | ||
| |- |- | | ||
| | Compute | Designed for applications that require computational processing at the edge, whether it's for Front-End Server-Side Rendering (SSR) or Back-End tasks. In Compute Mode, Azion enables the execution of code and processing of dynamic content at the edge to enhance performance and responsiveness. | | ||
| | Deliver (static) | Tailored for frameworks that primarily focus on handling and routing incoming requests at the edge, with an emphasis on efficiently **serving static files**. While applications in Deliver Mode don't execute dynamic code, they excel in optimizing the delivery of static content to end-users, thereby ensuring smooth and fast content distribution. | | ||
|
|
||
| --- | ||
|
|
||
| ## Next.js | ||
|
|
||
| <Badge variant="accent"> | ||
| Static | ||
| </Badge> | ||
|
|
||
| Implementation: | ||
|
|
||
| - [Azion CLI how to build with Next.js](/en/documentation/products/build/develop-with-azion/frameworks-specific/next/) | ||
|
|
||
| --- | ||
|
|
||
| <Badge variant="accent"> | ||
| Compute | ||
| </Badge> | ||
|
|
||
| For Next.js compute mode, Azion supports: | ||
|
|
||
| - `runtime = 'nodejs'` | ||
| - Next.js **version 12.3.1** | ||
| - [Pages router](https://nextjs.org/docs/pages) | ||
| - [API Route](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) | ||
| - [Dynamic route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) | ||
| - [Web APIs](/en/documentation/products/edge-application/edge-functions/runtime-apis/javascript/) | ||
| - [Node's async_hooks](https://nodejs.org/api/async_hooks.html): [AsyncLocalStorage](https://nodejs.org/api/async_context.html#class-asynclocalstorage) and [AsyncResource](https://nodejs.org/api/async_hooks.html#class-asyncresource) are implemented. | ||
| - MemoryFS through Vulcan's [Vulcan.config.js](https://github.com/aziontech/vulcan#vulcanconfigjs) file | ||
| - Nested route | ||
| - Static page | ||
| - SSR page | ||
|
|
||
| Currently, the following implementations are in progress and **aren't supported**: | ||
|
|
||
| - Edge Runtime | ||
| - Next.js 13.x.y features | ||
| - App Router | ||
|
|
||
| :::note | ||
| If the Next.js project isn't in **v12.3.1**, the build process won't work for compute mode. | ||
| ::: | ||
|
|
||
| <Button href="https://github.com/aziontech/vulcan/tree/main/examples/next/node-pages-12-3-1" text="go to a compute mode project example" variant="secondary" target="_blank"></Button> | ||
|
|
||
|
|
||
| --- | ||
|
|
||
| ## Angular | ||
| <Badge variant="accent"> | ||
| Static | ||
| </Badge> | ||
|
|
||
| Angular is an open-source web framework designed with an emphasis on speed and suitability for websites that contain substantial content. | ||
|
|
||
| Learn more about [Angular](https://angular.io/docs). | ||
|
|
||
| Implementation: | ||
|
|
||
| - [Azion CLI how to build with Angular](/en/documentation/products/build/develop-with-azion/frameworks-specific/angular/) | ||
| - [RTM Angular boilerplate](/en/documentation/products/guides/angular-boilerplate/) | ||
|
|
||
| <Badge variant="accent"> | ||
| Compute | ||
| </Badge> | ||
|
|
||
| :::note | ||
| The compute mode isn't implemented for Angular yet. | ||
| ::: | ||
|
|
||
| --- | ||
|
|
||
| ## Astro | ||
| <Badge variant="accent"> | ||
| Static | ||
| </Badge> | ||
|
|
||
| Astro offers a modern and user-friendly method for creating websites. It blends established performance principles from decades of web development with the convenience of component-based development trends. You can use your preferred JavaScript framework and, by default, Astro ensures that only the essential JavaScript is sent to the user. | ||
|
|
||
| Implementation: | ||
|
|
||
| - [Azion CLI how to build with Astro](/en/documentation/products/build/develop-with-azion/frameworks-specific/astro/) | ||
| - [RTM Astro boilerplate](/en/documentation/products/guides/astro-boilerplate/) | ||
|
|
||
| <Badge variant="accent"> | ||
| Compute | ||
| </Badge> | ||
|
|
||
| :::note | ||
| The compute mode isn't implemented for Astro yet. | ||
| ::: | ||
|
|
||
| --- | ||
|
|
||
| ## Hexo | ||
| <Badge variant="accent"> | ||
| Static | ||
| </Badge> | ||
|
|
||
| Hexo is listed on [the Jamstack documentation](https://jamstack.org/generators/hexo/) as a static site generator, aligned to the Jamstack approach. | ||
|
|
||
| Learn more about [Hexo](https://hexo.io/docs/). | ||
|
|
||
| Implementation: | ||
|
|
||
| - [Azion CLI how to build with Hexo](/en/documentation/products/build/develop-with-azion/frameworks-specific/hexo/) | ||
|
|
||
| --- | ||
|
|
||
|
|
||
| ## React | ||
| <Badge variant="accent"> | ||
| Static | ||
| </Badge> | ||
|
|
||
| React is listed on the [Jamstack documentation](https://jamstack.org/generators/react-static/) as a static site generator, aligned to the Jamstack approach. | ||
|
|
||
| Learn more about [React](https://react.dev/). | ||
|
|
||
| Implementation: | ||
|
|
||
| - [Azion CLI how to build with React](/en/documentation/products/build/develop-with-azion/frameworks-specific/react/) | ||
| - [RTM React boilerplate](/en/documentation/products/guides/react-boilerplate/) | ||
|
|
||
| <Badge variant="accent"> | ||
| Compute | ||
| </Badge> | ||
|
|
||
| :::note | ||
| The compute mode isn't implemented for React yet. | ||
| ::: | ||
|
|
||
| --- | ||
|
|
||
| ## Vite | ||
| <Badge variant="accent"> | ||
| Static | ||
| </Badge> | ||
|
|
||
| Vite is listed on the [Jamstack documentation](https://jamstack.org/generators/vite/) as a static site generator, aligned to the Jamstack approach. | ||
|
|
||
| Learn more about [Vite](https://vitejs.dev/). | ||
|
|
||
| Implementation: | ||
|
|
||
| - [Azion CLI how to build with Vite](/en/documentation/products/build/develop-with-azion/frameworks-specific/vite/) | ||
|
|
||
| <Badge variant="accent"> | ||
| Compute | ||
| </Badge> | ||
|
|
||
| :::note | ||
| The compute mode isn't implemented for Vite yet. | ||
| ::: | ||
|
|
||
| --- | ||
|
|
||
| ## Vue | ||
| <Badge variant="accent"> | ||
| Static | ||
| </Badge> | ||
|
|
||
| Vue.js is a user-friendly, versatile, and approachable JavaScript framework for building web applications and user interfaces. Its progressive nature, reactivity system, component-based architecture, and thriving community make it a popular choice for both beginners and experienced developers in the world of front-end web development. | ||
|
|
||
| Learn more about [Vue](https://vuejs.org/guide/introduction.html). | ||
|
|
||
| Implementation: | ||
|
|
||
| - [Azion CLI how to build with Vue](/en/documentation/products/build/develop-with-azion/frameworks-specific/vue/) | ||
| - [RTM Vue boilerplate](/en/documentation/products/guides/vue-boilerplate/) | ||
|
|
||
| <Badge variant="accent"> | ||
| Compute | ||
| </Badge> | ||
|
|
||
| :::note | ||
| The compute mode isn't supported for Vue yet. | ||
| ::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters