Use AI for Free with GitHub Models and TypeScript! 💸💸💸
Learn how to use AI for free with GitHub Models! Test models like GPT-4o without paying for APIs or setting up infrastructure. This step-by-step guide shows how to integrate GitHub Models with TypeScript in the Microblog AI Remix project. Start exploring AI for free today!Unlocking the Power of Azure Container Apps in 1 Minute Video
Azure Container Apps provides a seamless way to build, deploy, and scale cloud-native applications without the complexity of managing infrastructure. Whether you’re developing microservices, APIs, or AI-powered applications, this fully managed service enables you to focus on writing code while Azure handles scalability, networking, and deployments. In this blog post, we explore five essential aspects of Azure Container Apps—each highlighted in a one-minute video. From intelligent applications and secure networking to effortless deployments and rollbacks, these insights will help you maximize the capabilities of serverless containers on Azure. Azure Container Apps - in 1 Minute Azure Container Apps is a fully managed platform designed for cloud-native applications, providing effortless deployment and scaling. It eliminates infrastructure complexity, letting developers focus on writing code while Azure automatically handles scaling based on demand. Whether running APIs, event-driven applications, or microservices, Azure Container Apps ensures high performance and flexibility with minimal operational overhead. Watch the video on YouTube Intelligent Apps with Azure Container Apps – in 1 Minute Azure Container Apps, Azure OpenAI, and Azure AI Search make it possible to build intelligent applications with Retrieval-Augmented Generation (RAG). Your app can call Azure OpenAI in real-time to generate and interpret data, while Azure AI Search retrieves relevant information, enhancing responses with up-to-date context. For advanced scenarios, AI models can execute live code via Azure Container Apps, and GPU-powered instances support fine-tuning and inferencing at scale. This seamless integration enables AI-driven applications to deliver dynamic, context-aware functionality with ease. Watch the video on YouTube Networking for Azure Container Apps: VNETs, Security Simplified – in 1 Minute Azure Container Apps provides built-in networking features, including support for Virtual Networks (VNETs) to control service-to-service communication. Secure internal traffic while exposing public endpoints with custom domain names and free certificates. Fine-tuned ingress and egress controls ensure that only the right traffic gets through, maintaining a balance between security and accessibility. Service discovery is automatic, making inter-app communication seamless within your Azure Container Apps environment. Watch the video on YouTube Azure Continuous Deployment and Observability with Azure Container Apps - in 1 Minute Azure Container Apps simplifies continuous deployment with built-in integrations for GitHub Actions and Azure DevOps pipelines. Every code change triggers a revision, ensuring smooth rollouts with zero downtime. Observability is fully integrated via Azure Monitor, Log Streaming, and the Container Console, allowing you to track performance, debug live issues, and maintain real-time visibility into your app’s health—all without interrupting operations. Watch the video on YouTube Effortless Rollbacks and Deployments with Azure Container Apps – in 1 Minute With Azure Container Apps, every deployment creates a new revision, allowing multiple versions to run simultaneously. This enables safe, real-time testing of updates without disrupting production. Rolling back is instant—just select a previous revision and restore your app effortlessly. This powerful revision control system ensures that deployments remain flexible, reliable, and low-risk. Watch the video on YouTube Watch the Full Playlist For a complete overview of Azure Container Apps capabilities, watch the full JavaScript on Azure Container Apps YouTube Playlist Create Your Own AI-Powered Video Content Inspired by these short-form technical videos? You can create your own AI-generated videos using Azure AI to automate scriptwriting and voiceovers. Whether you’re a content creator, or business looking to showcase technical concepts, Azure AI makes it easy to generate professional-looking explainer content. Learn how to create engaging short videos with Azure AI by following our open-source AI Video Playbook. Conclusion Azure Container Apps is designed to simplify modern application development by providing a fully managed, serverless container environment. Whether you need to scale microservices, integrate AI capabilities, enhance security with VNETs, or streamline CI/CD workflows, Azure Container Apps offers a comprehensive solution. By leveraging its built-in features such as automatic scaling, revision-based rollbacks, and deep observability, developers can deploy and manage applications with confidence. These one-minute videos provide a quick technical overview of how Azure Container Apps empowers you to build scalable, resilient applications with ease. FREE Content Check out our other FREE content to learn more about Azure services and Generative AI: Generative AI for Beginners - A JavaScript Adventure! Learn more about Azure AI Agent Service LlamaIndex on Azure JavaScript on Azure Container Apps JavaScript at MicrosoftAdd speech input & output to your app with the free browser APIs
One of the amazing benefits of modern machine learning is that computers can reliably turn text into speech, or transcribe speech into text, across multiple languages and accents. We can then use those capabilities to make our web apps more accessible for anyone who has a situational, temporary, or chronic issue that makes typing difficult. That describes so many people - for example, a parent holding a squirmy toddler in their hands, an athlete with a broken arm, or an individual with Parkinson's disease. There are two approaches we can use to add speech capabilities to our apps: Use the built-in browser APIs: the SpeechRecognition API and SpeechSynthesis API. Use a cloud-based service, like the Azure Speech API. Which one to use? The great thing about the browser APIs is that they're free and available in most modern browsers and operating systems. The drawback of the APIs is that they're often not as powerful and flexible as cloud-based services, and the speech output often sounds more robotic. There are also a few niche browser/OS combos where the built-in APIs don't work. That's why we decided to add both options to our most popular RAG chat solution, to give developers the option to decide for themselves. However, in this post, I'm going to show you how to add speech capabilities using the free built-in browser APIs, since free APIs are often easier to get started with and it's important to do what we can to improve the accessibility of our apps. The GIF below shows the end result, a chat app with both speech input and output buttons: All of the code described in this post is part of openai-chat-vision-quickstart, so you can grab the full code yourself after seeing how it works. Speech input with SpeechRecognition API To make it easier to add a speech input button to any app, I'm wrapping the functionality inside a custom HTML element, SpeechInputButton . First I construct the speech input button element with an instance of the SpeechRecognition API, making sure to use the browser's preferred language if any are set: class SpeechInputButton extends HTMLElement { constructor() { super(); this.isRecording = false; const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (!SpeechRecognition) { this.dispatchEvent( new CustomEvent("speecherror", { detail: { error: "SpeechRecognition not supported" }, }) ); return; } this.speechRecognition = new SpeechRecognition(); this.speechRecognition.lang = navigator.language || navigator.userLanguage; this.speechRecognition.interimResults = false; this.speechRecognition.continuous = true; this.speechRecognition.maxAlternatives = 1; } Then I define the connectedCallback() method that will be called whenever this custom element has been added to the DOM. When that happens, I define the inner HTML to render a button and attach event listeners for both mouse and keyboard events. Since we want this to be fully accessible, keyboard support is important. connectedCallback() { this.innerHTML = ` <button class="btn btn-outline-secondary" type="button" title="Start recording (Shift + Space)"> <i class="bi bi-mic"></i> </button>`; this.recordButton = this.querySelector('button'); this.recordButton.addEventListener('click', () => this.toggleRecording()); document.addEventListener('keydown', this.handleKeydown.bind(this)); } handleKeydown(event) { if (event.key === 'Escape') { this.abortRecording(); } else if (event.key === ' ' && event.shiftKey) { // Shift + Space event.preventDefault(); this.toggleRecording(); } } toggleRecording() { if (this.isRecording) { this.stopRecording(); } else { this.startRecording(); } } The majority of the code is in the startRecording function. It sets up a listener for the "result" event from the SpeechRecognition instance, which contains the transcribed text. It also sets up a listener for the "end" event, which is triggered either automatically after a few seconds of silence (in some browsers) or when the user ends the recording by clicking the button. Finally, it sets up a listener for any "error" events. Once all listeners are ready, it calls start() on the SpeechRecognition instance and styles the button to be in an active state. startRecording() { if (this.speechRecognition == null) { this.dispatchEvent( new CustomEvent("speech-input-error", { detail: { error: "SpeechRecognition not supported" }, }) ); } this.speechRecognition.onresult = (event) => { let input = ""; for (const result of event.results) { input += result[0].transcript; } this.dispatchEvent( new CustomEvent("speech-input-result", { detail: { transcript: input }, }) ); }; this.speechRecognition.onend = () => { this.isRecording = false; this.renderButtonOff(); this.dispatchEvent(new Event("speech-input-end")); }; this.speechRecognition.onerror = (event) => { if (this.speechRecognition) { this.speechRecognition.stop(); if (event.error == "no-speech") { this.dispatchEvent( new CustomEvent("speech-input-error", { detail: {error: "No speech was detected. Please check your system audio settings and try again."}, })); } else if (event.error == "language-not-supported") { this.dispatchEvent( new CustomEvent("speech-input-error", { detail: {error: "The selected language is not supported. Please try a different language.", }})); } else if (event.error != "aborted") { this.dispatchEvent( new CustomEvent("speech-input-error", { detail: {error: "An error occurred while recording. Please try again: " + event.error}, })); } } }; this.speechRecognition.start(); this.isRecording = true; this.renderButtonOn(); } If the user stops the recording using the keyboard shortcut or button click, we call stop() on the SpeechRecognition instance. At that point, anything the user had said will be transcribed and become available via the "result" event. stopRecording() { if (this.speechRecognition) { this.speechRecognition.stop(); } } Alternatively, if the user presses the Escape keyboard shortcut, we instead call abort() on the SpeechRecognition instance, which stops the recording and does not send any previously untranscribed speech over. abortRecording() { if (this.speechRecognition) { this.speechRecognition.abort(); } } Once the custom HTML element is fully defined, we register it with the desired tag name, speech-input-button : customElements.define("speech-input-button", SpeechInputButton); To use the custom speech-input-button element in a chat application, we add it to the HTML for the chat form: <speech-input-button></speech-input-button> <input id="message" name="message" type="text" rows="1"></input> Then we attach an event listener for the custom events dispatched by the element, and we update the input text field with the transcribed text: const speechInputButton = document.querySelector("speech-input-button"); speechInputButton.addEventListener("speech-input-result", (event) => { messageInput.value += " " + event.detail.transcript.trim(); messageInput.focus(); }); You can see the full custom HTML element code in speech-input.js and the usage in index.html. There's also a fun pulsing animation for the button's active state in styles.css. Speech output with SpeechSynthesis API Once again, to make it easier to add a speech output button to any app, I'm wrapping the functionality inside a custom HTML element, SpeechOutputButton . When defining the custom element, we specify an observed attribute named "text", to store whatever text should be turned into speech when the button is clicked. class SpeechOutputButton extends HTMLElement { static observedAttributes = ["text"]; In the constructor, we check to make sure the SpeechSynthesis API is supported, and remember the browser's preferred language for later use. constructor() { super(); this.isPlaying = false; const SpeechSynthesis = window.speechSynthesis || window.webkitSpeechSynthesis; if (!SpeechSynthesis) { this.dispatchEvent( new CustomEvent("speech-output-error", { detail: { error: "SpeechSynthesis not supported" } })); return; } this.synth = SpeechSynthesis; this.lngCode = navigator.language || navigator.userLanguage; } When the custom element is added to the DOM, I define the inner HTML to render a button and attach mouse and keyboard event listeners: connectedCallback() { this.innerHTML = ` <button class="btn btn-outline-secondary" type="button"> <i class="bi bi-volume-up"></i> </button>`; this.speechButton = this.querySelector("button"); this.speechButton.addEventListener("click", () => this.toggleSpeechOutput() ); document.addEventListener('keydown', this.handleKeydown.bind(this)); } The majority of the code is in the toggleSpeechOutput function. If the speech is not yet playing, it creates a new SpeechSynthesisUtterance instance, passes it the "text" attribute, and sets the language and audio properties. It attempts to use a voice that's optimal for the desired language, but falls back to "en-US" if none is found. It attaches event listeners for the start and end events, which will change the button's style to look either active or unactive. Finally, it tells the SpeechSynthesis API to speak the utterance. toggleSpeechOutput() { if (!this.isConnected) { return; } const text = this.getAttribute("text"); if (this.synth != null) { if (this.isPlaying || text === "") { this.stopSpeech(); return; } // Create a new utterance and play it. const utterance = new SpeechSynthesisUtterance(text); utterance.lang = this.lngCode; utterance.volume = 1; utterance.rate = 1; utterance.pitch = 1; let voice = this.synth .getVoices() .filter((voice) => voice.lang === this.lngCode)[0]; if (!voice) { voice = this.synth .getVoices() .filter((voice) => voice.lang === "en-US")[0]; } utterance.voice = voice; if (!utterance) { return; } utterance.onstart = () => { this.isPlaying = true; this.renderButtonOn(); }; utterance.onend = () => { this.isPlaying = false; this.renderButtonOff(); }; this.synth.speak(utterance); } } When the user no longer wants to hear the speech output, indicated either via another press of the button or by pressing the Escape key, we call cancel() from the SpeechSynthesis API. stopSpeech() { if (this.synth) { this.synth.cancel(); this.isPlaying = false; this.renderButtonOff(); } } Once the custom HTML element is fully defined, we register it with the desired tag name, speech-output-button : customElements.define("speech-output-button", SpeechOutputButton); To use this custom speech-output-button element in a chat application, we construct it dynamically each time that we've received a full response from an LLM, and call setAttribute to pass in the text to be spoken: const speechOutput = document.createElement("speech-output-button"); speechOutput.setAttribute("text", answer); messageDiv.appendChild(speechOutput); You can see the full custom HTML element code in speech-output.js and the usage in index.html. This button also uses the same pulsing animation for the active state, defined in styles.css. Acknowledgments I want to give a huge shout-out to John Aziz for his amazing work adding speech input and output to the azure-search-openai-demo, as that was the basis for the code I shared in this blog post.This Month in Azure Static Web Apps | 10/2024
We’re back with another edition of the Azure Static Web Apps Community! 🎉 October was a month full of incredible contributions from the Technical Community! 🚀 If you’d like to learn more about Azure Static Web Apps, we have: 🔹 Tutorials 🔹 Videos 🔹 Sample Code 🔹 Official Documentation 🔹 And much more! Want to be featured here next month but don’t know how? Keep reading and find out how to participate at the end of this article! 😉 🤝Special Thanks A big thank you to everyone who contributed amazing content to the community! You are the reason this community is so special! ❤️ Let’s dive into this month’s highlights! 🌟Community Content Highlights – October 2024 Below are the key contributions created by the community this month. Video: Azure Data API Builder Community Standup - Static Web Apps Date: October 2, 2024 Author: Microsoft Azure Developers Link: Azure Data API Builder Community Standup - Static Web Apps The Azure Data API Builder Community Standup showcased how Azure Static Web Apps simplifies the development and deployment of static applications integrated with databases on Azure. The session explored connecting front-end apps to databases like Cosmos DB, Azure SQL, MySQL, and PostgreSQL using REST or GraphQL endpoints provided by the Data API Builder. The integration with Azure Static Web Apps offers a managed experience for the Data API Builder, eliminating container management and ensuring a simple and efficient setup. Highlights included automatic database connection initialization via the swad db init command and configuration files to define schemas and access permissions. The Database Connections feature, currently in preview, was showcased as an ideal solution for use cases requiring quick API creation. This service is perfect for building proof-of-concept projects swiftly and scalably, with continuous deployment using GitHub or Azure DevOps repositories. Additionally, Azure Static Web Apps were highlighted for hosting front-end resources like React and Blazor, combining data APIs and user interfaces in an optimized developer environment. The session also included a practical example of creating a CRUD application connected to Cosmos DB, demonstrating how Azure Static Web Apps streamline the rapid and secure implementation of modern projects. Explore more about Azure Static Web Apps capabilities and best practices in the full content. Article: Hugo Deployed to Azure Static Web Apps Date: October 14, 2024 Author: CyberWatchDoug Link: Hugo Deployed to Azure Static Web Apps The article "Hugo Deployed to Azure Static Web Apps" details the process of deploying Hugo-built websites on Azure Static Web Apps (SWA), emphasizing the simplicity and flexibility provided by integration with GitHub Actions. The publication provides a step-by-step guide for setting up a static application in Azure, including GitHub authentication, repository selection, and configuring specific presets for Hugo. Additionally, the article addresses common questions about Hugo's version and explains how to customize the GitHub Actions workflow file to define environment variables like PLATFORM_NAME and HUGO_VERSION, ensuring proper build execution. Azure SWA's integration is highlighted as an efficient solution for managing automated deployments, while tools like Oryx are suggested for additional build process control. The article also explores the potential for infrastructure customization to meet specific needs. With clear and practical guidelines, the article serves as an excellent introduction to using Azure Static Web Apps for developers interested in deploying Hugo sites quickly and efficiently. Article: Implementing CI/CD for Azure Static Web Apps with GitHub Actions Date: October 22, 2024 Author: Syncfusion Link: Implementing CI/CD for Azure Static Web Apps with GitHub Actions The article Implementing CI/CD for Azure Static Web Apps with GitHub Actions offers a comprehensive guide for setting up continuous integration and continuous deployment (CI/CD) pipelines with Azure Static Web Apps. It highlights how the native integration with GitHub simplifies automatic deployments, allowing changes to be published as soon as code is pushed to the repository. The benefits presented include integrated support for popular frameworks like React, Angular, and Vue.js, along with features such as custom domains, automatic SSL certificates, and global content delivery. The article details the setup steps, from creating the resource in the Azure portal to generating automated workflows in GitHub Actions. Best practices are explored, such as using Azure Key Vault for credential security and caching to optimize build and deployment times. Monitoring deployments is addressed with native Azure tools and integrations with Slack or Microsoft Teams for real-time notifications. The article emphasizes the cost-effectiveness of Azure Static Web Apps, especially for small projects or startups, thanks to its free tier that includes essential features. Check out the full content to understand how to apply these practices to your workflow and take advantage of this managed solution. Article: Deploying your portal with Azure Static Web Apps Date: October 24, 2024 Author: Qlik Talend Help home Link: Deploying your portal with Azure Static Web Apps This article provides a step-by-step guide to implementing a portal using Azure Static Web Apps by connecting a GitHub repository to the service for automated deployment. The process includes creating a Static Web App in Azure, configuring repositories and branches in GitHub, and using GitHub Actions for build and deployment automation. The integration with GitHub simplifies the development workflow and supports build tools like Hugo to generate static sites. Additionally, it mentions the automatically generated URL in Azure to access the portal after publication. Check out the full material to understand how Azure Static Web Apps facilitates creating and publishing static applications. Video: A Beginner’s Guide to Azure Static Web Apps Free Hosting for Blazor, React, Angular, Vue, & more! Date: October 21, 2024 Author: CliffTech Link: A Beginner’s Guide to Azure Static Web Apps Free Hosting for Blazor, React, Angular, Vue, & more! This video demonstrates a step-by-step process for hosting a React application using Azure Static Web Apps, highlighting the benefits of this platform for front-end developers. It explores the differences between Azure Static Web Apps and Azure App Service, explaining that the former is ideal for static applications and provides features like automated CI/CD pipelines and GitHub integration for continuous deployment. The tutorial covers creating a Resource Group in the Azure portal, configuring the Azure Static Web Apps service, and selecting source code directly from GitHub. The automated pipelines functionality is highlighted, ensuring that any update to the main branch code is automatically published to the production environment. Additionally, the video explains how to customize the deployment, adjust output folders in the project's build, and add custom domains to personalize the application's URL. The platform is praised for its simplicity and agility, recommended for personal projects, hobbies, or even production, depending on the application's demands. Watch the video for detailed instructions and learn how this solution simplifies deploying modern applications with frameworks like React, Angular, Vue, and Next.js. Article: Configure File in Azure Static Web Apps Date: October 31, 2024 Author: TechCommunity Link: Configure File in Azure Static Web Apps The article Configure File in Azure Static Web Apps explains how to customize settings in the Azure Static Web Apps service through the staticwebapp.config.json file. It covers different configuration scenarios depending on the type of application: no framework, pre-compiled frameworks (like MkDocs), and frameworks built during the deployment process (like React). Practical examples, such as customizing the Access-Control-Allow-Origin header, are provided, detailing where to place the configuration file and how to adjust CI/CD workflows, whether using GitHub Actions or Azure DevOps. The article also highlights best practices for integrating environment variables and handling dynamic build directories, ensuring that configurations are correctly applied. This is an essential guide for developers looking to customize their applications on Azure Static Web Apps and optimize the deployment process with modern frameworks. Explore the full article to learn more. Video: User Group App - Day 2: Deploy to Static Web Apps Date: October 30, 2024 Author: The Dev Talk Show Link: User Group App - Day 2: Deploy to Static Web Apps This video provides a step-by-step guide to deploying an application on Azure Static Web Apps in an automated way. During the demonstration, the presenters explore different approaches to configure and manage the service, highlighting tools like Azure CLI and Azure Developer CLI to simplify the resource creation and deployment process. They also discuss best automation practices, such as generating reusable scripts and integrating with CI/CD pipelines via GitHub Actions. The concept of "automate everything" is emphasized as an essential strategy to ensure consistency and efficiency in projects. Furthermore, challenges and necessary configurations for linking GitHub repositories to the service are addressed, making the deployment of new versions faster and more integrated. Watch the full video to learn how to structure and automate the deployment of applications using Azure Static Web Apps. Documentation: Static React Web App + Functions with C# API and SQL Database on Azure Date: October 10, 2024 Author: Microsoft Learn Link: Static React Web App + Functions with C# API and SQL Database on Azure This guide outlines how to create and deploy a static application using Azure Static Web Apps, with a React-based front-end and an Azure Functions back-end using a C# API and Azure SQL Database. The architecture highlights integration with complementary services like Azure Monitor for monitoring and Azure Key Vault for credential security. The guide includes a template for quick customization and configuration using the Azure Developer CLI (azd), making provisioning and deployment straightforward with commands like azd up. Security features such as managed identities and advanced options like integration with Azure API Management (APIM) for backend protection are also covered. Additionally, the guide explores how to set up CI/CD pipelines, perform active monitoring, and debug locally, showcasing the flexibility and potential of Azure Static Web Apps as a practical and scalable solution for modern applications. Article: Simple Steps to Deploy Angular Application on Azure Service Date: October 16, 2024 Author: Codewave Link: Simple Steps to Deploy Angular Application on Azure Service This article provides a detailed guide for deploying Angular applications using Azure Static Web Apps, from prerequisites to launching the application in production. It highlights how this Azure service simplifies the deployment process, offering GitHub integration, pipeline automation, and scalable infrastructure. Initially, the article covers the basics of starting the project, such as creating a GitHub repository and setting up the Angular application using Angular CLI and Node.js. From there, it explores creating a Static Web App resource in the Azure portal, where integration with the GitHub repository is directly configured. This integration automates the entire build and deployment process, ensuring agility and precision. Key highlights include the simplicity of Azure's Angular presets, optimizing configuration steps like defining the application directory and output folder for final build files. The article also emphasizes that Azure Static Web Apps provides benefits like global infrastructure to minimize latency, advanced security measures to protect application data, and high reliability in content delivery. Finally, the deployment process is described as efficient and straightforward, with the application being published within minutes. The Azure-generated URL ensures global accessibility and optimized performance for users. The article not only presents the technical steps for using Azure Static Web Apps but also highlights its ability to improve the developer experience and provide scalable solutions for Angular applications. Explore the full content to understand each step and make the most of this powerful Azure tool. Article: End-to-End Full-Stack Web Application with Azure AD B2C Authentication: A Complete Guide Date: October 21, 2024 Author: TechCommunity Link: End-to-End Full-Stack Web Application with Azure AD B2C Authentication: A Complete Guide This article guides the creation of a full-stack application using Azure Static Web Apps to host a React-developed front-end integrated with Azure AD B2C for authentication and authorization. The service is highlighted for its automated deployment via GitHub Actions, enabling CI/CD pipeline configuration to manage front-end builds and publishing directly on the platform. The article explores setting up Azure Static Web Apps-specific environment variables, such as redirect URLs and authentication scopes, to ensure efficient backend integration. It also covers how Azure Static Web Apps connects with complementary services like Azure Web Apps for the backend and Azure SQL Database, forming a modern, scalable architecture. The documentation emphasizes using tools like MSAL to handle login flows on the front end and highlights the simplicity of Azure Static Web Apps in supporting modern and secure applications. For more details on implementation and configuration, check out the full article. Article: Case Study: E-Commerce App Deployment Using Azure AKS Date: October 24, 2024 Author: Shubham Gupta Link: Case Study: E-Commerce App Deployment Using Azure AKS This case study explores using Azure Static Web Apps to host the front-end of a microservices-based e-commerce application, highlighting its integration with Azure Kubernetes Service (AKS). The article demonstrates how the service facilitates connecting backend APIs hosted on AKS using custom domains configured via Ingress and Nginx. The ReactJS front-end is deployed on Azure Static Web Apps, leveraging its simplicity in configuration and built-in API support. API calls using fetch() to consume backend services are showcased, emphasizing how the service enables a seamless interaction between front-end and backend components. Additionally, the article discusses best practices for testing and validating the integration between the front-end and microservices, ensuring performance and accessibility. This case study reinforces Azure Static Web Apps as an efficient choice for modern applications utilizing microservices architecture. Article: Getting Started with Azure Blob Storage: A Step-by-Step Guide to Static Web Hosting Date: October 22, 2024 Author: ADEX Link: Getting Started with Azure Blob Storage: A Step-by-Step Guide to Static Web Hosting This article explores using Azure Blob Storage to host static websites, offering an alternative to Azure Static Web Apps for specific scenarios. It provides a step-by-step configuration guide, from creating a storage account to enabling the static website functionality. The content also compares the advantages and limitations of each service, emphasizing that while Azure Blob Storage is efficient for simple static sites, Azure Static Web Apps offers more robust features such as native integration with GitHub and Azure DevOps, support for serverless APIs with Azure Functions, and optimized configurations for modern development. The article serves as a guide to understanding when to use Azure Blob Storage versus Azure Static Web Apps, considering the type of application, scalability needs, and available features. Explore the full article to discover which solution best fits your projects. Article: Canonical URL Troubleshooting - Managing Canonical URLs in Static Web Apps for SEO Optimization Date: October 12, 2024 Author: Mark Hazleton Link: Canonical URL Troubleshooting - Managing Canonical URLs in Static Web Apps for SEO Optimization This article addresses the complexities of managing canonical URLs in Azure Static Web Apps to optimize the SEO of static sites. It explores common issues, such as URL variations (/projectmechanics, /projectmechanics/, /projectmechanics/index.html), which can lead to penalties for duplicate content in search engines. The author details solutions, including using canonical tags in page headers and configuring redirects in the staticwebapp.config.json file. While these approaches mitigate some challenges, they don’t fully resolve the presented issues. The most effective solution involved integrating Azure Static Web Apps with Cloudflare Page Rules, leveraging Cloudflare's redirection capabilities to configure permanent (301) redirects and consolidate canonical URLs. This combination ensured efficient URL management, eliminating conflicts and enhancing user and search engine experiences. This article is a must-read for developers seeking to strengthen SEO in static projects and learn how to integrate complementary solutions like Cloudflare with Azure Static Web Apps. Check out the full article for a detailed guide and useful configuration links. Article: 1.4b Deploy application with Azure App Service Part 2 Date: October 9, 2024 Author: Cloud Native Link: 1.4b Deploy application with Azure App Service Part 2 This article details the process of deploying applications using Azure App Service, covering both backend and frontend components, with a focus on ensuring seamless communication between them. While the main highlight is using the Maven Azure Web App Plugin for Java applications, the content is also relevant for developers interested in integration with Azure Static Web Apps. Highlights include: Preparation and Configuration: How to prepare applications for deployment by creating packages (WAR and ZIP) and properly configuring the pom.xml for Maven. Backend Deployment: Using Maven to create and/or update the App Service automatically. Frontend Deployment: Configuring and deploying a ReactJS application, emphasizing using Azure CLI commands to manage services, set up startup files, and restart the app to apply changes. Verification and Testing: Guidelines to ensure deployed services work as expected and to debug issues like browser caching. Resource Cleanup: Instructions on removing resources to avoid unnecessary costs after testing. The article offers valuable insights into using Azure Static Web Apps for integrated application front-ends, mentioning the importance of features like authentication and serverless API support for modern applications. Developers can explore the synergy between Azure App Service and Azure Static Web Apps to maximize project efficiency. For more details, read the full article and explore the links to additional documentation. Conclusion October was an inspiring month, full of incredible contributions from the technical community about Azure Static Web Apps! 💙 We’d like to thank all the authors and content creators who dedicated their time to sharing their knowledge, helping to strengthen this amazing community. Every article, video, and project enriches learning and promotes the adoption of this powerful technology. If you want to learn more, check out the official documentation, explore the tutorials, and join the technical community transforming the development of static applications. 🚀 How to Participate or See Your Content Featured? Create something amazing (article, video, or project) about Azure Static Web Apps. Share it on social media with the hashtag #AzureStaticWebApps. Publish it in the official repository on GitHub and participate in the monthly discussions. If you enjoyed this article, share it with your network so more people can benefit from this content! Use the share buttons or copy the link directly. Your participation helps promote knowledge and strengthens our technical community. Let’s build a more connected and collaborative ecosystem together! 💻✨ See you in the next edition, and keep exploring the potential of Azure Static Web Apps! 👋Building Safer AI Applications: A Practical Approach
Building AI-powered applications requires careful attention to responsible development practices. This blog shares our experience implementing AI safety measures while developing a hotel search application with Microsoft Azure services, highlighting practical approaches for developers.Hack Together: RAG Hack - Building RAG Applications with LangChain.js
In the rapidly evolving landscape of Artificial Intelligence and Natural Language Processing, the use of Retrieval Augmented Generation (RAG) has emerged as a powerful solution to enhance the accuracy and relevance of responses generated by language models. In this article, we will explore the talk given during the Hack Together: RAG Hack event, where Glaucia Lemos, a Cloud Advocate at Microsoft, and Yohan Lasorsa, a Senior Cloud Advocate at Microsoft, demonstrated how LangChain.js is revolutionizing the development of RAG applications, making it easier to create intelligent applications that combine large language models (LLMs) with your own data sources.
