mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-27 10:25:27 +01:00
Simplify build instructions in README
This commit is contained in:
parent
b38f70099b
commit
092ff674ab
1 changed files with 16 additions and 73 deletions
89
README.md
89
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 :)
|
||||
|
|
Loading…
Reference in a new issue