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
Simple React Webpack Babel Starter Kit
# Mapolo
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).
* Webpack configuration for development (with hot reloading) and production (with minification).
* CSS module loading, so you can include your css by ```import styles from './path/to.css';```.
* Both js(x) and css hot loaded during development.
### 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
```bash
# install dependencies
npm install
# start dev server
npm start
```
* 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 :)