Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patrickniyogitare28/super-vite
⚡ A vite react typescript boilerplate with pre-configured sass, redux-tool-kit, tailwind, eslint, prettier & jest, i18n internalization, Dockerfile... built in cli coming soon ⚒️
https://github.com/patrickniyogitare28/super-vite
boilerplate dockerfile eslint i18n jest-test prettier-eslint react redux-devtools sass-framework tailwindcss typescript vitejs
Last synced: 22 days ago
JSON representation
⚡ A vite react typescript boilerplate with pre-configured sass, redux-tool-kit, tailwind, eslint, prettier & jest, i18n internalization, Dockerfile... built in cli coming soon ⚒️
- Host: GitHub
- URL: https://github.com/patrickniyogitare28/super-vite
- Owner: PatrickNiyogitare28
- License: mit
- Created: 2021-11-14T18:20:05.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-17T20:27:37.000Z (about 2 months ago)
- Last Synced: 2024-10-15T16:21:26.161Z (22 days ago)
- Topics: boilerplate, dockerfile, eslint, i18n, jest-test, prettier-eslint, react, redux-devtools, sass-framework, tailwindcss, typescript, vitejs
- Language: TypeScript
- Homepage: https://doc-super-vite.vercel.app/
- Size: 1.54 MB
- Stars: 21
- Watchers: 2
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Super Vite ⚡
A vite react typescript boilerplate with pre-configured sass, redux-tool-kit, tailwind, esLint Prettier, i18n internationalization & Dockerfile... built in cli coming soon ⚒️
This to get you ready with react vite develpment with zero configurations
## Documentation
Click to access [The super vite documentation](https://doc-super-vite.vercel.app/)
## Live demo
Click to view [The super vite live demo](https://super-vite.vercel.app/)
## Getting started
Click `Use this template` to create the your own repo from the template
Before you can start developing your awesome application you need to install the project's dependencies. Make sure you have Node (>= 10.13.0)
### Development
Once all dependencies have been installed you can start development. To start a development server on [http://localhost:3000](http://localhost:3000) run:
```sh
$ npm run dev
```
or
```sh
$ yarn dev
```
### Production
To run your application in production make sure to run a build first:
```sh
$ npm run build
```
or
```sh
$ yarn build
```
And then start you application with a provided port number (defaults to 3000 if not provided):
```sh
$ PORT=8080 npm run start
```
This will render static HTML pages into `./out`
### Linters
The boilerplate provides a couple of linters to help you keep an eye on code consistency and type safety. There are three linters: one for CSS, one for TypeScript and one for type safety. You can use each of them separately using the following commands:
```sh
$ npm run lint:css
$ npm run lint:ts
$ npm run lint:types
```
TIP: To get the most out of your linters install the corresponding (Stylelint, TSLint) plugins for your editor or IDE
**Prettier**
Prettier helps you to enforce consistent (opinionated) code style. If possible, you can tell your editor to format you code when you save a file. If you are not able to do this, you can run prettier manually using:
```sh
$ npm run prettier
```
### Tests
You can write your tests using Jest and Enzyme. You can run all test with the following command
```sh
$ npm run test
```
> To write your unite tests, add a test file under `src/__tests__`
## Routing
Routes are defined under `src/config/routes`
```js
{
path: '/',
name: 'Counter Page',
component: Counter,
exact: true,
},
```
That object should be added in `routes` array, and that's all to be able to route.
## Modules
### TypeScript
Vite provides custom module resolvers.
This means you can use absolute imports with custom namespaces by default for the following modules:
You can define a new alias resolver in `vite.config.json` & `config-overrides.js`
For the jest to be able to recogonize the alias import, you should also define it under `jest.config.json`
```js
/* import common library */
import lib from '@common//'
/* import component */
import Counter from '@components/counter'
/* import views/pages */
import CounterView from '@views/counter'
/* import interface */
import ICounterAction from '@interfaces/ICounterActionCounter'
/* import enum */
import ECounterEventType from '@enums/ECounterEventType'
/* import layout */
import DashboardLayout from '@layouts/DashboardLayout'
/* import assets */
import GithubIcon from '@assets/icons/github.png'
/* import enum */
import ECounterEventType from '@interfaces/ECounterEventType'
```
### SCSS
The boiler plate supports scss and css module
```js
/*.tsx*/
import { classNames } from 'classnames-generics'
import styles from './styles.module.scss'
return (
Scss styling
)
```
```css
/*.scss*/
.appContainer{
width: 100%;
.wrapper{
background: #ffe1ee;
}
}
```
### Tailwind
```js
/*.tsx*/
...
return (
Scss styling
)
```
### Redux dev tool
The boiler plate has a configured global state management with redux dev tool.
### Getting started with states
- Define a state slice under `src/redux-slices` refer to `src/redux-slice/counter.slice.ts`
- Import the slice under `src/store` and declare your reducer
- To consume the state refer to `src/components/counter`
```js
import React from 'react'
import { useAppDispatch, useAppSelector } from '@store/hooks'
import {
selectCount,
decrement,
increment,
reset,
} from '@redux-slices/counter.slice'
import { ECounterEventType } from '@enums/ECounterEventType'
import styles from './styles.module.scss'
const CounterComponent = () => {
const dispatch: any = useAppDispatch()
const value: number = useAppSelector(selectCount)
const handleAction = (action: ECounterEventType) => {
switch (action) {
case ECounterEventType.DECREMENT:
dispatch(decrement())
break
case ECounterEventType.INCREMENT:
dispatch(increment())
break
case ECounterEventType.RESET:
dispatch(reset())
break
}
}
return (
Counter: {value}
handleAction(ECounterEventType.INCREMENT)
}
>
+
handleAction(ECounterEventType.DECREMENT)
}
>
-
handleAction(ECounterEventType.RESET)}
>
Reset
)
}
export default CounterComponent
```
### Todo
The boiler plate incomming version will container a build in CLI to auto generate `components` and `views` plus connecting them to `store`
### LICENSE
[MIT LICENSED](https://github.com/PatrickNiyogitare28/super-vite/blob/master/LICENSE)
#### Maintainers
- [email protected]