PavithMadusara/typeorm-on-electron-renderer.md

## typeorm-on-electron-renderer.md

      
    Raw
  

              typeorm-on-electron-renderer.md
            
          
    Generate with Electron Forge

yarn create electron-app app-name --template=typescript-webpack
Add React,Typeorm,sqlite3 and AntD

yarn add react react-dom react-router-dom antd typeorm sqlite3 reflect-metadata
Add Dev Dependencies

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react @types/react @types/react-dom @types/react-router-dom postcss postcss-loader babel-loader file-loader mini-css-extract-plugin
Add TailwindCSS

"devDependencies": {
  ...
  "autoprefixer": "^9",
  "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
}

Create .babelrc File

{"presets": ["@babel/preset-env", "@babel/preset-react"]}
Generate Tailwind Config

npx tailwind init --full
Create postcss.config.js File

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer')
    ],
};

Add JPG and PNG Support index.d.ts

declare module '*.jpg';
declare module '*.png';

Update tsconfig.json

"compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "jsx": "react"
    ...
}
"include": [
    "src/**/*",
    "index.d.ts"
]

Update webpack.plugins.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = [
    new ForkTsCheckerWebpackPlugin(),
    new MiniCssExtractPlugin({
        filename: "styles.css"
    }),
];

Update webpack.renderer.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules.push(
    {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
            {
                loader: 'file-loader',
            },
        ],
    },
    {
        test: /\.css$/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader
            },
            'css-loader',
            'postcss-loader'
        ]
    }
);

module.exports = {
    ...
    externals: {
        typeorm: 'commonjs typeorm',
        sqlite3: 'commonjs sqlite3'
    }
};

Update webpack.rules.js

    {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
            loader: "babel-loader"
        }
    },
    {
        test: /\.json$/,
        loader: 'json-loader'
    }

Update index.html

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Hello</title>

</head>
<body>
<div id="root"></div>
</body>
</html>

Update renderer.ts to renderer.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './app/App';

console.log('Loaded React.');
ReactDOM.render(<App/>, document.getElementById('root'),
);

Update package.json

"config":{
  "forge":{
    "plugins":[
      [
        "renderer":{
          "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.tsx",
                  "name": "main_window"
                }
          ]
        }
      ]
    ]
  } 
}

Create src/app/styles/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Import Css to App Components (Root)

import 'antd/dist/antd.css';
import './styles/index.css';

Create TypeORM Connection

useEffect(() => {
        createConnection({
            type: 'sqlite',
            logging: true,
            synchronize: true,
            database: 'database.sqlite',
            entities: [Student],
        }).then(() => {
            console.log('TypeORM Connection Created');
        }).catch(reason => {
            console.log(reason);
        });

    }, []);

import {Column, Entity, PrimaryColumn} from 'typeorm';

@Entity('student')
export class Student {
    @PrimaryColumn()
    id: number;

    @Column()
    firstName: string;

    @Column()
    lastName: string;
}

Enable Node Intergration index.ts

  // Create the browser window.
  const mainWindow = new BrowserWindow({
    ...
    webPreferences: {
      nodeIntegration: true,
    },
  });

Let's 🏃‍♂️🏃‍♀️ yarn start