From 092ff674ab9cef4375ab197f07c81a399da67164 Mon Sep 17 00:00:00 2001 From: lukasmartinelli Date: Thu, 8 Sep 2016 19:57:35 +0200 Subject: [PATCH] Simplify build instructions in README --- README.md | 89 ++++++++++--------------------------------------------- 1 file changed, 16 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index 02d9ff9..5af4515 100644 --- a/README.md +++ b/README.md @@ -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 :)