https://github.com/sormy/skeleton-react-ts
Webpack BrowserSync React Typescript LESS Bootstrap Semantic UI boilerplate / skeleton with Hot Reload and source maps
https://github.com/sormy/skeleton-react-ts
Last synced: 10 months ago
JSON representation
Webpack BrowserSync React Typescript LESS Bootstrap Semantic UI boilerplate / skeleton with Hot Reload and source maps
- Host: GitHub
- URL: https://github.com/sormy/skeleton-react-ts
- Owner: sormy
- License: mit
- Created: 2016-09-12T18:48:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-14T02:29:18.000Z (about 9 years ago)
- Last Synced: 2025-02-28T07:02:15.860Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 39.1 KB
- Stars: 10
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React TypeScript Skeleton #
## Installation ##
```shell
npm install
```
## Tasks ##
1. `npm run clean`: clean build `./dist`
2. `npm run build` or `npm run build:dev`: build debug development version in `./dist`
3. `npm run build:prod`: build debug minified production version in `./dist`
4. `npm run serve` or `npm run serve:dev`: build debug development version in `./dist` and serve it
5. `npm run serve:prod`: build debug minified production version in `./dist` and serve it
6. `npm run serve:hot` or `npm start`: serve debug development version with css/js hot reload
Production build is slightly different from development.
Production build has extra optimization to reduce build size and have only 2
chunks: `app` and `vendor`.
Development build has 3 chunks: `app`, `vendor` and css framework related chunk
(`bootstrap`, `semantic` etc) to test application theme separately.
## IDE ##
Recommended IDE is Visual Studio Code:
Required plugin set:
- EditorConfig for VS Code
- TSLint
- stylelint
- markdownlint
## Features ##
- React
- TypeScript
- TypeScript Runtime
- WebPack
- BrowserSync
- LESS/SCSS/SASS/Stylus
- Autoprefixer
- Bootstrap 3.x (DEFAULT)
- Bootstrap 4.x
- Semantic UI 2.x
- Foundation 6.x
- css/js/react hot reload
- debug builds with source maps
- separated vendor/app js and css code
- automatic asset bundling
- automatic source map fixer
- tslint
- less example
- scss example
- stylus example
TODO:
- markdownlint
- stylelint
- auto tests!!!
- inline styles in react with autoprefixing
- react router
- mobx or redux
- inline small assets into css
- es-next decorators
- es-next class properties
- postcss example
## CSS Frameworks ##
- Bootstrap 3.x (LESS) (DEFAULT)
- Bootstrap 4.x (SCSS)
- Semantic UI 2.x (LESS)
- Foundation 6.x (Stylus)
To install Bootstrap 4 and overwrite Bootstrap 3 you need to run:
```shell
npm install bootstrap@4.0.0-alpha.4 tether --save
```
Please note, Bootstrap 4 requires peer dependency `tether`.
To install Semantic UI you need to run:
```shell
npm install semantic-ui-less --save && node semantic-fix.js
```
To install Foundation you need to run:
```shell
npm install foundation --save
```
Please don't forget to fix `src/boot.tsx` to import css framework which you need.
### Bootstrap 3.x Customization ###
Library configuration is located here:
- `src/bootstrap/bootstrap.js`
- `src/bootstrap/bootstrap.less`
You could alter `bootstrap.js` and `bootstrap.less` to disable not needed components.
You could include overrides into `bootstrap.less` to tune theme.
To activate library you need to import `bootstrap.js` and `bootstrap.less` in main file.
### Bootstrap 4.x Customization ###
Library configuration is located here:
- `src/bootstrap/bootstrap.js`
- `src/bootstrap/bootstrap.scss`
You could alter `bootstrap.js` and `bootstrap.scss` to disable not needed components.
You could include overrides into `bootstrap.scss` to tune theme.
To activate library you need to import `bootstrap.js` and `bootstrap.scss` in main file.
### Semantic UI 2.x Customization ###
Library configuration is located here:
- `src/semantic/semantic.js`
- `src/semantic/semantic.less`
You could alter `semantic.js` and `semantic.less` to disable not needed components.
Theme configuration is located here: `src/semantic/theme.config`
Site theme is located here: `src/semantic/site`
Please follow official guidelines to override styles.
As example you could refer to `node_modules/semantic-ui/src/_site` structure and official
documentation .
To activate library you need to import `semantic.js` and `semantic.less` in main file.
### Foundation v6.x Customization ###
- `src/foundation/foundation.js`
- `src/foundation/foundation.styl`
You could alter `foundation.js` and `foundation.styl` to disable not needed components.
You could include overrides into `foundation.styl` to tune theme.
To activate library you need to import `foundation.js` and `foundation.styl` in main file.