https://github.com/frojd/react-sass-starterkit
A slim webpack starterkit and devserver. Includes react, sass and a small cli for scaffolding components fast.
https://github.com/frojd/react-sass-starterkit
Last synced: 8 months ago
JSON representation
A slim webpack starterkit and devserver. Includes react, sass and a small cli for scaffolding components fast.
- Host: GitHub
- URL: https://github.com/frojd/react-sass-starterkit
- Owner: Frojd
- Created: 2016-10-22T13:56:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T15:16:15.000Z (about 3 years ago)
- Last Synced: 2024-04-15T02:44:28.376Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 2.3 MB
- Stars: 9
- Watchers: 4
- Forks: 5
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React sass starterkit #
This is an opinionated frontend development kit.
It includes a small scaffolder for react components and is exporting a bundle with a global variable named Components
## Installation ##
1. npm install
2. npm run scaffold
3. npm start
This will create a base set of containers and components in the app folder that you can work with and start the devserver at [http://localhost:7000](http://localhost:7000).
Alternativly you can use storybook instead for developing by running:
`npm run storybook`
## CLI commands ##
### Devserver ###
Start the devserver:
```
npm start
```
Start the devserver with a different port:
```
npm start -- --port 7777
```
Start the devserver as a hot proxy:
```
npm start -- --proxy http://proxydomain.com
```
### Creation commands ###
Create a new component:
```
npm run new ComponentName
```
Create a container component:
```
npm run new ComponentName -- -c
```
Delete a component:
```
npm run delete ComponentName
```
Delete a container component:
```
npm run delete ComponentName -- c
```
Run tests:
```
npm test
```
Update test snapshots (if added):
```
npm test -- -u
```
Scaffold an example project:
```
npm run scaffold
```
Scaffold an empty project:
```
npm run scaffold -- -e
```
Code formatting via prettier:
```
npm run fixcode
```
To only test that all files are formated correct:
```
npm run fixcode:test
```
Codechecking via eslint:
```
npm run eslint
```
Autofix via eslint:
```
npm run eslint:fix
```
### Additional commands and troubleshooting ###
To run webpack analyzer to check your bundle and packagesizes you can append --analyze to a command
```
npm start -- --analyze
npm run build -- --analyze
npm run build:prod -- --analyze
```