DEV Community: gaotter

Change a .Net Console application into an web application

gaotter — Fri, 03 Jan 2025 13:11:29 +0000

I was experimenting with a small .NET console application and decided to convert it into a web application. Initially, I thought I needed to download a NuGet package, but it turns out that’s no longer necessary.

Instead, I discovered that I just needed to change the Sdk attribute in the project file from <Project Sdk="Microsoft.NET.Sdk"> to <Project Sdk="Microsoft.NET.Sdk.Web"> and remove the <OutputType>Exe</OutputType>. It was a simple change, but definitely good to know!

Classes variables early thoughts 🤔

gaotter — Tue, 21 May 2024 08:28:00 +0000

I'm just starting to learn Python, coming from languages like C# and JavaScript/TypeScript. I'm going thought this https://docs.python.org/3/tutorial/index.html tutorials. I gotten to the classes section. One thing I kinda felt can be a little risky thing to use is the class variables. In that you can loose the control of state of the objects in you code, when using them.

Here is the Dog example that is in the Python tutorial.

class Dog:
    kind = 'canine'

    def __init__(self, name):
        self.name = name

I make to instances of the dog class

fido = Dog('Fido')
buddy = Dog('Buddy')

print(fido.kind) // prints canine
print(buddy.kind) // prints canine

All is fine, I know what kind is going to be. In the tutorial it states that the class variables a shared between instances of the class. Like this

Dog.kind = 'dog'

print(fido.kind) // prints dog
print(buddy.kind) // prints dog

But if i set kind on one of the instances, the instance 'looses' shared kind

fido.kind = 'super dog'
Dog.kind = 'dog'

print(fido.kind) // prints super dog
print(buddy.kind) // prints dog

In a large code base, one can easily loose track of the kind variable. One can't really trust the variable, as it can either be changed by the shared class variable, or some code has set the instance variable.

One can marking as private using _kind to tell to other developers that is should thought of as private, but still one can easily miss use it. Unsure if I ever would want to us it an public way. But still new to Pyhon so still learing.

Send initial data to a component in Angular Universal

gaotter — Sun, 26 Mar 2023 11:19:50 +0000

Steps

Setting up a simple test angular universal, I wanted to try to send some initial data to the components, and have it server render all the data. To test it I used postman as it does not run any JavaScript

To get up and running call ng new univesaltest1 and to enable universal called ng add @nguniversal/express-engine

To have some components to test with run ng generate component test --module app.module.ts and ng generate component test2 --module app.module.ts

Then making a simple message model and an injection token

import { InjectionToken } from "@angular/core";

export class MessageModel {
  constructor(
    public message: string
  ) { }
}


// injecton token
export const MESSAGE = new InjectionToken<MessageModel>('message');

In the server.ts file set up the initial model and some query string code. Then provide the model using the MESSAGE injection token.

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    const message:string = req.query['message']?.toString() ?? 'hello from server.ts';
    const messageModel = new MessageModel(message);

    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }, {provide: MESSAGE, useValue: messageModel}] });
  });

In the test.component.ts inject platform id and on the server run code inject the message model using the MESSAGE injection token. I need the transfer state as the rendering on the client will set the message, overriding the server rendered message. If I was to disable JavaScript in the browser, I do not need the transfer state.

import { isPlatformServer } from '@angular/common';
import { Component, inject, Inject, PLATFORM_ID } from '@angular/core';
import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';
import { MESSAGE, MessageModel } from 'src/models/message.model';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {
  // transfare state key
  private messageStateKey:StateKey<MessageModel> = makeStateKey<MessageModel>('message');

  public message: MessageModel = this.state.get(this.messageStateKey, new MessageModel('hello from test.component.ts'));

  constructor(@Inject(PLATFORM_ID) private platformId:object,  private state:TransferState)
  {
    // check if we are on the server
    if(isPlatformServer(this.platformId)) {
      const serverMessage = inject(MESSAGE);
      this.message = serverMessage;
      // set the message in the state
      this.state.set(this.messageStateKey, serverMessage);
    }
  }
}

To make it more interesting input the message model into test2 component using this code

test.component.html

<div >
  <app-test2 [message]="message"></app-test2>
</div>

test2.component.ts

import { Component, Input } from '@angular/core';
import { MessageModel } from 'src/models/message.model';

@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component {
     @Input() message: MessageModel = new MessageModel('hello from test2.component.ts');
}

test2.component.html

<p>{{message.message}}</p>

Now we are all set. To test the code start the universal version using npm run dev:ssr

Calling it postman and all the html with the model data is rendered on the server

Request: localhost:4200?message="Hello from query string"

<body>
    <app-root _nghost-sc3="" ng-version="15.2.4" ng-server-context="ssr">
        <app-test _ngcontent-sc3="" _nghost-sc2="">
            <div _ngcontent-sc2="">
                <app-test2 _ngcontent-sc2="" _nghost-sc1="" ng-reflect-message="[object Object]">
                    <p _ngcontent-sc1="">"Hello from query string"</p>
                </app-test2>
            </div>
        </app-test>
    </app-root>
    <script src="runtime.js" type="module"></script>
    <script src="polyfills.js" type="module"></script>
    <script src="vendor.js" type="module"></script>
    <script src="main.js" type="module"></script>

    <script id="serverApp-state" type="application/json">
        {&q;message&q;:{&q;message&q;:&q;\&q;Hello from query string\&q;&q;}}
    </script>
</body>

The Road

I did some mistakes when trying to get this to work. In the first try I tried to inject the Message model using the @Inject in the constructor. The problem then is that the client part of the application is not able to make sense of the provided message model.

I go the error

R3InjectorError(AppModule)[InjectionToken message -> InjectionToken message -> InjectionToken message]: 
  NullInjectorError: No provider for InjectionToken message!

Trying to provide the injection token in the app.module.ts using

  providers: [{provide: MESSAGE, useValue: null }],

and then

 @Inject(MESSAGE) private messageModel:MessageModel

The client app model overrides the provided message with null. So you could se the message blink before the client set it to null.

The solution was to not try to mix the server injected code with the clint part of the code.

NTFS_FILE_SYSTEM error Windows 10 😱, and I guess I know some stuff I don't know.

gaotter — Fri, 04 Dec 2020 13:14:47 +0000

This weekend I left my laptop on without power supply a hp spectre, while going out for a walk with my kids. When I got home the laptop had been turn off (in a bad way). When trying to turn it on I got a blue screen with the error code NTFS_FILE_SYSTEM. 😱 No!! What to do, my warranty just when out. Is the hard drive broken. It's a ploy to get me to buy a new computer. All the crazy stuff went through my head, as I panicked.

After cooling down (after some hours) I found that I could reach the command line tools, and the computer had a x drive (partitioned), then something back in my head said "chkdsk" try "chkdsk". But I ignored that, and did all the other stuff. Try to run reset to a old restore point in Windows, and all the other stuff I don't know what does. Event thought about formatting the disk, and reinstall everything. But the voice in my head still said "chkdsk, try chkdsk " . Ok!! lets try chkdsk then. Run chkdsk C: /f from the x drive, some messages about fixing some bad stuff. Waiting.... reboot, worked.

So what did I learn. Don't leave the computer on (without power saving on) un plugged. And listen to you inner voice, event it's telling you some old stuff you don't know you know.

How not understanding stuff can make you learn other stuff and waste time.

gaotter — Wed, 18 Nov 2020 14:55:47 +0000

To learn more about setting up and running front end with an simple web api in Azure. I started building a simple clint app in Angular, that calls a ping method in a web API using .net. Setting up the environment was not that hard as there are a lot of examples on how to do that, and I have done it before. Making the a proxy.config.json to proxy call to the local API etc.

But how to host it? I knew you could host it as a static page in a Storage account. Here is where my miss comprehension of CORS put me on the wrong path. I though the client, had to set Allowed Origins to the api. Not the other way around, where API server has to set Allowed Origins. If I had taken the time to read about CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). I would only need to deploy my web api, set Allowed Origins to the static site url, and be done width my little test.

But no I was still in the shadow of my miss comprehension, and did not think it could work (or was more difficult) using the static site in a storage account (but why even have static site, Morten??). I then started looking at how to host angular web app using app service, and express as the hosting server.

I read though John Papa blog post on deploying a angular app to Azure (https://johnpapa.net/deploy-angular-to-azure-vsts-angular-cli/). This was just for testing, so I just looked at the github project on how to set it up, not the devops part (basically not the blog 😁). I got it working locally. I hade to set up the angular.json different, since the in the github solution it is using the older .angular-cli.json file.

I got it working locally, and deployed it to azure using Visual Studio code. But the app did not work, since the express part missed the node_module folder. The node_module is excluded when deploying. I could manually deploy it but did not feel like the right solution. After some more testing and reading I found that I was missing the .deployment (see under) file in the express part of the solution. Now the app worked.

.deployment
[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=true

Hosting was working but the original problem of setting up CORS did not work. I tried to set it up in the app service, hmmm did not work. Then tried to set it up in the Express app, still not working. Ok I have missed something. Maybe reading a little more on how CORS really works 😉? After about two minutes of reading it was clear. All the express stuff, and trying to get that to work was unnecessary (except from learning about hosting and deploying using express). So then I just deployed the client to the storage account. Then set the static site to be trusted in the CORS settings in the API app service. Wow it worked.

So what did I learn (ones more)? How to set up an express server to host an Angular app in Azure (not ones more). But more importantly. Thinking that one have understood something based on loosely hearing about it, does not mean on really understands it. Before one starts a task or project. It is important to think about what is assumptions, and take some time reading about them. It can save a lot of time. This was just me learning stuff, but in a real project it can be very expensive when one just assume things.

Some windows short cuts I like to remember

gaotter — Thu, 15 Oct 2020 08:04:27 +0000

Hi here is some window short cuts I like to remember.

Win + shift + s a nice snipping tool.

Win + v good old clipboard, missed you.

Win + . (⌐■_■)

Win + Alt + R Se how I did stuff