Este es un proyecto 3 en 1:
Bpmtech.no - contador BPM en tiempo real gratuito para DJ para DJ
(Haga clic para ver en 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 en su navegador.
Para implementar este proyecto en Azure, debe desembolsar este repositorio a su propia cuenta de GitHub. También necesitará una suscripción de Azure. Si no lo tiene, puede obtener la suscripción de Azure aquí de forma gratuita con $ 200.
Tenga en cuenta que el servicio de aplicaciones web estáticas de Azure tiene un nivel gratuito generoso que es suficiente para muchos tipos de proyectos personales.
Después de tener el repositorio en su cuenta de GitHub y a la suscripción de Azure lista, use una extensión de aplicaciones web estáticas de Azure para el código Visual Studio o el portal de Azure para crear un recurso SWA.
- o - 
Use los siguientes parámetros:
Qué pasará:
.github/workflows de su repositorio. Similar al del repositorio original.Ahora está listo para explorar las funciones de aplicaciones web de Azure Static.
main (o la rama que especificó durante la creación de recursos).
Tenga en cuenta que esta es una aplicación impulsada por el trabajador de servicio, por lo que verá el aviso para recargar la página.
Puede revisar las solicitudes de extracción en el entorno de preproducción antes de que se fusionen con la rama principal.
git checkout -b new-featureHaga cualquier cambio de código en la aplicación. Algo que será claramente visible en la primera página, por ejemplo, cambiar el color de fondo.
git add .
git commit -m " New feature "
git push origin new-featureVaya a su página de repositorio de GitHub y cree una nueva solicitud de extracción de la rama.
Vaya a la página de acciones de su repositorio para asegurarse de que el flujo de trabajo se esté ejecutando.
Al finalizar, tendrá una nueva versión del sitio web implementado en Azure a una nueva URL. Puede obtener esta URL de la salida del flujo de trabajo en Azure o en el portal de Azure en la pestaña de entornos. GitHub Actions Bot también publicará esta URL en sus comentarios de solicitud de extracción.
Ahora, puede ejecutar varias pruebas en su nueva versión.
Si la nueva versión se ve bien y fusiona esta solicitud de extracción a la rama principal (rastreada por SWA), el flujo de trabajo implementará automáticamente la nueva versión en esta rama rastreada y eliminará el entorno de preparación.
Tenga en cuenta que las versiones organizadas de su aplicación son actualmente accesibles públicamente por su URL, incluso si su repositorio de GitHub es privado.
? Documentación
Puede usar las funciones de Azure para crear su propia API para su aplicación web estática. La opción más simple es usar la opción de funciones administradas: todas las funciones de Azure que cree en el directorio api se implementarán automáticamente en el SWA. En este proyecto, utilizamos la función feedback para recopilar estadísticas sobre los BPM correctos o incorrectos detectados.
Para probarlo incluso sin que la música se repita, puede pasar un valor de BPM "codificado" a la aplicación: utilizando el parámetro BPM. Cómo probarlo:
https://bpmtech.no/api/feedback endpoint y su respuesta.Cómo crear una nueva función API:
? Documentación
Azure SWA admite un enrutamiento personalizado que le permite:
Configura las reglas en staticwebapp.config.json que puede colocar en cualquier lugar de la carpeta de aplicación del repositorio, no hay requisito para ponerlo en la carpeta de salida (pública)).
Cómo probarlo:
Tenga en cuenta que la aplicación alojada es controlada por un trabajador de servicio. Entonces, después de la primera carga, el enrutamiento puede parecer exactamente como se explica anteriormente. Para probar la aplicación sin un trabajador de servicio, inicie una nueva sesión de navegador en modo privado/de incógnito.
? Documentación
Con la ayuda de aplicaciones web estáticas de Azure, puede proteger los recursos de su aplicación con el control de acceso basado en roles (RBAC).
Configuración de la autenticación:
anonymous (para todos los usuarios) y authenticated (para aquellos que están conectados)..auth en su proyecto Azure SWA está incorporado, es la llamada carpeta del sistema que contiene algunos puntos finales útiles.administrator ), utiliza la pestaña "Managemento de roles" en el portal de Azure. Haga clic en el botón "Invitar", complete el formulario y haga clic en "Generar". Recibirá un enlace para enviar al usuario para aceptar el rol. 
Puede administrar los usuarios y los roles en la pestaña "Gestión de roles".
x-ms-client-principal en la solicitud.Manifestación:
authenticated por esta regla. Será redirigido a la página de inicio de sesión de Twitter y solicitará su consentimiento.administrator de roles como se describió anteriormente.? Documentación
En el directorio del proyecto, puede ejecutar:
npm run start Ejecuta la aplicación en el modo de desarrollo.
Abra http: // localhost: 3000 para verlo en el navegador.
La página se volverá a cargar si realiza ediciones.
También verá errores de linta en la consola.
El trabajador de servicios no está en uso en el entorno de desarrollo.
npm run build Construye la aplicación para la producción a la carpeta build .
Se reacciona correctamente en modo de producción y optimiza la compilación para el mejor rendimiento.
La construcción se minifica y los nombres de archivo incluyen los hashes.
¡Su aplicación está lista para ser implementada!
También se generará el trabajador de servicio listo para la producción.
Maxim Salnikov. No dude en contactarme si tiene alguna pregunta sobre el proyecto, PWA, Azure Static Web Apps.
