Kategorie: Documentation and HowTos

Collection of short documentation and howtos to several domains I worked on, or I’m interested in.

Veröffentlicht am
  • Running MVS on your own emulated Mainframe or…
    …Welcome to Jurassic Parc. The world of the Dinosaurs. I’m a Java programmer since my very first days as a professional software engineer. Before that, I started programming with BASIC and Assembler on a Commodore +4. During my studies is programmed C on an ATARI-ST or on Solaris Workstations. My first job was in the ...
  • Installing and starting HERCULES and MVS
    The easy part… installing and starting HERCULES today (2023) really is no problem at all. It can run on any commonly used OS like Windows, MacOS, and Linux. I choose my old Raspberry PI 3B as my mainframe platform. And it does the job quite well for one user. So how is it going: My first try ...
  • Running HERCULES 4.X Hyperion in a Docker Container
    … when two worlds come together Hercules is actively developed under the project Hercules Hyperion and the current release 4.5 is available on github. I tried to compile it on my macOS but got some trouble with the software not being available and so I decide to give docker a chance and carry this cute little ...
  • KICKS-Starter!
    …Installing a „Transaction Monitor“ When I first heard of someone talking about COBOL online programs they always used the term „transaction monitor“ and CICS. Me, as a java developer, was wondering why monitoring a database transaction is so important for the development of the 3270-Screens. As I learned now, I couldn’t be more wrong! In „Jurassic Park“ ...
Veröffentlicht am

Absolute Paths in NestJS

In order to import application components via a relative path in a nodeJS application, it might be better to use absolute paths. With absolute paths, you can move your components wherever you want, and you can see exactly on the import path what an import is all about.

To activate this in a TypeScript project, like all NestJS-Application, you need to add a „path“ configuration to the tsconfig.json like this:

"paths": {
  "@app/*": ["./src/*"]
}

Now all files under src can be referred to with „@app/…“. But this does only work for typescript. When typescript is compiled to JavaScript for production, this definition is not valid anymore. For the JavaScript part, there is a package „module-alias“ to reference packages via an alias as „@app“. The package must be installed with the package manager in use. With npm: npm install module-alias. Or with yarn: yarn add module-alias. Documentation to „module-alias“ can be found here. For the module configuration, there should be an entry „_moduleAliases“ inside the package.json of the project. In this configuration, the alias ‚@app‘ is mapped to the ‚./dist‘ directory. Thus because in production, the JavaScript-Sources are stored in the ./dist directory.

That’s nearly all. One little thing is left. As mentioned in the documentation, the module should only be activated in JavaScript with the following line:

require('module-alias/register')

But only if the program is running in production. So in the main.ts add at the very top this code:

if( process.env.IS_PROUCTION) {
  require('module-alias/register')
}

In development define an Environment-Variable „IS_PROUCTION“ that would prevent the require-statement from being executed.

Veröffentlicht am

The minimal react application (with TypeScript)

To create a new React application, enter the following command:

npx create-react-app react-app --template typescript

A minimal react application contains an index.html page with an element marked with id=“root“ and an index.tsx (TypeScript with jsx included) with the following content:

// Importing ReactDOM. Needed to render the page.
import ReactDOM from "react-dom";

// Build a minimal React-Function Component as a Function
// that returns some Content
const App = () => {
  return <div>
    <h1>Hello React</h1>
  </div>
}

// Use imported ReactDOM to render a Component at the
// Element marked wiht id="root"
// The Component to render is referred to via it's name
// as <App />
ReactDOM.render(
  <App />
  , document.querySelector("#root")
);

This Application does not use any TypeScript at all. To add a little TypeScript support, it is possible to make the App-FunctionComponent of type React.FC (shortcut for React.FunctionComponent).

...
// Import React from "react"
import React from "react";

/**
 * Make the App of type React.FC. This will give your IDE the
 * access to auto completion functionality.
 * @constructor
 */
const App:React.FC<any> = () => {
...

With this little add-on, your IDE can now give you correct auto-completion. For example, WebStorm can now present the „display-name“ property when typing „App.“ and pressing control-space.