How to run eslint in Terminal / Shell

npm install && npm i -g eslint && npx eslint --ext .tsx --ext .ts ./

Please heed that npm install is used here to start my React application, which uses it as a build tool. IMportant

npm i -g eslint will install eslint, if it does not exist yet (for example a CI with Jenkins).

The npx eventually executes eslint for all files with ending .tsx or .ts recursively in the current directory. Please adapt the endings according to your needs – when you do not use TypeScript but JavaScript change it to .js

How to check Typescript Code with ESLint in IntelliJ or Webstorm

In your package.json add this example config:

 "eslintConfig": {
    "parserOptions": {
      "parser": "babel-eslint",
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "es6": true
    },
    "globals": {
      "Vue": true
    },
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint"
    ],
    "extends": [
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "quotes": [
        "error",
        "double",
        {
          "avoidEscape": true
        }
      ],
      "comma-dangle": [
        "error",
        {
          "arrays": "ignore",
          "objects": "always-multiline",
          "imports": "never",
          "exports": "never",
          "functions": "ignore"
        }
      ],
      "arrow-parens": 0,
      "no-tabs": 0,
      "indent": [
        "error",
        "tab",
        {
          "SwitchCase": 1
        }
      ],
      "no-console": 1,
      "generator-star-spacing": 0
    }
  }

In your IDE terminal, execute:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

In IntelliJ settings, add:

From now on, when you open your .ts or .tsx files, the ESLint will detect the errors.

You can open the context menu then, by clicking the right mouse tab and click on „Fix ESlint Problems“.

IntelliJ will then automatically fix the problems.

How to create an NPM Package

You want reusable components, elements? Flexible structure?
Separation of concerns, decoupling in your JS Code?

A good strategy is to create an NPM Package.

  • Identify the code you would like to decouple.
  • create a new project
  • create an src folder
  • paste the JS or TS files in that folder
  • install the missing dependencies like Typescript, TSlint, Material UI
  • Write UNIT Tests to test your code before publishing it

I use JEST and to include the relevant Code, add this to your tsconfig.json:

    "include": ["src/**/*"],
    "exclude": ["node_modules", "**/__tests__/*"] 

Before the package is published, you can test it locally:

  • In your terminal, run npm link
  • This will compile and create a symbolic link, pointing to another directory/files on your development machine.
  • Now include the new package as a dependency. In your terminal, run npm link <module_name>
  • If everything can be imported and used, the test work and you are satisfied, perform npm unlink --nosave <module_name> on your main projects directory. This will remove the symbolic link.
  • Then run npm unlink to also remove the global link.

Now you have extracted and published Code as NPM package.

Test Mobile Devices with Chrome Devtools – Howto

Press F12 or just open Chrome Dev Tools.
Click on the Toggle Device Icon (marked in blue).

In your browser window, you will see this resolution modifyier:

Modify according to your needs to test different screen resolutions.

NOTE: Screen Resolution CANNOT be simulated by changing the browser window size 😉

Multiple Webapps with Docker Compose

  • Learn how to setup a custom network for your containers: container A talks to container B
  • Learn how to run multiple webapps inside Docker containers on different ports with Docker Compose

Download complete source code here

  • Create the network with $docker network create skynet
  • Run with $docker-compose up
  • Stop with $<Ctrl + C>
  • Clean up from time to time (beware, network will be deleted as well) with $docker system prune -a -f
  • access via http://localhost:8080/sample
  • access via http://localhost:8081/sample

How to debug a React Application in Webstorm

In Webstorm, start your application. I prefer the command line:
$ npm start

Then create a new JavaScript debug configuration:

Run – Edit configurations … add JavaScript Debug.

Choose your project path (because we are Harder IT Consulting, our nickname is HIT – C:\HIT\<application>)

Paste the URL http://localhost:3000 (or the URL you have configured your React Application to run on, 3000 is the default).

In the Terminal, type $npm start
When the application is started, start the Debugging:

Press the DEBUG button at the top right corner with your Debug configuration selected.

Do not forget the React Devtools which come in quite handy. They exist for Chrome, Firefox and Edge. Chrome is https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi