https://github.com/languagexange/electron-react-ts-tailwind

Electron, React ,TailwindCSS, react-router-dom, Typescript, Webpack ( built with electron forge template
https://github.com/languagexange/electron-react-ts-tailwind

electron ipc postcss-loader react react-router-dom taildwindcss typescript webpack

Last synced: about 1 month ago
JSON representation

Electron, React ,TailwindCSS, react-router-dom, Typescript, Webpack ( built with electron forge template

• Host: GitHub
• URL: https://github.com/languagexange/electron-react-ts-tailwind
• Owner: LanguageXange
• Created: 2024-10-13T14:07:34.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-10-27T15:16:25.000Z (7 months ago)
• Last Synced: 2025-03-27T12:04:03.761Z (about 2 months ago)
• Topics: electron, ipc, postcss-loader, react, react-router-dom, taildwindcss, typescript, webpack
• Language: TypeScript
• Homepage:
• Size: 2.57 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Stacks

React, Webpack + TS ( Electron Forge Template), React Router Dom, TailwindCSS, Mantine UI, react query, zod

react hook form, react i18

React Flow, Konva, openCV

## Tool - Electron Forge

https://www.electronforge.io/guides/framework-integration/react-with-typescript

## CLI

`yarn create electron-app woohoo --template=webpack-typescript`

`yarn` ( make sure to create `.yarnrc.yml` and add `nodeLinker: node-modules` if you don't see node_modules )

`yarn add react react-dom`

`yarn add -D @types/react @types/react-dom`

make sure to update `tsconfig.json`

`"jsx": "react-jsx”`

`webpack.main.config.ts`

update the entry to `./src/main.ts`

https://tailwindcss.com/docs/installation/using-postcss

`yarn add -D tailwindcss postcss autoprefixer postcss-loader`

`yarn tailwindcss init`

`yarn start`

Add this in `webpack.rules.ts`

```jsx

 {

    test: /\.css$/,

    use: [

      { loader: "style-loader" },

      { loader: "css-loader" },

      {

        loader: "postcss-loader",

        options: {

          postcssOptions: {

            plugins: [require("tailwindcss"), require("autoprefixer")],

          },

        },

      },

    ],

  },

```

## Mantine UI

https://mantine.dev/getting-started/

`yarn add @mantine/core @mantine/hooks @mantine/notifications @mantine/dropzone @mantine/modals`

`yarn add --dev postcss-preset-mantine postcss-simple-vars`

react hook form

`yarn add react-hook-form` for resolver need to add resolver library! TO DO

## i18n

https://github.com/shawnbanasick/electron-react-i18n-boilerplate

`yarn add react-i18next i18next i18next-browser-languagedetector i18next-electron-fs-backend i18next-fs-backend i18next-resources-to-backend`

`i18next-electron-fs-backend i18next-fs-backend` might not need these ?

set up locales inside `src`

in `i18n.ts`

```

  .use(

    resourcesToBackend(

      (language, namespace) =>

        import(`../locales/${language}/${namespace}.json`)

    )

  )

```

remember to import i18n.ts in `index.tsx`