Typewriter recipes

This is part of the presentation how to generate automatically models and services from controllers and model classes in .net core web api for angular>14.x.x and react>18.x.x using Typewriter Unofficial Fork compatible with Visual Studio 2022 2.14.0

.NET 6 Newtonsoft.Json

1. Angular sample .NET 6

• Base class annotated with JsonDerivedType (for generator purposes discriminators are mixed string, number and nameof - which is string - normally you should use one convention) ComplexBaseModel.cs
• TypeScript autogenerated version ComplexBaseModel.ts
• Derived class ComplexAModel.cs
• TypeScript autogenerated version ComplexAModel.ts
• code for generating models
• sample contains also enum and records generation
• Angular also contains automatic generation of service classes from controllers - by using code for generating services

1. React sample .NET 6

• use same ideas as in Angular sample - it is only limited to models due to multitude of possible creation api connecting functions ReactWebApiSample2

.NET 7 System.Text.Json

To show new functionality with polymorphism https://devblogs.microsoft.com/dotnet/system-text-json-in-dotnet-7/#using-type-discriminators Please see in samples:

1. Angular sample .NET 7

• Base class annotated with JsonDerivedType (for generator purposes discriminators are mixed string, number and nameof - which is string - normally you should use one convention) ComplexBaseModel.cs
• TypeScript autogenerated version ComplexBaseModel.ts
• Derived class ComplexAModel.cs
• TypeScript autogenerated version ComplexAModel.ts
• code for generating models
• sample contains also enum and records generation
• Angular also contains automatic generation of service classes from controllers - by using code for generating services

1. React sample .NET 7

• use same ideas as in Angular sample - it is only limited to models due to multitude of possible creation api connecting functions ReactWebApiSample2

Backend

Right now .net 7 .net 6, .allows to create nice dry web api. In version 2.x I used Andrew Lock template named NetEscapades.Templates described in blog post Removing the MVC Razor dependencies from the Web API template in ASP.NET Core. In 2.x small modification was needed to serve static files.

    app.UseMvc();
    app.UseDefaultFiles(); //added
    app.UseStaticFiles(); //added

Frontend

Angular v14.0 install node v16.18.0

Basic set of npm packages

npm i -g typescript
npm i -g @angular/cli
npm i -g nx@latest
npm i -g jest
npm i -g npm-check-updates

For new project i use yarn as a package manager

ng set --global packageManager=yarn

Frontend folder is created in main folder of webapi . For styles scss is used. App is setup without inline templates and styles

npx create-nx-workspace@latest

Frontend project was geenrated using NRWL NX

When you generate angular project regular way there is a way to use jest and testcafe based on article Use React tools for better Angular apps In article unit test karma/jasmine combo was replaced by Jest; E2e tests protractor was replaced by testcafe.

Build script

Build is based on excelent Cake project. script is located in cake folder and it is composed from two cake files:

1. build.cake - main file which is aggregator of steps
2. build.steps.cake - steps definitions Right now script is able to run frontend and backend compilation. In future description how to setup sonaqube will be added.

Tricks

Frontend tricks

'base' tag generated dynamically

Due to fact that application can be deployed as a web site or as a web application, debugged etc. base tag in angular app can be set manually (and maintained which can be error prone). In sample base tag is autogenerated by following javascript.

(function () {
  "use strict";
  var r = document.location.href;
  var i = r.indexOf("#");
  if (i > 0) {
    r = r.substring(0, i);
  } else if (
    r.length > 1 &&
    r[r.length - 1] === "/" &&
    r[r.length - 2] === "/"
  ) {
    r = r.substring(0, r.length - 2);
  }
  if (r[r.length - 1] !== "/") {
    r = r + "/";
  }
  document.write('<base href="' + r + '" />');
})();