electron-typescript-react-tailwind-redux - GitLite

KO | EN

gitlite — search

#html #gpt #sql #framework #automation #computer-vision #docker #mysql #css #terminal

electron-typescript-react-tailwind-redux

(★ 47)

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

File Explorer

ZIP Download

- - 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

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`git clone`

View Details ▼

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`

View Details ▼

JavaScript and Node.js package manager alternative.

yarn global add {{module_name}}

Install a module globally:

yarn install

Install all dependencies referenced in the `package.json` file (the `install` is optional):

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

Install a module and save it as a dependency to the `package.json` file (add `--dev` to save as a dev dependency):

// 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/)