Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/comnori/vite-template-awesome-soho

Vite React App Template - for SOHO
https://github.com/comnori/vite-template-awesome-soho

ant-design devcontainer i18next-react react react-router-v6 redux-toolkit sass template typescript vite vitest yarn-berry

Last synced: about 2 months ago
JSON representation

Vite React App Template - for SOHO

Host: GitHub
URL: https://github.com/comnori/vite-template-awesome-soho
Owner: comnori
License: mit
Created: 2023-11-09T06:36:45.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-01-26T10:20:36.000Z (4 months ago)
Last Synced: 2024-04-08T22:54:56.949Z (about 2 months ago)
Topics: ant-design, devcontainer, i18next-react, react, react-router-v6, redux-toolkit, sass, template, typescript, vite, vitest, yarn-berry
Language: JavaScript
Homepage:
Size: 119 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 5
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Lists

awesome-vite - vite-template-awesome-soho - `DevContainer` Template for creating `React 18`, `Javascript + JSDoc`, `React Router`, `Ant Design`, `ESLint`, `EditorConfig`, `.env`, `SonarLint`, `Vitest`. (Get Started / Templates)
cra-template-awesome-soho - vite-template

README

Vite React Template for SOHO

React template in javascript/Typesciprt base using vite

[![Visitors](https://api.visitorbadge.io/api/combined?path=https%3A%2F%2Fgithub.com%2Fcomnori%2Fvite-template-awesome-soho%2F&countColor=%23263759)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Fcomnori%2Fvite-template-awesome-soho%2F)

### Features

1. Using Nextgeneration Frontend tool (Vite / yarn berry)
2. Freedom of choice of language
- ECMAScript (javascript)
- [ECMAScript with JsDoc typecheck](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html)
- Typescript
3. Collaboration between library and vscode extension
4. Well-defined folder structure
5. Document Automation
6. [Light, Dark] theme changer
7. Multilingual support
8. IDE environment integration
9. No need to setting for develop environment

### Browser Support

| ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png) |
| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

## Installation

1. Install `Dev Containers` extension
2. Download template

```bash
npx degit comnori/vite-template-awesome-soho my-app
```

3. git initialization

```bash
git init
```

### Main Library

### Language

### Created by

### Library

### Dev tools

### Src Folder structure

```ascii
Project
├── assets // like svg
├── components // atomic design
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ └── templates
├── config // project configuration
│ ├── i18n // i18next resource
│ │ ├── {lang} // ISO 639-1 Language Code [en,...,ko]
│ │ │ └── translation.json
│ ├── MenuItems.js
│ └── Router.js
├── context // React Context
│ └── {context name} // Context domain name
│ ├── components // Context related components
│ └── hooks // Context related hooks
├── features // Redux
│ └── {reducer name}
├── hooks // common hooks
├── lib // Library configuration
│ ├── components
│ └── {library name}Config.js
├── pages // Pages
│ ├── {domain}
│ │ ├── {page}
│ ├── {page}
│ │ ├── components // children for page
│ │ ├── {page}.jsx
│ │ ├── {page}.module.scss // module scss
└── utils // common utils

```

## Project configuration

### Javascript Type check enable or disable

1. Enable(true) / Disable(false)

`tsconfig.json`

```json
{
...
"checkJs": true,
...
}
```

2. Optionnal

If you want to apply or not apply type check to only some parts, check the guide below.

[JS Projects Utilizing TypeScript](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#ts-check)

3. Using typescript

### Router

`src/config/Router.js`

### MenuItems

`src/config/Menu.js`

### JsDoc generation

```bash
yarn doc
```

`doc` folder created

### declaration export

```bash
yarn type
```

`type` folder created

## Library configuration

### Theme Config

1. Ant Design Default theme

The initial theme acts as the system's theme setting.

2. Ant Design Customize theme

To modify the Antd Theme, set the designToken according to the [Ant Design Customize Theme guide](https://ant.design/docs/react/customize-theme).

`src/lib/themeConfig.js`

```js
const themeConfig = {
themeName: getSystemCurrentTheme,
designToken: {
components: {
Layout: {
headerHeight: 64,
},
},
},
componentSize: "middle",
};
```

## Working

- [ ] JSDoc to typedoc
- [x] Vitest
- [ ] Storybook
- [ ] Cypress