Видео

Yes, it is a full end to end project for a full stack developer.

Hi, thank you for asking. Please share the extra tables you see from your side. Let me check.

@learnsmartcoding thanks your fast answer. They are smart app and video request tables.

Thank you for sharing. I checked here github.com/learnsmartcoding/online-course-api/blob/main/LSC.OnlineCourse.Data/Database_Script/OnlineCourseDB.sql There are 13 tables and I added "VideoRequest" table after the initial database design hence you will find it in the end of the script. Hope this clarifies. Feel free to ask me if you have any other questions. Happy coding!

Hi SaiPavan, Thank you for watching the video and I hope you find it useful. You are looking for high level project architecture like the below one ? If yes, I will make a one for this Full-stack video. Going forward, I will include such info as well. github.com/learnsmartcoding/restaurant-table-booking-app.api/blob/main/RestaurantTableBookingApp.API/RestaurantTableBooking.svg Full stack video can be found here ruclips.net/video/70q8PanGbnw/видео.htmlsi=qMu4I2MjS3uUcaPg Please let me know if you need any other information. Happy coding!

​@@learnsmartcodingThank you 😊

Thank you for the kind words. You can either place the script 5 the html page you use it or keep it separate and give the link in the html. Either way, it works.hope this helps.

Yes, it should work as the configuration to build in the repo code. Just follow the steps and let me know if you face any issues.

@ it is possible could please provide GitLab cicd code for this

@ after deploying the same UI can I get right? Whatever you mentioned in the Video

@ and there is need to change in local.setting.json?

@sharukhannadagoud for azure functions, local.settings applicable only for local development. After you deploy the function app, all settings are in azure configuration.

Happy to help

Thank you for your question! When Angular and the .NET Core API are part of the same project (e.g., created with the .NET Core + Angular template), here’s what you should do to secure the application with Azure AD: App Registrations: Even though the Angular SPA and backend API share the same domain, you still need two separate app registrations in Azure AD: Frontend (Angular): For user authentication and obtaining tokens. Backend (API): To secure API endpoints by validating tokens issued by Azure AD. Redirect URLs: The Angular app will have a redirect URL like: yourdomain.com (or yourdomain.com/auth-callback if you’ve customized it). The backend app doesn’t require a redirect URL but does need API permissions and an expose an API configuration in its app registration. Backend Protection: The backend must validate tokens from the frontend. Use the Microsoft.Identity.Web library in your .NET Core project for this purpose. Configure authentication middleware to ensure only valid requests with proper tokens can access the API endpoints. MSAL Integration in Angular: Configure msal-angular to acquire tokens for the backend API by specifying the API scope exposed in Azure AD. Example Scope: yourtenant.onmicrosoft.com/backend-app-id-uri/YourAPI.Scope. By doing this, both your frontend and backend will be properly secured. Using just the SPA without securing the backend is not sufficient, as your API will remain unprotected. Let me know if you'd like more details or a step-by-step guide!

Dynamic configuration for client ID and tenant is technically possible but usually unnecessary and adds complexity unless your app must support multiple tenants dynamically. For most cases, static configuration with predefined values in environment.ts works best. Regarding backend setup: yes, you should protect your backend as well. Use msal-angular in the SPA for token acquisition and validate tokens in the backend using libraries like Microsoft.Identity.Web for .NET Core. Protecting only the SPA without securing the backend leaves the API exposed to unauthorized access.

@learnsmartcoding Okay thank you so much 🙏

Hi, it is true and i showed the details . Please check the web links in the description. Also, this is from Pearson, not from Microsoft.

@learnsmartcoding Thank you I will book the exam right now

Tried to book the exam but the visa international card did not support is there any other way to book the exam

@cserajesh may i know from which country you are trying to book?

@@learnsmartcoding india

Hi Francisco, Thank you for watching and asking questions. Are you looking for azure ad b2c or azure ad? This video is based on azure ad authentication and authorization.

@@learnsmartcoding Thanks for your reply, I'm looking for azure ad, but I cannot grant admin permissions like you in the video when clicking api permissions for the frontend app, i saw your other video and came here to check everything, maybe that could be the reasong, isn't it?

Yes, per subscription, this offer applies. Once free quota reaches, either you can pause or set as pay and continue. It is good to set as a pause for learning purpose

@learnsmartcoding Thanks for detail! I'm gotta make small server for personal learning purpose.

Hi Vijay, Thank you for your question! Starting your full-stack developer journey depends on what you want to achieve initially: Start with .NET Core: If you're new to full-stack development, it's a good idea to begin with the backend first. Learning .NET Core will help you understand how to build APIs, handle data, and work with databases like SQL Server. These are foundational skills for any full-stack developer. You'll also learn concepts like dependency injection, middleware, and API design, which are essential in most full-stack projects. Move to Angular: Once you’re comfortable with the backend, transition to Angular to create the frontend. Angular is a powerful framework for building dynamic and user-friendly web interfaces. Starting Angular after .NET Core makes it easier to connect your frontend to your backend APIs and see the full-stack integration in action. Alternative Path: If you’re more interested in UI/UX design or frontend development initially, you could start with Angular to understand how user interfaces work, then move to .NET Core for backend knowledge. Ultimately, the order depends on your interests, but for most beginners, starting with .NET Core provides a solid foundation for full-stack development. Good luck with your journey, and feel free to ask more questions! 😊

@@learnsmartcoding Thanks for guidance

Hi, you can find the Database script here. github.com/learnsmartcoding/e-commerce-smartcarthub-microservices/blob/main/LearnSmartDB_DB_Script.sql Hope this helps

Thank you! 😃

Hi Mithil, Great question! To implement user authentication and secure your APIs exposed through Azure API Management (APIM), here’s a structured approach: 1. User Authentication Technologies Azure AD: Best for enterprise scenarios where users belong to your organization or a trusted partner. Azure AD B2C: Ideal for scenarios where you have external users, like customers, needing to sign in via social accounts (Google, Facebook) or local accounts. These services handle user authentication and provide JWT tokens for API access. 2. Securing APIs via Azure API Management Azure API Management offers several ways to secure APIs: OAuth 2.0: Configure APIM to validate the JWT token issued by Azure AD/Azure AD B2C. This ensures that only authenticated users can access your APIs. API Key: Use this if you need an additional layer of security alongside user authentication. Client Certificates: For even more secure communication between the client and APIM. 3. Recommended Flow User Logs In: Use Azure AD or Azure AD B2C to authenticate the user. Once authenticated, the user gets an access token (JWT). Token Sent to APIM: The client (frontend or any consumer) includes the token in the Authorization header of the API request (Bearer token). APIM Validates Token: Configure policies in Azure API Management to validate the token against your chosen identity provider (Azure AD/Azure AD B2C). APIM ensures only valid tokens are forwarded to your backend APIs. Backend API Processing: The backend API receives requests only from APIM, trusting the already validated token. Tech Stack Recommendations Frontend: Any technology (Angular, React, etc.) capable of implementing OAuth 2.0. Backend APIs: Build using ASP.NET Core, Node.js, or any API framework that supports token validation. Authentication: Use Azure AD/Azure AD B2C with OAuth 2.0. Pro Tip Explore APIM policy templates to configure token validation, rate-limiting, caching, and more without needing to modify your backend APIs. Let me know if you’d like a more specific walkthrough for any part of this setup! 😊

@@learnsmartcoding Thank you soo much for your reply, i will go through your reply and let you know, mean while i was checking feasibility of building credential manager of azure api manager , they also provide authentication through, AAD,Google,Facebook... but still i have problem whether , i can connect it access apis expose through azure app service

Hi Mithil, You're welcome! I'm glad my earlier response was helpful. Regarding your idea of building a credential manager for Azure API Management, you're on the right track. Azure API Management does indeed support authentication via Azure AD, Google, Facebook, and more for securing APIs. These identity providers allow you to implement robust security without handling sensitive credentials yourself. To address your concern about connecting to APIs exposed through Azure App Service: Securing App Service APIs with Azure API Management: You can integrate your APIs hosted on Azure App Service with Azure API Management. API Management acts as a gateway, adding authentication and access controls before requests reach your App Service APIs. You can use OAuth 2.0 with Azure AD or other identity providers to secure API access. Users authenticate with their credentials, and upon successful validation, they receive an access token that is validated by the API Management gateway. Steps for Feasibility Testing: API Registration: Register your App Service API in Azure AD or the appropriate identity provider. API Management Configuration: Configure API Management to enforce authentication by setting up policies like validate-jwt or using OAuth 2.0 flows. Testing: Use tools like Postman to test the full flow (authentication through identity provider → access API via API Management → API hosted on App Service). Let me know how your exploration goes! Happy learning!

Glad you found it helpful!

Hi Sumit, Thank you for the kind words! 😊 I’m glad you found the video useful. Regarding your request, Microsoft has detailed documentation on leveraging Key Vault references in Azure App Services. Here's the official link that provides guidance and recommendations: 🔗 Secure app configuration with Azure Key Vault references learn.microsoft.com/en-us/azure/app-service/configure-common?tabs=portal learn.microsoft.com/en-us/azure/app-service/app-service-key-vault-references?tabs=azure-cli This document covers how to configure Key Vault references in your application settings, manage identity permissions, and ensure secure runtime secret retrieval. Let me know if you have more questions or need further clarification!

Hi, sorry for the delay. Are you asking how to deploy using ci cd using django?

@learnsmartcoding like I have an application with angular frontend and Django backend. Azure Postgresql for database. How should I set this up

Hi Erik, Apologies for the delay in responding to your question. Thank you for watching and for your question! 😊 In the video, I configured the authentication flow implicitly by setting it up through the library's defaults and Azure AD B2C configuration. By default, when using MSAL.js (the library commonly used with Angular for Azure AD B2C), it uses the Authorization Code Flow with PKCE for security, as this is now the recommended standard. You can confirm the flow by checking the MSAL library configurations in the code (like authConfig in Angular) or inspecting the network requests in the browser’s developer tools. Look for the /authorize endpoint in the request; if you see a code parameter returned, it's using the Authorization Code Flow with PKCE. If you'd like to explicitly configure the flow or better understand the setup, here’s the official Microsoft documentation on MSAL.js authentication methods. You may try this link smartlearnbykarthik.azurewebsites.net/ and watch network for /authorize request you will see it used code. The URL will confirm that the Authorization Code Flow with PKCE is being used, which is the recommended and most secure flow for public clients like Single Page Applications (SPA). Here's how we can tell: response_type=code: Indicates that the Authorization Code Flow is being used. code_challenge and code_challenge_method=S256: These parameters confirm that PKCE (Proof Key for Code Exchange) is enabled. PKCE is an extension to the Authorization Code Flow that adds an extra layer of security. scope: Includes standard OpenID Connect scopes (openid, profile, and offline_access) along with your custom API scopes, which is correct. x-client-SKU and x-client-VER: Shows that MSAL.js is being used, and the version is 3.21.0. This setup is aligned with Azure AD B2C best practices. Let me know if this clears up your query or if you need more help!

Hi Vinod, Thank you for watching. Yes, you can use Azure AD B2C for authentication.

The steps are exactly the same for ad b2c. Great tutorial explaining it. Thank you.

Hi, I have updated the video's description with the database script link. Here is the link for you. github.com/learnsmartcoding/online-course-api/blob/main/LSC.OnlineCourse.Data/Database_Script/OnlineCourseDB.sql Hope this helps.

thank you ! I have script and am creating DB and tables now :--)

Feel free to ask questions if you have any. Happy coding!

@@learnsmartcoding thank you ! I found everything at approx 8:40:00 in the video for the storage account setup, and got it working !

Hi, This video is just a part of AZ-204 video from functions topic. I have a playlist for AZ-204 certification. Please let me know if you need any other info. Happy learning!

Thank you! I'm planning to make more videos in the future on Azure related topics.

Thanks for your support! I appreciate you watching and sharing.

You're welcome! I'm glad you found it helpful.

Hi, Thank you for watching the video. You could see errors in the developers' tool console, for windows press F12. If you don't find any error, I suggest repeat the step as per video and see if you missed any steps. Please let me know how it goes.

@learnsmartcoding I will check again. The html content is coming from a next js server component page, could this be a problem?

Hi, Thank you for watching. I do not have any video focusing only on CSS. I suggest the w3school website is good for learning.

Hi Sandeep, Thank you for your question! I believe there’s a slight misunderstanding. In the video, I didn’t create separate tenants for the frontend and backend. Here's What I Did: My Azure account already has a default Azure AD tenant (associated with my Microsoft account). I used this tenant to register applications for the frontend (Angular) and backend (ASP.NET Core Web API). App Registrations: I registered two separate applications in the same tenant: One for the frontend, to handle user authentication and acquire tokens. Another for the backend, to secure the API and validate the tokens sent by the frontend. Why Separate App Registrations? This separation ensures proper security and role definition: The frontend application gets an access token with appropriate scopes to call the backend API. The backend application validates the token to ensure the requests are authorized. Key Takeaway There is no need to create a new tenant for Azure AD. I simply used the default tenant in my Azure account and registered the necessary applications under it. This is the standard practice for implementing Azure AD with SSO. If anything is unclear, feel free to ask! 😊

Hi Viznu, Great question! When a lazy-loaded component is destroyed, whether it’s module-based or standalone, the behavior is the same because Angular's lifecycle management is consistent across both approaches. When a Component Gets Destroyed: Module-Based Lazy Loading: The component is destroyed when its view is removed from the DOM, such as when you navigate away from its route or the parent component that hosts the lazy-loaded module is destroyed. Standalone Component Lazy Loading: Similarly, the standalone lazy-loaded component gets destroyed when it is no longer part of the active DOM, typically due to route changes or the destruction of its hosting component. Key Lifecycle Hook: In both cases, the ngOnDestroy lifecycle hook is triggered just before the component instance is destroyed, allowing you to clean up subscriptions, resources, or memory leaks. The main difference between module-based and standalone approaches lies in the structure and modularity, but the lazy loading lifecycle remains identical. Let me know if you'd like further clarification or examples!

Thank you! I'm glad you enjoyed the video. You can expect more on .NET and angular in the future.

Hi, Thank you for the feedback. I will make react and angular apps going forward.

@learnsmartcoding thanks for replying

Hi, you need to get the api key from openai. I have shown how to register and get api key.

Hi, Thank you for watching. The app shown in the video is "Online Course Enrollment" application and used Azure AD B2C. Here is the video link. ruclips.net/video/Cxftp90K_ek/видео.htmlsi=zLaRlzbAVi2oxcx8 I also have made many Azure AD, Azure AD B2C authentication videos and can be found from below link (it filters specific video) www.youtube.com/@learnsmartcoding/search?query=azure%20ad Feel free to let me know if you have any other questions. Hope this helps

Hi, You can run an Angular app on a Mac by installing Node.js and Angular CLI. After that, clone or create an Angular project, install dependencies using npm install, and start the app with ng serve. You can then access it in your browser at localhost:4200. Let me know if you need more detailed steps! 😊

Hi, You can find the README file within the GitHub repo, and use git clone to download the code. In case you want to learn GIT, please check this video ruclips.net/video/Xohwrcr7AKQ/видео.htmlsi=LGvSyf8SnqiO8rUy Repos: github.com/learnsmartcoding/online-course-api github.com/learnsmartcoding/online-course-ui github.com/learnsmartcoding/online-course-functions Hope this helps

Hi Harsha, Thank you for watching. Yes, API_KEY is the main here to access ChatGTP APIs. You need to register with OpenAI and get API Key. Depending on where you are, the cost might be different. There is no Free plan to my knowledge. Hope this helps.

Hi Narmata, Thanks for trying it out. Is the hosting you deployed your angular code a Windows server or Linux server? This video is for a windows based server, and for Linux, the configuration is a bit different. Please share some error details as well to assist you further. Looking forward to hearing from you.

I'm happy you found it useful!

Hi TechWizard, Thank you for the feedback. Point taken. Will go bit slow!

Hi Muhammad, Great question! To be a proficient .NET developer, here are some mandatory topics to focus on: Core .NET Skills: C# Fundamentals: Understand object-oriented programming (OOP) concepts, LINQ, collections, async/await, and exception handling. ASP.NET Core: Learn how to build web applications and APIs using controllers, middleware, dependency injection, and Razor pages. Entity Framework Core: Master database operations like migrations, queries, and relationships using EF Core. Web APIs: Know how to build RESTful APIs, handle HTTP methods, and manage authentication/authorization (e.g., JWT or OAuth2). Tools & Practices: Version Control: Get familiar with Git and platforms like GitHub or Azure DevOps. CI/CD: Understand the basics of automating builds and deployments using Azure DevOps or GitHub Actions. Unit Testing: Learn about testing frameworks like xUnit or MSTest. Docker and Containers: Understand how to containerize .NET applications. Additional Topics: Authentication & Authorization: Learn Azure AD or IdentityServer for securing apps. Cloud Platforms: Focus on Azure as it's widely used with .NET apps. Microservices: Understand how to build and integrate smaller services with gRPC or REST. Focus on project-based learning-building real-world apps will help you apply what you learn and stand out as a developer. Let me know if you'd like a more detailed roadmap or resources for any of these! while Docker and CI/CD may not be "mandatory" at the entry level, they’re highly recommended as you grow into more senior or versatile roles. Hope this clarifies your questions and feel free to let me know if you have any other questions. Happy coding!

@learnsmartcoding thanks plz tell me what are the topics in azure for .net developer?

I strongly suggest to go through the details in this full stack web development video. github.com/learnsmartcoding/restaurant-table-booking-app.api raw.githubusercontent.com/learnsmartcoding/restaurant-table-booking-app.api/main/RestaurantTableBookingApp.API/RestaurantTableBooking.svg The important Azure services are covered in this applications. Here is the video link. ruclips.net/video/70q8PanGbnw/видео.htmlsi=79CR3LrelvvnR7W7 Let me know if this helps.

Hi Karthikeyan, Thank you for watching the video. Please follow the steps in the below video clip, you will be able to setup the Azure storage account and get the connection string. Unfortunately, I cannot share the connection string from end. Upload Image to Azure Storage (Using Angular & Web API): 08:34:15 - 08:49:55 Please let me know if you need any other help or questions. I'm happy to assist you. Happy coding!

Thank you

Hi Vivek, sure. I will make the ToafoApp in different architectures similar to how we did with clean architecture. Stay tuned.

I'm glad it worked for you! Happy coding!

Hi MP, Thank you for the question. For the DBContext, we register in the program.cs github.com/learnsmartcoding/CleanArchitecture-ToDoApp-DotNet8-WebApi/blob/main/TodoApp.WebAPI/Program.cs#L47 With this, you can use it as mentioned below. With this, the app can provide an instance of DbContext to the repository. github.com/learnsmartcoding/CleanArchitecture-ToDoApp-DotNet8-WebApi/blob/main/TodoApp.Infrastructure/Repositories/UserRepository.cs#L17 Hope I answered your question. Please ask if you have any other questions or if you need more info on the current question, feel free to let me know. I'm happy to answer! Happy coding!

you will have to use builder.Services.AddDbContext<NameOfDbContext> just like this one builder.Services.AddDbContext<ApplicationDbContext>(options => { options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")); }); and in appsettings: "ConnectionStrings": { "DefaultConnection": "your connectionstring" } but i prefer to make a di injection class in the same project and send it over via IServiceCollection to keep program.cs cleaner

@salar1997 yes I got that but dbcontext requires EF okay .. EF package has been installed in only Infrastructure layer

@@learnsmartcoding thanks sir I got it now .. we have to use the reference of Infra layer in API project so as to use EF DBconext in program.cs

@@MP_04_02 yeah i missunderstood, but instead of making a DI class only for dbcontext, just make a DependencyInjection class in infrastructure and lay dbcontext and the repository services there instead, then its not neccessary to add them in program.cs

Hi, Thank you for watching. The APIs can be found here github.com/learnsmartcoding/online-course-api Hope this helps.