# Compatibilidade com Frameworks | Astro import DocButton from '~/components/webkit/DocButton.vue'; ## Sobre Astro [Astro](https://astro.build/) é um gerador de sites estáticos que compila seu conteúdo em HTML estático. Ele utiliza uma arquitetura baseada em componentes, permitindo que você escreva componentes no framework de sua preferência (React, Vue, Svelte, etc.), e o Astro irá renderizá-los como HTML estático em tempo de build. Essa abordagem resulta em um envio mínimo de JavaScript para o cliente, já que os componentes são renderizados como HTML por padrão. **Principais recursos:** - Geração de HTML estático em tempo de build. - Arquitetura baseada em componentes com suporte a diversos frameworks. - Hidratação parcial por meio da Islands Architecture. - Suporte nativo a Markdown e MDX. - Suporte a TypeScript pronto para uso. - Sistema de rotas baseado em arquivos. Você pode fazer o deploy do seu projeto Astro tanto utilizando nossos templates prontos para deploy quanto vinculando um projeto existente com o Azion CLI. ## Templates disponíveis | Nome template | Caso de uso | Detalhes | |:-------------|:---------|:-----| | Astro Audiophile | E-commerce | | | Astro Boilerplate | Projeto inicial | | | Astro Blog Starter Kit | Blog | | | Astro Ecommerce | E-commerce | | | Astro with Multiple Frameworks | Projeto inicial | | | Astro with Framework Preact | Projeto inicial | | | Astro Minimal | Projeto inicial| | | Astro with Non-HTML Pages | Conteúdo não HTML | | | Astro Portfolio | Portfolio | | | Astro Quickstore | E-commerce | | | Astro Starlog | Release notes de projetos | | | Astro with Markdoc | Projeto inicial| | | Astro Markdown with Plugins | Projeto inicial | | | Astro Markdown with Shiki | Demonstração de código| | | Astro with MDX | Projeto inicial | | | Astro with Nano Stores | E-commerce | | | Astro with Tailwind CSS | Projeto inicial| | | Astro with Vitest | Projeto inicial | | | Cosmic - Simple Astro Blog | Blog | | | Devscard | Currículo Online | | | Clean Astro App with Sanity | Integração com CMS | | | Webpage to PDF Resume | Gerador de currículos | | ### Realizando deploy de um template no Azion Console 1. Faça login no [Console](https://console.azion.com). 2. Clique no botão **\+ Create**. 3. Navegue para a seção **Templates**. 4. Escolha o template Astro desejado. 5. Conecte sua conta do GitHub. 6. Escolha um nome para sua aplicação. 7. Clique em **Deploy**. ### Realizando deploy de um projeto existente usando importação do GitHub 2. No [Console](https://console.azion.com), clique no botão **\+ Create**. 3. Selecione Importar do Github. 4. Selecione seu repositório. 5. Escolha um nome para a aplicação. 6. Selecione o Preset do **Astro**. 7. Insira o comando de instalação: ``` npm install ``` 8. Clique em **Deploy** ### Realizando deploy de um template via Azion CLI Você pode usar a Azion CLI para realizar o deploy de um template. :::tip[Dica] Visite o [Guia CLI](/pt-br/documentacao/produtos/azion-cli/visao-geral/#installing-azion-cli) para instruções detalhadas de instalação. ::: 1. No terminal, inicialize o projeto: ```sh azion init ``` 2. Dê um nome ao seu projeto ou pressione `enter` para aceitar a sugestão dada: ```sh ? Your application's name: (black-thor) ``` 3. Escolha o preset do Astro: ```sh ? Choose a preset: [Use arrows to move, type to filter] Angular > Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript ... ``` 4. Escolha um dos templates disponíveis. 5. Você pode optar por iniciar um servidor de desenvolvimento local ou não. ```sh ? Do you want to start a local development server? (y/N) ``` Os próximos passos dependem de sua resposta. - [Se você optou por executar um servidor de desenvolvimento local](#resposta-sim-para-desenvolvimento-local). - [Se você optou por não executar um servidor de desenvolvimento local](#resposta-nao-para-desenvolvimento-local). --- #### Resposta sim para desenvolvimento local 1. Instale as dependências do projeto. Digite `y` quando a interação solicitar: ```sh Do you want to install project dependencies? This may be required to start local development server (y/N) ``` Aguarde até que a instalação seja concluída. Saída: ```sh Your application was built successfully [Azion] [Server] › ✔ success Function running on port 0.0.0.0:4321, url: http://localhost:4321 ``` 2. No navegador, vá para `http://localhost:4321/` e você verá o seu projeto Astro em execução. #### Realizando deploy do projeto Quando o seu projeto está em execução localmente, você ainda pode implantá-lo. Para fazer isso: 1. Pare a execução no terminal com `control + c`. 2. Acesse a pasta do projeto: ```sh cd [nome-do-seu-projeto] ``` 3. Realize o deploy do projeto: ```sh azion deploy ``` 4. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform. :::note Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido. ::: Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto Astro na plataforma da Azion. Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a `https://xxxxxxx.map.azionedge.net`. --- ##### Resposta não para desenvolvimento local Após indicar que você não deseja executar um servidor local, implante o projeto. 1. Digite `y` para a seguinte interação, indicando que deseja implantar o projeto: ```sh Do you want to deploy your project? ``` 2. Instale as dependências do projeto. Digite `y` quando a interação solicitar: ```sh Do you want to install project dependencies? This may be required to start local development server (y/N) ``` 3. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion. :::note Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido. ::: Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto Astro na plataforma da Azion. Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a `https://xxxxxxx.map.azionedge.net`. ### Deploy de um projeto local com Azion CLI Você pode utilizar o processo abaixo para realizar o deploy de um projeto local, compatível com as [frameworks suportadas](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/). :::tip[Dica] Visite o [Guia CLI](/pt-br/documentacao/produtos/azion-cli/visao-geral/#installing-azion-cli) para instruções detalhadas de instalação. ::: 1. Dentro da pasta de seu projeto existente, use o comando abaixo para vincular o seu projeto a uma application: ```shell azion link ``` 1. Selecione o preset Astro. 2. A CLI vai lhe guiar pelo restante do processo.