Simplify build instructions in README

This commit is contained in:
lukasmartinelli 2016-09-08 19:57:35 +02:00
parent b38f70099b
commit 092ff674ab

View file

@ -1,86 +1,29 @@
# react-webpack-babel # Mapolo
Simple React Webpack Babel Starter Kit
Tired of complicated starters with 200MB of dependencies which are hard to understand and modify? A visual style editor for MapboxGL.
Try this is a simple [React](https://facebook.github.io/react/), [Webpack](http://webpack.github.io/) and [Babel](https://babeljs.io/) application with nothing else in it. ## Develop
### What's in it? Install the deps, start the dev server and open the web browser on `http://localhost:8888/`.
* Simple src/index.jsx and src/index.css (local module css). ```bash
* Webpack configuration for development (with hot reloading) and production (with minification). # install dependencies
* CSS module loading, so you can include your css by ```import styles from './path/to.css';```. npm install
* Both js(x) and css hot loaded during development. # start dev server
npm start
### To run
* You'll need to have [git](https://git-scm.com/) and [node](https://nodejs.org/en/) installed in your system.
* Fork and clone the project:
```
> $ git clone THIS_REPO_URL
``` ```
* Then install the dependencies: Build a production package for distribution.
``` ```
> $ npm install npm run build
``` ```
* Run development server: Lint the JavaScript code.
``` ```
> $ npm start # install lint dependencies
npm install --save-dev eslint eslint-plugin-react
# run linter
npm run lint
``` ```
Open the web browser to `http://localhost:8888/`
### To build production package
```
> $ npm run build
```
### Nginx Config
Here is the suggested Nginx config:
```
server {
# ... root and other options
gzip on;
gzip_http_version 1.1;
gzip_types text/plain text/css text/xml application/javascript image/svg+xml;
location ~ \.html?$ {
expires 1d;
}
location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
access_log off;
log_not_found off;
expires max;
}
}
```
### Eslint
There is a .eslint.yaml config for eslint ready with React plugin.
To use it, you need to install additional dependencies though:
```
> npm install --save-dev eslint eslint-plugin-react
```
To do the actual linting, run:
```
> npm run lint
```
### Notes on importing css styles
* styles having /src/ in their absolute path are considered part of the application and exported as local css modules.
* styles having /node_modules|global/ in their absolute path are considered global styles used by many components and are included in the css bundle directly.
### Contribute
Please contribute to the project if you think this can be done better in anyway even for this README :)