electron-forge setting up paths in tsconfig

Recently I looked at the Electron library and after that I started to look what are the ways to write an application on it using react. From that list I settled on electron-forge. How to put typescript into your project is described on electron-forge (as long as there is a list of links, no problem, everything goes transparently and clearly, right?) I had a problem — reference paths in tsconfig were not winding up. That’s how it was solved.
I have the following directory structure:

The client directory contains scripts related to the react-application: components, router, etc. And I would like to import components not like this: import Logo from '.../.../components/Logo' but more beautiful: import Logo from '@clients/components/Logo'.
The first step is to configure tsconfig:

"baseUrl": "./",
"paths": {
      "@/*": [
        "src/*"
      ],
      "@client/*": [
        "src/client/*"
      ]
},

Enter fullscreen mode Exit fullscreen mode

This is followed by a second step: configure webpack to make it understand these paths too. This is done in two files:
webpack.main.config.js

const path = require('path');

function srcPaths(src) {
  return path.join(__dirname, src);
}

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/index.ts',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    alias: {
      '@': srcPaths('src'),
      '@client': srcPaths('src/client'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
  },
};

Enter fullscreen mode Exit fullscreen mode

webpack.renderer.config.js
You need to add the exact same setting:

  resolve: {
    alias: {
      '@': srcPaths('src'),
      '@client': srcPaths('src/client'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },

Enter fullscreen mode Exit fullscreen mode

Well, that’s it: the goal is achieved, the shortened path names work as I’d like them to.
I’m glad if anybody could use this note.

electron-forge setting up paths in tsconfig

Рекомендуем почитать: