Exercício – Introdução

Concluído

Os Aplicativos Web Estáticos do Azure publicam sites em um ambiente de produção compilando aplicativos de um repositório do GitHub. Neste exercício, você vai criar um aplicativo Web usando sua estrutura de front-end preferida de um repositório do GitHub.

Criar um repositório

Este módulo facilita a criação de um repositório usando um repositório de modelos do GitHub. Vários modelos estão disponíveis, e cada um deles contém um aplicativo inicial criado com uma estrutura de front-end diferente.

1. Navegue até a página de criação com modelo do repositório de modelos. Se você receber um erro do tipo 404: página não encontrada, entre no GitHub e tente novamente.

2. Escolha uma de suas contas do GitHub na lista suspensa Proprietário.

3. Dê ao repositório o nome my-static-web-app.

4. Selecione o botão Criar repositório do modelo.

Executar o aplicativo

Você acabou de criar um repositório do GitHub chamado my-static-web-app em sua conta do GitHub. Em seguida, você clonará o repositório e executará o código localmente em seu computador.

1. Abra um terminal em seu computador.

2. Comece clonando o repositório do GitHub no diretório desejado em seu computador.

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

3. Vá até a pasta de seu código-fonte.

   cd my-static-web-app
   

4. Em seguida, acesse a pasta da sua estrutura de front-end preferida, conforme mostrado abaixo.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Agora, instale as dependências do aplicativo.

   npm install
   

   Observação

   Caso receba o erro Não foi possível localizar o caminho, verifique se você instalou o Node.js de https://nodejs.org. Talvez seja necessário fazer uma Configuração personalizada que inclua a instalação da opção Adicionar ao PATH.

   

6. Por fim, execute o aplicativo cliente de front-end.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Navegar até o aplicativo

É hora de ver o aplicativo em execução localmente. Cada aplicativo de front-end é executado em uma porta diferente.

Selecione o link para navegar até o aplicativo.

Navegue até http://localhost:4200.

Navegue até http://localhost:3000.

Navegue até http://localhost:5000.

Navegue até http://localhost:8080.

Observação

Nos exercícios deste módulo, você implantará um aplicativo sem uma API. Confira a seção Próximas etapas ao final deste módulo para obter informações sobre o próximo módulo, em que você implantará uma API juntamente com seu aplicativo.

Agora, pare seu aplicativo que está em execução pressionando Ctrl+C no terminal.

Próximas etapas

Você criou o aplicativo e agora ele está sendo executado localmente em seu navegador.

A seguir, você vai publicar o aplicativo nos Aplicativos Web Estáticos do Azure.