# Compatibilidade com Frameworks | Gatsby import DocButton from '~/components/webkit/DocButton.vue'; ## Sobre Gatsby O Gatsby é um gerador de sites estáticos que compila seus componentes React em HTML estático. Ele utiliza uma arquitetura baseada em componentes, onde você escreve componentes React e o Gatsby os pré-renderiza como HTML estático no momento da build. Essa abordagem resulta em carregamento rápido das páginas, já que o HTML está pronto para ser servido imediatamente. **Principais recursos**: - Geração de HTML estático no momento do build. - Arquitetura baseada em componentes React. - Camada de dados GraphQL para gerenciamento de conteúdo. - Suporte nativo a Markdown e MDX. - Suporte a TypeScript. - Sistema de rotas baseado em arquivos. - Ecossistema rico de plugins para estender funcionalidades. Você pode fazer o deploy do seu projeto Gatsby tanto utilizando nossos templates prontos para deploy quanto vinculando um projeto existente com o Azion CLI. ## Templates disponíveis | Nome do template | Caso de uso | Detalhes | |:-------------|:---------|:-----| | ButterCMS + Gatsby Starter Project | E-commerce | | | Gatsby Blog Starter Kit| Starter project | | | Gatsby Ecommerce Theme | Blog | | | Gatsby Boilerplate| E-commerce | | ### 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 Gatsby 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 Gatsby. 7. Insira o comando de instalação: ```sh 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/#instalar-a-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 Gatsby: ```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:3333, url: http://localhost:3333 ``` 2. No browser, visite `http://localhost:3333/` e você pode ver o seu projeto Angular rodando. #### 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 Gatsby 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? (y/N) ``` 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 deploy your project (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/#instalar-a-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 Gatsby. 2. A CLI vai lhe guiar pelo restante do processo.