Azure Static Web Apps com React e Visual Studio Code
Olá pessoal, no post de hoje vamos falar sobre como implantar uma aplicação React no Azure Static Web Apps usando o Visual Studio Code.
Caso queira entender melhor o que é Azure Static Web Apps, visite Azure Static Web Apps — Um panorama geral
Pré-requisitos
- NPM
- Visual Studio Code
- Azure Static Web App extension para Visual Studio Code
- Git
Instalando o React
Uma vez que todos os pré-requisitos estiverem instalados em sua máquina, o próximo passo é instalar o React e para isso, execute o comando abaixo.
npm install -g create-react-app
Agora que você tem o React instalado, você pode criar um novo projeto react executando o comando abaixo.
npx create-react-app <project-name>
Após criar o projeto, vamos abri-lo no Visual Studio Code. Você pode abrir o projeto usando a interface ou digitando o comando abaixo em sua ferramenta de linha de comando.
code .
Nota: Sempre acesse a raiz do projeto antes de abrir no Visual Studio Code ou você pode abrir o VS Code primeiro e depois abrir a raiz do projeto. Evite sempre abrir na pasta anterior a pasta do projeto que você criou, pois isso pode acarretar em erros no build e consequentemente no pipeline.
A próxima etapa é a implantação, então pressione F1 e procure Azure Static Web App: Create Static Web Apps.
Na próxima etapa, precisamos selecionar a assinatura do Azure, caso não esteja logado em sua conta do Azure com o Visual Studio Code, será exibida uma opção para fazer a conexão.
Na próxima opção, precisamos definir o nome a ser dado ao serviço no Azure.
Na próxima etapa, é a vez de definir um nome para o repositório GitHub.
O próximo passo é definir a região onde o recurso será criado no Azure.
Agora é o momento de definir o tipo de projeto a ser implantando, observe que o Azure Static Web Apps oferece suporte a vários frameworks e, como nosso projeto é um projeto React, devemos selecionar a opção React.
Aqui precisamos definir o caminho para a raiz do projeto React que é o /. Ao fazer isso, o executor (runner) responsável pelo processamento da pipeline de implantação do código, poderá executar o comando npm run build para gerar as saídas.
Na última etapa, precisamos definir o caminho de saída do build da aplicação e em projetos React, precisamos informar a pasta build que é gerado pelo comando build.
Por fim, pressione Enter para começar a criação do recurso no Azure e criação do repositório no GitHub.
Depois que a execução é concluída, temos uma instância do Azure Static Web Apps provisionada no Azure e pronta para ser utilizado e o repositório no GitHub com o nosso código. Ao final, a pipeline de implantação do código será executada automaticamente pelo GitHub Actions.
Agora, vamos abrir o Portal do Azure para obter o link de acesso ao nosso aplicativo no recurso Azure Static Web App.
Com o link devidamente copiado, cole em seu navegador para ver o resultado ou simplesmente você pode clicar no link para ser redirecionado automaticamente.
Conclusão
O Azure Static Web Apps é um recurso poderoso que facilita e agiliza a criação e a entrega de um projeto front-end moderno.
E ai, gostou desse post? Quer conversar um pouco mais sobre? Deixe um comentário com suas dúvidas ou entre em contato através do LinkedIn.
