Exercício – Introdução

  • 3 minutos

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 a partir de modelo para o repositório de modelos. Se você receber um erro 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. Nomeie seu repositório my-static-web-app.

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

Executar o aplicativo

Você acabou de criar um repositório 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

    Se você receber um erro Não é possível encontrar PATH, verifique se Node.js foi instalado a partir de https://nodejs.org. Talvez seja necessário realizar uma configuração personalizada que inclua a instalação da opção Adicionar ao PATH.

    Captura de tela exibindo a instalação personalizada das opções de Node.js no assistente de instalação.

  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.

Captura de tela da navegação até seu aplicativo Web Angular.

Navegue até http://localhost:3000.

Captura de tela da navegação até o aplicativo Web React.

Navegue até http://localhost:5000.

Captura de tela da navegação até o aplicativo Web Svelte.

Navegue até http://localhost:8080.

Captura de tela da navegação até seu aplicativo Web Vue.

Observação

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

Agora, interrompa o aplicativo 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.