Software Architect / Microsoft MVP (AI) and Technical Author

Architecture, ASP.NET Core, Azure, C#, Daily Tracker, Developer Life, MVC, MVP

From Prototype to Production: Turning the Daily Tracker Journal and Mood Tracker App into a Micro SaaS

 

In this blog you will see how I converted a prototype application written in just a few hours to a production SaaS hosted in Microsoft Azure.

 

Before reading the rest of this blog, it will be useful to read these beforehand to get the full context:

 

 

 

I’ve documented this for my own reference.  It contains the key steps and what it took to go from a web application running on my development machine to a SaaS running in the cloud.

 

This will be useful for you if you plan on shipping a similar product or want to know the steps you need to take to take your app from localhost to running on the world wide web using Azure.

 

Ready? Let’s jump in.

~

Authentication and Authorisation Using Microsoft Identity

The original prototype would only run using a single account that was hard coded in a JSON settings file.  Clearly that had to change to run in the cloud.  I didn’t want to code my own authentication and authorisation code.

 

You can scaffold this capability directly within Visual Studio. It creates the required UI and back-end code.

 

In addition to this, I created a database table to store status updates and a service class to interact with the data.  A controller was created to interact the service class.

 

Identity Scaffolding in Visual Studio lets you select from a variety forms. I only needed a few of these:

  • Register an account
  • Login
  • Edit Profile

 

Register an Account

This, as you’d expects, lets you register your account.  Clicking register inserts a record into the identity tables.  All out of the box behaviour.

 

 

Login

The login screen is straight forward.  Again, all out of the box behaviour.

 

One thing to note are the Forgot Your Password and Resend email Confirmation hyperlinks underneath the login button.

 

To use these, Send Grid must be setup.  More on that in a later section.

 

Edit Profile

This screen lets you change basic information related to your profile.  The email address is readonly and set upon signup.  Phone number is optional.

The default options are used.

~

Status Timeline

The timeline form consists of two main parts.  A partial view to post a status and a second partial view that renders the list of statues in a timeline format:

 

You can browse and post for your current year.  An option to delete is also available.

You can get a feel for the underlying HTML here.

~

Migrating from SQL Express to Azure SQL.

A SQL Server express database running locally is currently used for all data.  This must be migrated to an Azure SQL instance.  I used SQL Compare for this:

 

The database is small and uses a single table to stored statuses. The remaining are created by Identity to handle user and account details.

~

Verifying Azure SQL Connectivity

The local development instance of the site is pointed to the Azure SQL connection to verify the schema and data can be accessed successfully: