Category: Razor Pages

Categories
ASP.NET CORE Azure Razor Pages

How to Use SQLite on ASP.NET Core Project and Host on Azure

Often time, we just want to experiment some ideas. Just have a basic database setup on Azure will have some cost.

High Level Cost Options:

Min CostProsCons
SQL Server/Database>$0Full Feature ProductionNot Free
MySQL/Database >$0Full Feature Production Not Free
MySQL Preview/Database $0FreeNot scalable, Storage Size on Server
SQLite/Database $0Free, smallNot production

What if we just want to keep the cost down? Furthermore, if the idea really works, we can have easy way to migrate to SQL Server. Well, this post is for you.

NOTE: DO NOT USE SQLITE on PRODUCTION!

Prerequisite: Let’s assume you created the project with Authentication option selected. This will have Application DB Context setup, as well as Startup.cs will have services.AddDbContext. Let’s start.

Port SQLite

Step 1: Add SQLite support. In {your project}.csproj, add

<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.1.1" />

Note: At the time of writing, I am using version 3.1.1

Step 2: Add DefaultSQLiteConnection connection string. In appsettings.json, add a DefaultSQLiteConnection

  "ConnectionStrings": {
    "DefaultConnection": "omitted", 
    "DefaultSQLiteConnection": "Data Source=appdb.sqlite"
  },

Step 3: Modify Startup.cs

Remove 

services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(                  Configuration.GetConnectionString("DefaultConnection")));

Add

    services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlite(Configuration.GetConnectionString("DefaultSQLiteConnection")));

Step 4: Migration. Delete \Migrations folder. Open Package Manager Console (Tools->Nuget Package Manager -> Package Manager Console). 

add-migration initSQLite
update-database

That’s it! Run and test. You should see appdb.sqlite being created at the project root.

Troubleshoot: If something went wrong, check csproj file and make sure Microsoft.EntityFrameworkCore.SqlServer and Microsoft.EntityFrameworkCore.Tools are there.

DEPLOY SQLite on Azure

I had lots of trouble hosting on azure mainly due to lack of documentation. The key is to have the correct db connection string and export the sqlite db to Azure.

  1. Connection String: In Azure portal, Settings -> Configurations -> Application Settings -> Connection String. The Name is what you selected (using the example above, it would be “DefaultSQLiteConnection”. The Value is: Data Source=D:\home\site\wwwroot\App_Data\appdb.sqlite. The Type is: “Custom”
  2. For the actual db. Since we cannot migrate, we have to ftp it. We can use Kudu tool: https://{your project}.scm.azurewebsites.net . Then navigate to Debug Console -> PowerShell. Go to D:\home\site\wwwroot\ and create App_Data folder. There you can drag and drop your sqlite db. Your app should work now

Troubleshoot: If it doesn’t work and you’ve tried 100 times. You keep getting 500.30. Just delete the app and recreate it. I have spent hours and yet to figure out what’s the issue.

Caveat on using SQLite and EF Core. Migration deployment doesn’t work. Migration doesn’t even work locally. So migrate the database (I just delete migration folder and reinit). Then, I copy the new db to Azure.

Categories
ASP.NET CORE Azure Blazor Products Razor Pages

2020 Web Dev Learning Essentials

Below demonstrates the necessary knowledge required to become a reasonable Web Developer at 2020. This is tailored for .NET Developer.

Will update this into flow charts in the near future.

Categories
ASP.NET CORE Blazor Razor Pages

Project Setup Flow Chart

This is my typical Project Setup Flow Chart

Categories
ASP.NET CORE Blazor Razor Pages

Learning Next Steps

This is a follow up to Quick-Start, Part IV of the Series Web Development for Experienced (Non-Web) Software Engineers

Microsoft’s documentation is one of the main learning resource. Mainly due to it’s closeness to the actual source and fairly up-to-date. You can find the link here.

While ASP.NET Core’s available for several years, it continuously to evolves at an astonishing rate. Anyone who follows the preview builds might be able to understand some of the design decisions. Without them, often times it won’t make much sense. This is where I find Microsoft documentation lacking. I’ll try to provide more value discussion the changes and hidden features in this site.

Categories
ASP.NET CORE Blazor Razor Pages

Web App Differences

In Quick-start post of Web Development for Experienced (Non-Web) Engineers series, I mentioned different type of web apps. This post I’ll try to clarify what they mean.

Name App Type Description
Razor PagesWeb AppRazor Pages is closer to Model-View-Viewmodel pattern. Razor Pages is a server-side, page-centric programming model, encourages organization of files by feature, therefore easing maintenance of your application. It contains same syntax and functionalities of MVC, but enables two-way data binding and simpler development experience with isolated concerns.
MVCWeb App Model-View-Controller pattern. The Model defines the fundamental behaviors and data for the application and its components. The View uses HTML and Razor syntax to provide the UI. The Controller is a class that receives requests and handles user actions. At the time of writing .Net Core 3.1. MVC is considered as legacy.
Web APIWeb APIJust APIs
SignalRReal-Time AppWeb technologies was initially designed as pull/get protocol, where the request for the transmission of information is initiated by the receiver or client. To achieve two way communication, several techniques were used previously, such as long-poll, server-side event. With the introduction of Web Socket, two way communication is standardized (but still hard to use). SignalR is a wrapper to make development of real-time app much easier to develop.
BlazorBlazor/SPA AppThe future. Single Page Apps web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application. Several popular SPA frameworks: Angular, React, Vue. Blazor is Microsoft’s approach of making SPA, enabling C# development across web client, server, mobile.

Categories
ASP.NET CORE Razor Pages

Quick-start

Part IV of the Series Web Development for Experienced (Non-Web) Software Engineers

This tutorial shows how to use Visual Studio 19 to create and run an ASP.NET Core web app. This post might be a bit redundant consider there are so many versions of this online. For completeness sake, we have it here.

Prerequisite:

Note: This series is using Visual Studio. For tutorials using Visual Studio Code and command-line interface, you can refer to this tutorial from Microsoft

Create Web App:

At the time of the writing, ASP.NET CORE 3.1, the recommended starting point is to use a Razor Page. We’ll discuss the differences in the next tutorial. Let’s just get to building the first web app.

Open Visual Studio, click “Create a new project”

In Create New Project, Select ASP.NET Core Web Application on the left, and select ASP.NET Core Web Application, then click next.

Configure the new project by typing Project name. Where you want to store the project. And the Solution name.

Select Web Application (which will generate Razor Page template). Select “No Authentication” (which will not generate identity/user accounts). Check Configure for HTTPS (for security). Click ‘Create‘.

Your Project is Created

Run the App

Click IIS Express to run the app

Note: If there’s a popup dialog asking “Would you like to trust the IIS Express SSL certificate”, click yes.

IIS Express should run and your selected browser should open to localhost with a randomly selected port. Your Web App is running!

Note: Localhost only serves web requests from the local computer. When Visual Studio creates a web project, a random port is used for the web server.

Recap:

In this tutorial, you:

  • Create a Razor Pages web app.
  • Run the app.

Categories
ASP.NET CORE Azure Blazor Products Razor Pages

Scope

Part II of the Series Web Development for Experienced (Non-Web) Software Engineers

This series is for experienced engineers who wants to understand more about web development. Here we’ll try to cover as much as possible while being cost conscious. Most importantly, still use the best tools and services that can be used in a professional and production environment.

We will cover from tools and services required. Simple architectures. Tutorials. Customization. Development Process. And actual deployment (and service customization).

We are going to be using Microsoft ASP.NET CORE and Azure as our stack. Having everything together that just works is great.

Let’s get started.