electron-typescript-react-tailwind-redux - GitLite

KO | EN

gitlite — search

#open-source #rag #macos #security #artificial-intelligence #agent #cpp #kotlin #devops #generative-ai

electron-typescript-react-tailwind-redux

(★ 47)

An Electron boilerplate featuring typescript, react, webpack, tailwind and redux - ready to use!

파일 탐색기

ZIP 다운로드

- - pre-commit
- forge.config.js
- postcss.config.js
- webpack.main.config.js
- webpack.main.plugins.js
- webpack.renderer.config.js
- webpack.renderer.plugins.js
- webpack.rules.js
- - OpenSans-Regular.ttf
- - react.svg
  - test.svg
- - loading.gif
  - source.png
- assets.d.ts
- - main.ts
- - App.tsx
  - index.css
  - index.html
  - Routes.tsx
- main.ts
- preload.ts
- renderer.ts
.editorconfig
.eslintignore
.eslintrc
.gitignore
env.example
LICENSE
package.json
README.md
tailwind.config.js
tsconfig.json
yarn.lock

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`git clone`

설명 보기 ▼

Clone an existing repository.

git clone {{remote_repository_location}} {{path/to/directory}}

Clone an existing repository into a new directory (the default directory is the repository name):

git clone --recursive {{remote_repository_location}}

Clone an existing repository and its submodules:

git clone {{[-n|--no-checkout]}} {{remote_repository_location}}

Clone only the `.git` directory of an existing repository:

🔍

`yarn`

설명 보기 ▼

JavaScript 및 Node.js 패키지 대체 관리자.
더 많은 정보: <https://yarnpkg.com/cli>.

yarn global add {{module_name}}

전역적으로 모듈 설치:

yarn install

`package.json` 파일에 참조된 모든 의존성을 설치 ( `install`은 선택 사항입니다):

yarn add {{module_name}}@{{version}}

모듈을 설치하고 `package.json` 파일에 대한 의존성으로 저장 (개발 전용 의존성으로 추가하려면 `--dev` 추가):

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> A secure, modular, and easy to use [Electron Forge](https://www.electronforge.io/) boilerplate featuring [Typescript](https://www.typescriptlang.org/), [React](https://reactjs.org/), [Webpack](https://webpack.js.org/), [TailwindCSS](https://tailwindcss.com/), [Redux](https://redux.js.org/) and [persistance](https://github.com/saucesteals/electron-persist-secure) (with [redux-persist](https://github.com/rt2zz/redux-persist) support)

---

### **Installation**

Clone the repository locally with **none** of its git history

```sh
$ git clone --depth 1 --single-branch https://github.com/saucesteals/electron-typescript-react-tailwind-redux.git your-project-name

$ cd your-project-name

$ yarn
```

### **OR**

Generate a GitHub repository with the [Use this template](https://github.com/saucesteals/electron-typescript-react-tailwind-redux/generate) button above

```sh
$ git clone https://github.com/your-username/your-project-name

$ cd your-project-name

$ yarn
```

---

### **Starting Development**

Start the app in the `dev` environment:

```sh
yarn start
```

---

### **Packaging for Production**

To package apps into a local executable:

- Personalize the forge **maker** configs at `/.config/forge.config.js`

```sh
yarn make:win
# yarn make:mac
# yarn make:linux
```

---

### **Releasing with GitHub**

1. Copy the contents of `env.example` to `.env` (Copy into a blank one if you dont already have one)
2. Set your `GH_TOKEN`
3. Personalize the forge **publisher** configs at `/.config/forge.config.js`

```sh
yarn publish:win
# yarn publish:mac
# yarn publish:linux
```

---

### **Platform-Specifc Icon Generation**

1. Ensure that you have a high quality `source.png` icon in your `/assets/package` folder
2. Run:

```sh
yarn create-icons
```

3. Check your new icons in `/assets/package/icons`

---

### **Folder Structure**

```sh
- /.config
  ... # development config files

- /assets
  - /package # static assets for packaging (ex. installer logo)
    - /icons # icons for all platforms you wish to package for

- source.png  # the source image for all package icons
                  # used to auto-generate all platform icons

...      # extra assets (ex. installer loading gif)

- /icons  # icons for your backend/frontend

- /fonts  # fonts for your frontend

...       # add on as u go (ex. /wallpapers)

- /src
  - /bridges
    index.ts # main contextBridges

... # add on bridges in other files or include them in index.ts
        # make sure to import any new bridge files in the preload

- /app # backend code
    - /ipc # ipcRenderer -> ipcMain listeners
      - main.ts # main functionality ipc listeners
                # ex. quit/hide

...       # add on as u go
                # make sure to add imports to new ipc files
                # in the main electron entry

- /render # frontend code
    - /containters # Containers per routes
      - /HomePage # HomePage containters

- /components # Components

- /redux # Everything redux

- Routes.tsx # react-router routes

- App.tsx # Export entire app with routes components
              # and redux provider if you are using it

-

main.ts # main "backend" electron entry

renderer.ts # main "frontend" electron renderer entry

preload.ts # main "entry to frontend" electron preload entry

```

---

### **Contributing**

When contributing to this repository, please first discuss the change you wish to make via an issue.

1. Fork the Project
2. Create your Feature Branch (**git checkout -b feature/AmazingFeature**)
3. Commit your Changes (**yarn commit**)
4. Push to the Branch (**git push origin feature/AmazingFeature**)
5. Open a Pull Request and leave some comments!

---

### **Maintainers**

- [Noah (wadu)](https://github.com/fourwadu/)
- [Daniel (sauce)](https://github.com/saucesteals/)