Exercício – Começar

• 7 minutos

Neste exercício, você cria uma instância do Aplicativo Web Estático do Azure, incluindo uma Ação do GitHub que cria e publica automaticamente seu site.

Este módulo utiliza recursos disponibilizados através da sandbox, que fornece acesso gratuito e temporário a uma subscrição do Azure, juntamente com os recursos de que necessita para concluir os exercícios. Certifique-se de ativar a área restrita na parte superior desta página. À medida que você trabalha os exercícios neste módulo, cada unidade depende do conteúdo que você criou em um exercício anterior. Por esse motivo, selecione uma estrutura JavaScript e use-a para todos os exercícios subsequentes.

Criar um repositório

Para começar, crie um repositório usando um modelo do GitHub. Uma série de modelos de repositório estão disponíveis, que contêm um aplicativo inicial implementado em várias estruturas de front-end.

1. Vá para a página Criar a partir do modelo do GitHub para abrir o repositório de modelos.

2. Se for solicitado Proprietário, selecione uma de suas contas do GitHub.

3. Para nome do repositório, digite my-static-web-app-and-api.

4. Selecione Criar repositório a partir de modelo.

   À medida que você cria o projeto a partir de um modelo, o GitHub constrói seu repositório em segundo plano.

Executar a sua aplicação localmente

Agora você tem um repositório do GitHub chamado my-static-web-app-and-api em sua conta do GitHub. Em seguida, você clona o repositório GitHub e executa o código localmente no seu computador.

1. Abra uma janela do terminal no seu computador.

   Se você estiver no Windows, poderá entrar cmd na caixa de pesquisa da bandeja do sistema.

2. Para clonar o repositório em sua máquina, cole o código a seguir na janela do prompt de comando.

   Certifique-se de substituir <YOUR_GITHUB_USERNAME> pelo seu nome de usuário do GitHub.

   git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api
   

   Nota

   Se você tiver problemas para copiar para o terminal do prompt de comando, clique com o botão direito do mouse no ícone na barra de título e, na guia Propriedades , verifique se Usar Ctrl+Shift+C/V como Copiar/Colar está marcado.

3. Mude para o diretório do código-fonte clonado.

   cd my-static-web-app-and-api
   

4. Vá para o diretório da sua estrutura de front-end preferida.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Instale as dependências do aplicativo.

   npm install
   

6. Verifique se a versão mais recente de cada dependência está instalada com o seguinte comando.

   npm audit fix
   

7. Execute o aplicativo cliente front-end.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Navegar para a aplicação

Quando o pacote de aplicativos é gerado e compilado, uma guia do navegador é aberta automaticamente para exibir seu aplicativo em execução localmente.

Seu aplicativo deve dizer Carregando dados, porque ainda não há dados ou API. Você adiciona a API para seu aplicativo Web mais adiante nesta lição.

No terminal, pressione Ctrl+C para interromper o trabalho em lote.

Parabéns! Você criou seu aplicativo e o viu sendo executado localmente em seu navegador. Em seguida, você pode publicar seu aplicativo nos Aplicativos Web Estáticos do Azure.

Criar uma aplicação Web estática

Você criou seu próprio repositório GitHub. Agora você pode criar seu próprio aplicativo Web estático usando a extensão de Aplicativos Web Estáticos do Azure para Visual Studio Code.

Instalar a extensão Aplicações Web Estáticas do Azure para o Visual Studio Code

1. Abra o Visual Studio Code.

2. No menu superior, selecione Exibir>Extensões e insira Aplicativos Web Estáticos do Azure na caixa de pesquisa.

3. Quando a guia de extensão for carregada no Visual Studio Code, selecione Instalar.

Abra a pasta do aplicativo

1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

2. Digite o arquivo: Abrir pasta ....

3. Selecione a pasta my-static-web-app-and-api .

4. Selecione Abrir para abrir a pasta no Visual Studio Code.

Iniciar sessão no Azure no Visual Studio Code

1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

2. Insira Azure: Entre e siga as instruções para autenticar.

   Importante

   Certifique-se de entrar no Azure usando a mesma conta usada para ativar a área restrita no navegador. Usar a mesma conta torna a Assinatura do Concierge disponível, o que lhe dá acesso a recursos gratuitos do Azure durante este tutorial.

Selecione a sua subscrição

1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

2. Entre no Azure: selecione Assinaturas e limpe todas as seleções, exceto a Assinatura do Concierge.

   

Consolidar alterações

Quando você instalou as dependências do aplicativo, alguns dos arquivos em seu projeto foram atualizados no processo. Para prosseguir, você precisa confirmar essas alterações no repositório.

1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

2. Digite e selecione Git Commit All.

3. Insira a confirmação inicial na parte superior do arquivo.

4. Salve e feche o arquivo de confirmação do git.

   Não se preocupe em sincronizar suas alterações com o servidor neste momento. As atualizações são copiadas para o GitHub quando você publica o aplicativo Web estático.

Criar o aplicativo Web estático

As sessões autenticadas atuais do Azure e do GitHub são necessárias para criar um aplicativo Web estático. Se você ainda não estiver conectado a ambos os provedores, a extensão solicitará que você entre durante o processo de criação.

1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

3. Assim que a aplicação for criada, é apresentada uma notificação de confirmação no Visual Studio Code.

   

   Enquanto você está configurando a compilação, o Visual Studio Code relata o status da compilação para você.

   

4. Você pode visualizar o progresso da implantação usando as Ações do GitHub expandindo o menu Ações .

   

   Quando a implantação estiver concluída, você poderá navegar diretamente para seu site.

5. Para visualizar o site no navegador, clique com o botão direito do mouse no projeto na extensão Static Web Apps e selecione Browse Site.

   

   Seu aplicativo deve dizer Carregando dados, porque ainda não há dados ou API. Você adiciona a API para seu aplicativo Web posteriormente neste módulo.

Parabéns! Seu aplicativo é implantado nos Aplicativos Web Estáticos do Azure!

Solicitar as alterações do GitHub

Extraia as alterações mais recentes do GitHub para derrubar o arquivo de fluxo de trabalho criado pelo serviço de Aplicativos Web Estáticos do Azure.

1. Abra a Paleta de Comandos pressionando Ctrl+Shift+P.

2. Entre e selecione Git: Pull.

3. Prima Enter.

Próximos passos

Em seguida, você aprenderá como criar e executar sua API usando um projeto do Azure Functions.