Wednesday, October 30, 2019

Using HTTPS in the ASPNETCORE development server Kestrel

To use SSL with the ASP.net Core development server, Kestrel, first export your certificate to a PFX file. Add the file to your project and then add the following section to your csproj:

  <ItemGroup>
    <None Update="mydomain.pfx">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </None>
  </ItemGroup>

This addition will cause the PFX to be coped to your output directory. After adding this to your csproj, add the following section to your appsettings.json file to use the exported certificate:

"Kestrel": {
    "Endpoints": {
        "HttpsInlineCertFile": {
            "Url": "https://test.mydomain.com",
            "Certificate": {
                "Path": "mydomain.pfx",
                "Password": "mypfxpassword"
            }
        }
    }
}

Poof, you're secure.

Saturday, August 10, 2019

Json Serialzation in Entity Framework (EF Core 2.1)

I've had a number of instances where I want to serialize JSON into a single field in the database. In the past I resorted to a [NotMapped] field which held the complex object and a [JsonIgnore]d field which was serialized in EF to a Text SQL field.

I recently discovered that EF Core 2.1 includes easy value conversions! In the example below, I have a Stay entity which has a serialized Drive object. Drive is declared on SQL Server as a Text column.

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
   base.OnModelCreating(modelBuilder);


   modelBuilder.Entity<Stay>()
   .Property(s => s.Drive)
   .HasConversion(
      d => JsonConvert.SerializeObject(d),
      d => JsonConvert.DeserializeObject<Drive>(d)
   );
}


Viola! No need for the extra fields on the model class.

Monday, May 20, 2019

Using lit-html inside an ASP.MVC .NET Core application with Typescript

This is the process for getting a lit-element component up and running inside and ASP.MVC .NET Core application.


Prerequisites: .NET Core, VSCode, Node. Install these before you start. You should be able to run “dotnet”, “code”, and “npm” successfully from a command line.


Create a project directory.
md Example.Web


Change to the project directory.
cd Example.Web


Create a new ASP.MVC project inside that directory.
dotnet new mvc


Open Visual Studio Code inside the new directory.
code .


Press F5 to start debugging the new app. VSCode will prompt you for an environment. Select “.NET Core” and a launch.json file will be created inside the .vscode directory. If you want to change the way the project launches when you debug, modify this launch.json file.


Press F5 again to start debugging. VSCode should launch your default browser with the web site up and running.


Return to VSCode and open a new terminal. Install lit-element.
npm install lit-element


Npm will create a “node_modules” subdirectory in your project. Just deal with the fact that now you have this folder related to node and don’t try to change the directory. It’s not likely worth it.


Create a scripts folder.
md scripts


Inside the scripts folder use VSCode to create a new file called my-element.ts. The following should be in the file:


import { LitElement, html } from '../node_modules/lit-element/lit-element';
class MyElement extends LitElement {
render(){
  return html`<p>Hello .NET Core and lit-html</p>`;
}
}
customElements.define('my-element', MyElement);


Save the file. Also inside the scripts folder, use VSCode to create another new file called main.js. The following text should be in the file.


import { MyElement } from './my-element';


Save the file. Using your terminal window, install typescript globally if you have not previously used typscript.
npm install -g typescript


Use VSCode to create a file called “tsconfig.json” in the root of your web project. The following text should be in the file.


{
  "compilerOptions": {
      "lib": ["es6"],
      "target": "es6",
      "noImplicitAny": true,
      "removeComments": true,
      "preserveConstEnums": true,
      "sourceMap": true
  },
  "include": [  "scripts" ],
  "exclude": [ "node_modules" ]
}


Run the typescript compiler in a terminal window.
tsc


You may see some errors from the lit-html compilation. I’m not what these are about but it seems safe to ignore them for now. You should now see my-element.js and my-element.map.js inside your scripts folder.


Now install webpack globally using npm in a terminal window if you have not previously used webpack.
npm install -g webpack


Note that the typescript and webpack installs only need to be done once on your machine. For future projects, you will not need to install them again.


Use VSCode to create “webpack.config.js” in the root of your web project. The following text should be in the file


var path = require('path');


module.exports = {
mode: 'development',
entry: './scripts/main.js',
output: {
  path: path.resolve(__dirname, 'wwwroot/js'),
  filename: 'bundle.js'
}
};


This configuration will tell webpack take everything that is referenced in the main.js file and bundle it into a single file inside wwwrooot/js/bundle.js. Run webpack from a terminal.
webpack


You should now see a “bundle.js” file inside wwwroot/js.


Edit the file /Views/Home/Index.html using vscode. Paste the following lines in at the end of the file.


<script type="module" src="/js/bundle.js"></script>
<my-element></my-element>


Return to the browser and you should see your lit-html component on the page.