Posts

Showing posts from April, 2022

Blazor Basic Auth in Docker

Image
The Project Be able to create and deploy a Blazor Server application using Basic Authentication with a local DB.  I want to be able to deploy the application and the database together.  The Why I create a lot of small Blazor applications, less than 1000 users, that need to have authentication and are cheap to deploy.  Up to this point, I have been using Azure SQL Server.  It is costing me $5.00 - $20.00 per month.  I was looking for a way to cut the cost even more. The Solution So my great idea was to build the Blazor Server application with the basic authentication running the SQL Express database edition. In theory, this sounds very doable,  but in reality, there were several hurdles that I did not think of going into building this solution. I will start by explaining the solution I built and then the problems I ran into. The Solution Build  1. Create a Blazor Server Side application with basic Authentication     a. Select to use Docker and with Windows containers 2. Run it and make

Blazor Slide Show Presenter

Image
  This is a simple project that shows how to create a slide show presenter in Blazor.   Most of the work is done in the CSS.  Applying some Blazor goodness to it elevates the application. Creating a static slide show presentation is fairly straightforward.  You can create the meat of the presentation in HTML within the Blazor page.  Nothing to fancy about that.   To make things more interesting, we will show how to handle dynamic content in the presentation.  This will allow you to load the content on startup that could be pulled from any other source, API, Database, etc. You step between pages using the arrow keys, ↑ ↓. HTML / CSS As I stated HTML and CSS are the heart of the display.  You can see this on the index page. HTML         <section>             <h1>title 1</h1>         </section> CSS           html {               scroll-snap-type: y mandatory;           }           section {               block-size: 100vh;               scroll-snap-align: center;