Curioso para conferir os melhores destaques de Azure Static Web Apps? Este mês traz uma edição especial com conteúdos incríveis de novembro e dezembro de 2024! 🌟
Olá, Comunidade Azure Static Web Apps! 🎉
Estamos começando 2025 com uma edição especial da nossa newsletter mensal! Como parte das celebrações de fim de ano e do início de um novo ciclo, reunimos os conteúdos mais inspiradores e técnicos dos últimos dois meses em um só lugar. Com isso, garantimos que você não perdeu nada enquanto aproveitava os feriados.
E, falando em 2025, prepare-se: este ano será repleto de novidades para o Azure Static Web Apps! Ao longo dos próximos meses, vou compartilhar lançamentos, atualizações e conteúdos técnicos, incluso tutoriais incríveis que ajudarão você a aprimorar suas habilidades e explorar ao máximo esse serviço incrível!
Não se esqueça de compartilhar suas dúvidas, sugestões e feedbacks conosco. Estamos sempre à disposição para ajudar e garantir que você tenha a melhor experiência possível com o Azure Static Web Apps.
Vamos começar e conferir os destaques de novembro e dezembro de 2024? 🚀
Destaques de Conteúdos da Comunidade – Novembro e Dezembro 2024
Conteúdos | Novembro 2024
Deploying Static Web Apps to Azure With GitHub Actions
- Autor: The Dev Talk Show
O vídeo aborda como configurar e implantar uma aplicação Blazor WebAssembly Standalone em Azure Static Web Apps usando GitHub Actions. Ele começa destacando como definir o ambiente no portal do Azure, mas foca na automação com Actions para integração contínua.
Os apresentadores explicam como ajustar o arquivo de workflow YAML, definindo locais específicos para o projeto e a saída da build (wwwroot), além de configurar o Static Web App Token como um segredo no repositório. O processo inclui instruções detalhadas para criar e gerenciar tokens via CLI e verificar logs das ações no GitHub para resolver erros comuns, como apontar para pastas incorretas.
O vídeo também explora brevemente a infraestrutura do Azure Static Web Apps, destacando a facilidade de hospedar aplicações client-side e a possibilidade de integrar APIs (como Azure Functions). Este conteúdo é ideal para desenvolvedores que desejam automatizar deploys e entender como configurar workflows otimizados para seus projetos. Confira o vídeo completo para todos os detalhes técnicos.
How to host a static website with Azure Storage | How to Host a Frontend on Azure Storage Account
- Autor: AdiCloud
O vídeo demonstra o processo de hospedagem de um site estático em uma Azure Storage Account, utilizando o recurso de Static Website Hosting. Ele explica cada etapa, desde a criação da conta de armazenamento até o upload dos arquivos do site.
Primeiro, é mostrado como configurar a Storage Account: selecionar a assinatura, o grupo de recursos, a região (como "East US") e o nível de desempenho (padrão ou premium). O vídeo destaca as opções de redundância de dados, como Local Redundant Storage (LRS), ideal para testes, criando três cópias no mesmo local. Também aborda configurações avançadas, como criptografia gerenciada pela Microsoft e a versão mínima de TLS.
Com a Storage Account criada, o vídeo explora como habilitar o Static Website Hosting, configurando os caminhos para index.html (arquivo principal) e um arquivo de erro opcional (error.html). A partir disso, é gerada uma URL pública para acessar o site.
Por fim, o apresentador realiza o upload dos arquivos no contêiner criado automaticamente e confirma que o site está acessível pela URL gerada. Este vídeo é ideal para quem busca uma solução simples e eficiente para hospedar sites estáticos com alta disponibilidade e baixo custo.
Confira o vídeo para um passo a passo detalhado!
🚀 Deploying a Flutter Web App on Azure Static Web Apps
- Autor: Dmytro Kravchyna
O artigo apresenta um passo a passo para hospedar uma aplicação Flutter Web no Azure Static Web Apps com Azure DevOps, destacando a simplicidade e eficiência desse processo. Ele cobre desde a configuração de pipelines até a resolução de problemas como CORS, fornecendo dicas práticas para desenvolvedores.
O guia detalha como criar e integrar o pipeline no Azure DevOps, gerar artefatos otimizados e implantar no Azure Static Web Apps com segurança. Além disso, aborda soluções para desafios comuns, como o acesso a APIs em diferentes domínios, por meio de configurações de proxy e proxies reversos.
Se você deseja explorar uma abordagem moderna para hospedar aplicações Flutter Web, com integração CI/CD e suporte escalável, confira o artigo completo para aprender todos os detalhes e potencializar seus projetos!
Deploy Nitro apps to Azure Static Web apps or functions
- Autor: https://nitro.build/
A documentação do Nitro Build explica como hospedar aplicativos Nitro no Azure Static Web Apps ou Azure Functions, com foco na simplicidade de configuração e integração contínua. Ele aborda desde a pré-visualização local até o deploy automatizado, destacando ferramentas como GitHub Actions e Azure Functions Core Tools para garantir eficiência no processo.
No caso do Azure Static Web Apps, o artigo enfatiza a configuração automática gerada pelo Nitro e a possibilidade de customização para atender a diferentes necessidades. Para Azure Functions, são apresentadas orientações para testar localmente e realizar deploys seguros, tanto manualmente quanto via CI/CD.
Se você deseja aproveitar as vantagens do Azure para hospedar aplicativos Nitro de forma ágil e escalável, este guia oferece um passo a passo completo, com dicas práticas e otimizações para melhorar o desempenho. Não perca a oportunidade de aprender mais sobre como simplificar seus projetos no Azure! Leia o artigo completo para conferir todos os detalhes.
Build a Static Site With Azure Static Web Apps
- Autor: McKee’s Blog
O artigo explica como criar e hospedar um site estático simples no Azure Static Web Apps (SWA), destacando a facilidade de uso, integração com GitHub e recursos gratuitos. Ele guia o leitor desde a criação de um repositório no GitHub até o deploy automatizado utilizando a extensão do SWA no Visual Studio Code.
Alguns dos principais pontos abordados incluem:
- Configuração Simples: Com o SWA, o deploy é integrado ao repositório do GitHub, automatizando o processo com GitHub Actions.
- Benefícios da Camada Gratuita: Ideal para projetos pessoais e pequenos negócios, oferece 100GB de banda mensal sem custos.
- Ambientes de Teste: Cada branch ou pull request gera automaticamente um ambiente de preview para testar antes do deploy final.
Se você procura uma solução prática e gratuita para hospedar seus sites estáticos, o Azure Static Web Apps é a escolha ideal. Confira o artigo completo para aprender como começar e simplificar seu fluxo de trabalho!
Fix 404 Not Found Error in Azure Static Web Apps | Complete Solution Guide
- Autor: Osego Codes
O vídeo aborda como corrigir o erro 404 Not Found em aplicações hospedadas no Azure Static Web Apps, que ocorre ao acessar ou atualizar páginas secundárias. O apresentador explica de forma prática como configurar rotas eficientes por meio do arquivo staticwebapp.config.json, garantindo que todas as requisições sejam redirecionadas corretamente para o arquivo principal (index.html).
O guia inclui exemplos reais, desde a atualização do código local e commit no GitHub até a execução do GitHub Actions para automatizar o deploy no Azure. A configuração resolve problemas comuns de roteamento em Single Page Applications (SPA), tornando a navegação mais fluida e sem interrupções.
Se você está enfrentando problemas de navegação em seu site no Azure Static Web Apps, este vídeo oferece uma solução clara e prática. Assista agora e descubra como garantir que suas páginas funcionem perfeitamente em qualquer rota!
Ultimate Guide to Hosting JavaScript based Single Page Applications (React, Angular, Vue.js) on Azure
- Autor: Robert Dennyson
O artigo explora as melhores opções para hospedar Single Page Applications (SPAs) em JavaScript no Azure, incluindo React, Angular e Vue.js. Ele compara soluções como Azure Static Web Apps, Azure App Service, Azure Blob Storage + Azure CDN e Azure Kubernetes Service (AKS), destacando pontos fortes e limitações de cada uma. Aspectos como segurança, escalabilidade, custos e suporte a Single Sign-On (SSO) são analisados para ajudar na escolha ideal.
Cada solução é indicada para cenários específicos: Azure Static Web Apps para SPAs estáticas simples, Azure App Service para aplicações dinâmicas e Azure Kubernetes Service para arquiteturas empresariais mais complexas. O artigo também considera a necessidade de gerenciamento avançado de tráfego com Azure Front Door ou ambientes customizados com Azure Virtual Machines, cobrindo um amplo espectro de possibilidades.
Se você está buscando a melhor forma de hospedar sua aplicação no Azure, este guia oferece uma visão prática e comparativa para encontrar a solução ideal. Confira o artigo completo para escolher a hospedagem que atende perfeitamente às suas necessidades!
How to Host Your Website for FREE on Azure! (Yes, $0)
- Autor: Emerverse
O vídeo demonstra como hospedar gratuitamente um site pessoal no Azure Static Web Apps (SWA), uma solução ideal para sites simples baseados em HTML, CSS e JavaScript. O apresentador destaca que o plano gratuito oferece benefícios como integração com GitHub para deploy contínuo e facilidade de configuração, sendo perfeito para projetos menores e de baixo custo.
Durante o tutorial, é mostrado como criar um recurso no Azure, conectá-lo ao repositório do GitHub e realizar o deploy automático do código, tornando o site acessível por um link gerado pelo Azure. Também são discutidas as limitações do plano gratuito, como 100 GB de banda mensal e ausência de recursos avançados, mas que não afetam a maioria dos sites pessoais.
Este vídeo é perfeito para quem deseja hospedar um site pessoal de forma simples e sem custos. Aprenda a usar o Azure Static Web Apps e comece agora mesmo a criar e compartilhar seus projetos online. Assista ao vídeo completo para dominar todos os detalhes!
Running Umbraco On Azure Web Apps
- Author: Umbraco CMS
O artigo explica as melhores práticas para hospedar o Umbraco em Azure Web Apps, destacando configurações essenciais e limitações do ambiente. Ele aborda a necessidade de ajustar variáveis de configuração como MainDomLock e LocalTempStorageLocation, além de garantir que o ambiente de trabalho seja gravável, já que recursos como "Run from Package" não são compatíveis com o Umbraco.
Questões como armazenamento remoto, escalabilidade e migração de workers também são discutidas, ressaltando os desafios de operações intensivas de I/O e a importância de consultar a documentação de balanceamento de carga para configurar o scale-out. O artigo também recomenda o uso do Azure Key Vault para gerenciar segredos de forma segura.
Se você deseja aproveitar ao máximo o Azure Web Apps para hospedar seu site Umbraco, este guia oferece orientações práticas para otimizar o desempenho e evitar problemas comuns. Leia o artigo completo e implemente as melhores práticas no seu projeto!
CI/CD - Shell Out
- Autor: Darren Fuller
O artigo relata a experiência do autor ao enfrentar um problema no processo de build de seu site Hugo ao migrar para o Azure Static Web Apps. O erro surgiu devido à incompatibilidade da versão do Go (1.23.3) utilizada no projeto com as versões suportadas pelo GitHub Action padrão, que não fornecia uma solução direta para especificar a versão desejada. Isso levou o autor a criar seu próprio fluxo de CI/CD, eliminando a dependência da ação automática e utilizando scripts personalizados.
O novo fluxo de trabalho inclui etapas claras: instalação de ferramentas necessárias (Go, Node.js e Hugo), geração do site estático e deploy via CLI do Azure Static Web Apps. O autor também integrou pré-visualizações no ambiente de desenvolvimento usando um preview environment, garantindo a validação antes de enviar alterações para produção. Essa abordagem baseada em scripts oferece maior controle e permite testes locais, algo que ações pré-configuradas frequentemente não conseguem oferecer.
O artigo destaca a importância de investir tempo na criação de processos repetíveis e independentes de soluções de terceiros. Para aqueles que buscam melhorar seus pipelines de CI/CD e garantir maior confiabilidade em seus projetos, a leitura do texto completo é essencial!
- Link: CI/CD - Shell Out
Conteúdos | Dezembro 2024
Azure Static Web Apps - Playlist
- Autor: Balaone
Uma coleção de vídeos cobrindo vários tópicos relacionados ao Azure Static Web Apps, ideal para novos desenvolvedores.
Building an educational game with AI tools and Azure Static Web Apps (Part 1)
- Autor: Foteini Savvidou
O artigo descreve como criar um protótipo de jogo educacional usando o motor Ren’Py, ferramentas de IA como GitHub Copilot e Azure OpenAI Service, e o Azure Static Web Apps para deploy. A autora compartilha sua experiência ao desenvolver o Christmas Copilot Quest, um visual novel que ensina como usar o GitHub Copilot, combinando aprendizado técnico com uma abordagem interativa e divertida.
A criação envolveu o uso de Ren’Py para estruturar diálogos, quizzes e conquistas personalizadas, além de ferramentas de IA para gerar os visuais do jogo com consistência e rapidez. O processo de automação do build foi facilitado pelo CLI do Ren’Py, enquanto o Azure Static Web Apps garantiu um deploy simplificado integrado ao GitHub Actions.
Se você deseja aprender como unir criatividade, tecnologia e IA para construir projetos inovadores, este artigo é o guia perfeito. Leia agora e descubra como criar sua própria experiência interativa e transformar aprendizado em diversão!
Building an educational game with AI tools and Azure Static Web Apps (Part 2)
- Autor: Foteini Savvidou
O artigo apresenta como automatizar o processo de construção e deploy de um jogo educacional desenvolvido com Ren’Py usando GitHub Actions e Azure Static Web Apps (SWA). Ele descreve como criar workflows que simplificam o deploy para produção, além de configurar ambientes de preview para testar alterações antes da publicação.
Os ambientes de preview do Azure SWA permitem testar mudanças em pull requests, branches específicos ou ambientes nomeados, garantindo controle e flexibilidade no desenvolvimento. A integração com GitHub Actions possibilita um fluxo contínuo, desde a geração do jogo até a publicação automatizada, economizando tempo e reduzindo erros manuais.
Se você busca aprimorar seus processos de deploy com automação e ambientes de teste seguros, este artigo é um excelente guia. Leia agora para aprender como integrar GitHub Actions e Azure SWA nos seus projetos!
Specify your Node.js version for the Azure Static Web App GitHub Action
- Autor: Tim Deschryver
O artigo aborda como configurar a versão do Node.js para aplicações hospedadas no Azure Static Web Apps e automatizadas pelo GitHub Actions. Durante a migração de um blog, o autor identificou que o fluxo de trabalho gerado automaticamente pelo Azure utiliza a versão 14.x do Node.js por padrão, o que não atendia aos requisitos de sua aplicação, que precisava da versão 16.x.
Para resolver o problema, a solução foi especificar a versão desejada diretamente no arquivo package.json, utilizando o campo "engines" com a versão apropriada. Essa abordagem permite ao GitHub Actions reconhecer e utilizar a versão necessária do Node.js durante o processo de build e deploy, sem necessidade de alterar a configuração padrão do workflow.
Se você utiliza Azure Static Web Apps e precisa de uma versão específica do Node.js para seu projeto, este artigo fornece uma solução prática e direta. Leia o texto completo para garantir que suas aplicações sejam executadas com a configuração ideal!
How to Set Environment Variables for Azure Static Web Apps in GitHub Secrets & Variables
- Autor: Osego Codes
O vídeo explora como configurar variáveis de ambiente para aplicativos em Azure Static Web Apps, uma prática essencial para proteger informações sensíveis, como URLs de APIs, chaves de autenticação e outras credenciais. Em vez de expor essas informações no código, o vídeo ensina como armazená-las de forma segura no Azure Portal ou diretamente no repositório GitHub, utilizando as GitHub Secrets & Variables.
O autor demonstra duas abordagens: primeiro, a configuração diretamente no portal Azure, onde as variáveis podem ser inseridas e vinculadas ao ambiente de implantação. Caso essa abordagem falhe, ele apresenta a solução alternativa de configurar variáveis no repositório GitHub. No workflow do GitHub Actions, as variáveis podem ser referenciadas usando o formato ${{ secrets.<NOME_DA_VARIÁVEL> }}, garantindo que os dados sejam protegidos durante a execução do pipeline CI/CD.
Se você deseja aprender a proteger variáveis de ambiente e melhorar suas práticas de implantação em Azure Static Web Apps, este guia prático e detalhado é uma excelente oportunidade para otimizar sua estratégia. Confira o vídeo completo e eleve a segurança do seu projeto!
Setting Up Custom Domains in Azure Static Web Apps
- Autor: Chkhachkhi Sami
Configurar um domínio personalizado no Azure Static Web Apps é um processo direto para dar ao seu site uma aparência profissional. Comece acessando a seção Custom domains no Portal Azure, onde você pode adicionar e verificar seu domínio ao criar um registro TXT no provedor DNS. Isso conecta o domínio ao Azure de forma segura.
Além disso, configure um subdomínio www e os registros CNAME no provedor DNS para garantir que seu site funcione tanto com quanto sem o "www". Esse processo é essencial para uma experiência de navegação consistente e acessível.
Com a configuração concluída, seu domínio personalizado estará vinculado à sua aplicação no Azure Static Web Apps. Aproveite para oferecer um site profissional e personalizado aos seus usuários. Explore essa funcionalidade e leve seu projeto para o próximo nível! 🚀
Azure Static Web Apps 🚀
- Autor: GeekPandaCloud
Azure Static Web Apps é uma solução econômica e eficiente para hospedar aplicações simples ou realizar migrações iniciais para o Azure. Com opções de plano gratuito e padrão, ele permite criar ambientes de desenvolvimento, teste e produção com facilidade, ideal para aplicações front-end feitas em HTML, JavaScript ou JSON. O plano gratuito é perfeito para testes e projetos menores, enquanto o padrão atende melhor a demandas produtivas.
O recurso se destaca pela integração com ferramentas como GitHub ou Azure DevOps, permitindo deploy contínuo e fácil configuração de custom domains para personalizar a URL do site. Além disso, suporta conexão com bancos de dados e a utilização de Private Endpoints, que garantem maior segurança ao conectar recursos internos do Azure.
Se você busca um ambiente rápido, simples e acessível para suas aplicações web, o Azure Static Web Apps pode ser a escolha ideal. Experimente a versão gratuita para começar e explore as funcionalidades que tornam este recurso uma solução poderosa para diversos projetos! 🚀
Static Web Apps.- Desplegados
- Autor: Jorge Levy
Neste artigo, é explorado como configurar e implantar uma Azure Static Web App utilizando pipelines do Azure DevOps ou GitHub Actions. Esse método é ideal para aplicativos front-end como Angular, React, Vue ou até mesmo JavaScript vanilla. O processo inclui a criação do recurso na plataforma Azure, escolha do plano de hospedagem (como free ou standard), e configuração do repositório de código.
A integração com pipelines automatiza o deploy de forma quase total, gerando um arquivo YAML padrão. Para quem prefere mais controle, é possível criar pipelines personalizados com base no token de deployment obtido no recurso do Azure. Este token é usado como variável para autenticar o processo de publicação.
O resultado é uma implantação simplificada e eficiente, perfeita para desenvolvedores que desejam automatizar o ciclo de vida de suas aplicações. Continue acompanhando para descobrir como expandir o uso dessas ferramentas integrando backends com ASP.NET Web API, uma alternativa às Azure Functions. 🚀
One-Shot: Azure Static Websites with Custom Domains Using Terraform
- Author: Mark Tinderholt
Configurar domínios personalizados para sites estáticos no Azure Storage usando Terraform é essencial para aumentar a credibilidade de projetos. Contudo, o processo apresenta desafios, pois a configuração do domínio depende de registros DNS pré-existentes, o que impede a conclusão em uma única execução do comando terraform apply.
O problema central está no bloco custom_domain do Terraform, que exige uma abordagem em duas fases: primeiro, provisionar a conta de armazenamento e, em seguida, adicionar os registros DNS antes de concluir a configuração. Essa limitação tem gerado discussões na comunidade, como no repositório do Terraform AzureRM no GitHub, onde melhorias são sugeridas para simplificar o processo no futuro.
Se você quer entender melhor os desafios e soluções relacionados à configuração de domínios personalizados no Azure usando Terraform, este artigo é uma leitura indispensável. Descubra mais sobre a abordagem em duas fases e como a comunidade está trabalhando para resolver essas limitações!
Como Participar?
Gostou da edição? Quer ver seu conteúdo em destaque no próximo mês? É simples! Siga os passos abaixo:
- Crie um conteúdo técnico sobre Azure Static Web Apps (artigo, vídeo, projeto, ou podcast).
- Compartilhe nas redes sociais usando a hashtag #AzureStaticWebApps.
- Publique no repositório oficial do Azure Static Web Apps no GitHub, na aba Discussions, no tópico chamado This Month In Azure Static Web Apps.
Seu conteúdo poderá ser compartilhado no TechCommunity da Microsoft na próxima edição! 🌟
Conclusão
Essa foi a nossa edição especial com os destaques de novembro e dezembro de 2024! Agradecemos a todos que contribuíram com seus conteúdos e fortaleceram a Comunidade Azure Static Web Apps. 🚀
Nos vemos em breve, com mais novidades e insights técnicos incríveis durante esse ano de 2025! Até lá! 👋
