DEV Community: OliBlade

Deploying to Firebase with GitHub Actions

OliBlade — Thu, 29 Oct 2020 19:42:35 +0000

This is a quick guide on how to get an un-hosted project, onto Firebase hosting using GitHub Actions which is updated on every merge. We’ll just be using the Firebase CLI, no fancy coding required!

A few assumptions before we begin:

A repository on GitHub with a website ready to host (In my case, a fresh Angular App “ng new”)
A Firebase account
The latest Firebase cli installed and ready to go

So let’s get started

First up, head over to Firebase and create your new Project. Just follow the basic steps, add your project name, enable analytics if you want to.

Now let’s hop into our command window and setup the Firebase and GitHub stuff.

Get a command window open in your project directory.
Type the following command.

firebase init hosting:github

This will walk you through the process from start to finish

Follow the steps in the console, use the existing Firebase project you made earlier.
When prompted for the GitHub repository, type in the following “Username/Repository”, or in my case

OliBlade/MyFirebaseApp

You’ll also be asked to input the build directory of your site, and your build command, in my case “npm run build”

Once that’s all done

You’ll have seen in the output that this has created a service account in your Firebase project with permission to deploy Firebase Hosting. Also that service account’s JSON key has been uploaded to the GitHub repository as a GitHub Secret.

In your files you’ll notice a folder called “.github” with a couple of YAML files in the workflows folder. If you take a look at these you will see how they reference the newly created secret and configure the GitHub Action to deploy Firebase Hosting.

Commit and Push

It doesn’t really matter if you do this on a new branch or not, but you probably should. Navigate to your repository and click the Actions tab. You will see your action executing and building the project.

Notice step 4 deploys to FireBase, if you check out your new project in Firebase Console you will see a freshly deployed and hosted app.

This now updates your live FireBase hosted website with every merge into your main branch, and every PR in this GitHub repo will get its own preview URL!

Some extra reading

This post was heavily based on this Firebase documentation, but I thought I’d do a little walkthrough
GitHub Secrets
GitHub Action
GitHub Action to deploy to Firebase hosting

Prerender your Angular app, as simple as possible

OliBlade — Mon, 12 Oct 2020 17:22:27 +0000

Have you ever wanted a simple static site, but you won’t want to lose Angular in the process? Here’s how you do it.

Getting started

Make sure your Angular CLI and Angular version is up to date, you can check with ng version, and update with ng update. Version 9+ should do it

My Angular version

From start to finish

Start a new Angular Project using the CLI with ng new
Install Angular Universal Express Engine using the CLI ng add @nguniversal/express-engine
Add the routes you would like to prerender to the “prerender” -> “routes” array in the angular.json

Prerender the content with npm run prerender . This will generate the prerendered files in “dist” -> MyApp -> “browser”. Note how you have “index.html” with the prerendered content and “index.original.html” with the original copy

And that’s it... Bob is indeed my uncle.

Entity Framework Core — From zero to something

OliBlade — Wed, 30 Sep 2020 16:04:54 +0000

Entity Framework Core — From zero to something

I… have never used Entity Framework before. But when someone pitched me the idea of removing all my CRUD stored procedures I jumped right in with my new ASP.NET Core 3.1 project.

Getting started

To begin with, I created a SQL Server Database Project in Visual Studio with a couple of tables that reference each other so we have something to play with.

CREATE TABLE [dbo].[Campaigns]
(
 [CampaignId] UNIQUEIDENTIFIER NOT NULL PRIMARY KEY,
 [Name] NVARCHAR(100),
 [Enabled] BIT, 
 [UserId] NVARCHAR(450) NOT NULL
)

CREATE TABLE [dbo].[CampaignFilters]
(
 [CampaignFilterId] INT NOT NULL PRIMARY KEY IDENTITY, 
 [CampaignId] UNIQUEIDENTIFIER NOT NULL,
 [FilterTypeId] INT NOT NULL

CONSTRAINT [FK_CampaignFilters_Campaigns] FOREIGN KEY ([CampaignId]) REFERENCES [Campaigns]([CampaignId])
)

Next, I used the Schema Compare feature in Visual Studio to add my tables to my Database.

Database in SSMS

With my new tables safely in SQL Server it was time to move on to some Entity Framework things.

Generating the models

Easy as 1…2…3

Run the command in Visual Studio Package Manager Console to scaffold the models and Model Context (the thing that tells the models what they are)

Scaffold-DbContext ”Server=localhost;Database=EntityFrameworkDB;User Id=DBUser;Password=Password;” -Provider Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models/Database -force

Realise the scaffolded models have weird pluralisation

Why is it plural? Maybe it’s just me :(

Install the following Nuget package and try again

Successful scaffolding

Trying it out

I slapped together a couple of CRUD-y read and writes using the models and context I had just made using some dependency injection to get hold of the DBContext.

public class CampaignRepository
 {
  private EntityFrameworkDBContext EntityFrameworkDBContext { get; }

public CampaignRepository(EntityFrameworkDBContext entityFrameworkDBContext)
  {
   EntityFrameworkDBContext = entityFrameworkDBContext;
  }

public IEnumerable<Campaign> GetCampaignsByUser(string userID)
  {
   return EntityFrameworkDBContext.Campaigns.Where(x => x.UserId == userID);
  }

public void SaveCampaign(Campaign campaign)
  {
   EntityFrameworkDBContext.Campaigns.Add(campaign);
   EntityFrameworkDBContext.SaveChanges();
  }
 }

And sure enough…. it worked.

Other things I learned along the way

You can run the scaffold command from the DotNet CLI.

dotnet ef DbContext Scaffold “Server=localhost;Database=EntityFrameworkDB;User Id=DBUser;Password=Password;” Microsoft.EntityFrameworkCore.SqlServer -o Models/Database — force

You can use stored procedures along side Entity Framework, there’s no ish.
Update and Add are not the same thing and will cause errors if used interchangeably.
Use the “-force” flag to overwrite your changes
You can use partial classes to expand on the models