Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deepraining/react-app-starter
一个用于快速创建 React 项目的模板脚手架，使用 Webpack 与 Storybook 构建. A boilerplate for creating a React application, using Webpack and Storybook.
https://github.com/deepraining/react-app-starter
app boilerplate enzyme gulp jest react starter storybook webpack
Last synced: 30 days ago
JSON representation
一个用于快速创建 React 项目的模板脚手架，使用 Webpack 与 Storybook 构建. A boilerplate for creating a React application, using Webpack and Storybook.
- Host: GitHub
- URL: https://github.com/deepraining/react-app-starter
- Owner: deepraining
- License: mit
- Created: 2019-03-11T01:44:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-30T02:17:40.000Z (over 5 years ago)
- Last Synced: 2024-11-15T06:42:39.491Z (3 months ago)
- Topics: app, boilerplate, enzyme, gulp, jest, react, starter, storybook, webpack
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-app-starter
[中文文档](./README.md)
A boilerplate for creating a React application, using Webpack and Storybook.
## Getting started
```
git clone https://github.com/senntyou/react-app-starter.git --depth=1
cd react-app-starter
npm install # install dependencies
npm run storybook # develop components using storybook
```
## Features
- [less](http://lesscss.org/), [scss](https://sass-lang.com/) style languages support.
- [Flow](https://flow.org/) syntax, [jest](https://jestjs.io/en/) + [enzyme](https://github.com/airbnb/enzyme) test support.
- Using [storybook](https://storybook.js.org/) to develop, preview components.
## Main commands
### `dev`: start a local server to develop an entry
```
lila dev # SPA (global)
npx lila dev # SPA (local)
lila dev [entry] # multi-pages (global)
npx lila dev [entry] # multi-pages (local)
```
### `serve`: simulate a backend environment to start a local server to develop an entry
```
lila serve # SPA (global)
npx lila serve # SPA (local)
lila serve [entry] # multi-pages (global)
npx lila serve [entry] # multi-pages (local)
```
### `build`: pack source codes to production bundles
```
lila build # SPA (global)
npx lila build # SPA (local)
lila build [entry1] [entry2] ... # multi-pages (global)
npx lila build [entry1] [entry2] ... # multi-pages (local)
```
### `sync`: make production bundles, then sync to remote servers
```
lila sync # SPA (global)
npx lila sync # SPA (local)
lila sync [entry1] [entry2] ... # multi-pages (global)
npx lila sync [entry1] [entry2] ... # multi-pages (local)
```
### `start`: make production bundles, then start a local server to preview
```
lila start # SPA (global)
npx lila start # SPA (local)
lila start [entry] # multi-pages (global)
npx lila start [entry] # multi-pages (local)
```
### `analyze`: visualize size of webpack output files
```
lila analyze # SPA (global)
npx lila analyze # SPA (local)
lila analyze [entry] # multi-pages (global)
npx lila analyze [entry] # multi-pages (local)
```
## Project
```
- src # source files directory
- .storybook # for storybook
- stories # for storybook
```
### Structure of Single Page Application (SPA)
```
- src
- index.html # html entry file
- index.js # js entry file
- other files and directories
```
### Structure of multi pages application
```
- src
- page1 # entry: page1
- index.html # html entry file
- index.js # js entry file
- other files and directories
- module1
- page2 # entry: module1/page2
- index.html # html entry file
- index.js # js entry file
```
An entry has a standalone directory(`src/home/about/` if entry is `home/about`), also called workspace, and has at least a `index.html` file and a `index.js` file under the workspace.
## Custom webpack config
If you want to modify default webpack config, you can go to `scripts/lila-webpack-config` to modify them.
## Externals
This project use [lila](https://github.com/senntyou/lila) to develop and build. If you need to know more about:
- How to configure `lila.init.js`
- How to run `lila`
- What features `lila` have
go to [lila](https://github.com/senntyou/lila) to see more.
- [lila-bin](https://github.com/senntyou/lila/tree/master/packages/lila-bin): lila command line tool
- [lila-core](https://github.com/senntyou/lila/tree/master/packages/lila-core): lila core library
- [lila-tasks](https://github.com/senntyou/lila/tree/master/packages/lila-tasks): lila built-in tasks
- [lila-webpack](https://github.com/senntyou/lila/tree/master/packages/lila-webpack): wrapped webpack plugin
## Notes
- `.js` files only for pure JavaScript, and `.jsx` for React components.