Este é um projeto 3 em 1:
BPMTECH.NO - Contador de BPM on -line em tempo real gratuito para DJ
(Clique para assistir no YouTube)
git clone https://github.com/webmaxru/bpm-counter.git
cd bpm-counter
npm install
# Installing tools for Static Web Apps and Azure Functions
npm install -g @azure/static-web-apps-cli
npm install -g azure-functions-core-tools@3 --unsafe-perm true # Instead of CRA's "npm start" we use SWA CLI's command to start everything at once
swa start http://localhost:3000 --run " npm start " --api-location ./apiAbra http: // localhost: 4280 no seu navegador.
Para implantar este projeto no Azure, você precisa gastar este repositório para sua própria conta do GitHub. Você também precisará de uma assinatura do Azure. Se você não tiver, poderá obter assinatura do Azure aqui gratuitamente com crédito de US $ 200.
Observe que o serviço de aplicativos da web do Azure Static possui um nível gratuito generoso, o que é suficiente para muitos tipos de projetos pessoais.
Depois de ter o repositório em sua conta do GitHub e a assinatura do Azure pronta, use uma extensão de aplicativos da Web estática do Azure para código do Visual Studio ou portal do Azure para criar um recurso SWA.
- ou - 
Use os seguintes parâmetros:
O que vai acontecer:
.github/workflows do seu repositório. Semelhante ao do repo original.Agora você está pronto para explorar os recursos do Azure Static Web Apps.
main (ou na ramificação que você especificou durante a criação de recursos).
Observe que este é um aplicativo orientado para trabalhadores de serviço, para que você verá o prompt para recarregar a página.
Você pode revisar solicitações de tração no ambiente de pré-produção antes de serem mescladas na filial principal.
git checkout -b new-featureFaça qualquer alteração de código no aplicativo. Algo que será claramente visível na primeira página, por exemplo, altere a cor do plano de fundo.
git add .
git commit -m " New feature "
git push origin new-featureVá para sua página do Repo Github e crie uma nova solicitação de tração na filial.
Vá para as ações da página do seu repositório para garantir que o fluxo de trabalho esteja em execução.
Após a conclusão, você terá uma nova versão do site implantada no Azure em um novo URL. Você pode obter este URL da saída do fluxo de trabalho no Azure ou na guia Portal do Azure on Ambientes. O Github Actions Bot também publicará este URL nos comentários de solicitação de tração.
Agora, você pode executar vários testes em sua nova versão.
Se a nova versão parecer boa e você mesclar essa solicitação de puxar para a ramificação principal (rastreada pela SWA), o fluxo de trabalho implantará automaticamente a nova versão para esta ramificação rastreada e excluirá o ambiente de estadiamento.
Observe que as versões encenadas do seu aplicativo estão atualmente acessíveis publicamente pelo URL deles, mesmo que o repositório do seu GitHub seja privado.
? Documentação
Você pode usar as funções do Azure para criar sua própria API para o seu aplicativo estático. A opção mais simples é usar a opção de funções gerenciadas: todas as funções do Azure que você criar no diretório api serão implantadas automaticamente no SWA. Neste projeto, usamos a função feedback para reunir estatísticas sobre os BPMs corretos ou errados detectados.
Para testá -lo, mesmo sem a reprodução da música, você pode passar um valor BPM "codificado" para o aplicativo: usando o parâmetro BPM. Como testá -lo:
https://bpmtech.no/api/feedback endpoint e sua resposta.Como criar uma nova função da API:
? Documentação
O Azure SWA suporta roteamento personalizado que permite::
Você configura as regras em staticwebapp.config.json que você pode colocar em qualquer lugar na pasta de aplicativos do repo, não há necessidade de colocá -lo na pasta de saída (pública)).
Como testá -lo:
Observe que o aplicativo hospedado é controlado por um trabalhador de serviço. Portanto, após a primeira carga, o roteamento pode parecer exatamente como explicado acima. Para testar o aplicativo sem um trabalhador de serviço, inicie uma nova sessão do navegador no modo privado/incógnito.
? Documentação
Com a ajuda dos aplicativos da Web estática do Azure, você pode proteger seus recursos de aplicativo com o controle de acesso baseado em função (RBAC).
Configurando autenticação:
anonymous (para todos os usuários) e authenticated (para aqueles que estão conectados)..auth no seu projeto Azure SWA está embutida, é a chamada pasta de sistema que contém alguns pontos de extremidade úteis.administrator ), você usa a guia "Gerenciamento de função" no portal do Azure. Clique no botão "Convidar", preencha o formulário e clique em "Gerate". Você receberá um link para enviar ao usuário para aceitar a função. 
Você pode gerenciar os usuários e funções na guia "Gerenciamento de função".
x-ms-client-principal na solicitação.Demonstração:
authenticated por esta regra. Você será redirecionado para a página de login do Twitter e solicitou consentimento.administrator da função, conforme descrito acima.? Documentação
No diretório do projeto, você pode executar:
npm run start Executa o aplicativo no modo de desenvolvimento.
Abra http: // localhost: 3000 para visualizá -lo no navegador.
A página será recarregada se você fizer edições.
Você também verá erros de fiapos no console.
O trabalhador do serviço não está em uso no ambiente de desenvolvimento.
npm run build Construa o aplicativo para produção na pasta build .
Os pacotes corretamente reagem no modo de produção e otimiza a construção para obter o melhor desempenho.
A construção é minificada e os nomes de arquivos incluem os hashes.
Seu aplicativo está pronto para ser implantado!
O trabalhador de serviço pronto para produção também será gerado.
Maxim Salnikov. Sinta -se à vontade para entrar em contato comigo se tiver alguma dúvida sobre o projeto, PWA, Azure Static Web Apps.
