mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-27 10:15:24 +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
|
# 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 :)
|
|
||||||
|
|
Loading…
Reference in a new issue