33 <h3 align="center">Simple React Webpack Babel Starter Kit<br></h3>
44</p >
55
6- [ ![ CircleCI] ( https://circleci.com/gh/ReactJSResources/react-webpack-babel/tree/master.svg?style=svg )] ( https://circleci.com/gh/ReactJSResources/react-webpack-babel/tree/master )
7-
8- [ ![ Dependency Status] ( https://img.shields.io/david/ReactJSResources/react-webpack-babel.svg )] ( https://david-dm.org/dylang/npm-check )
9-
10- Tired of complicated starters with 200MB of dependencies which are hard to understand and modify? This is for you!
6+ <p >
7+ Tired of complicated starters with 200MB of dependencies which are hard to understand and modify? This is for you!
8+ This is a simple react application without redux, stylesheets or other set frameworks. It's only meant to get you started and the rest if up to you. Our goal for is to keep things simple and give you the freedom to select your own frameworks to add on top of this one.
9+ </p >
1110
12- ### What were using
11+ <div class =" center " >
12+ [ ![ CircleCI] ( https://circleci.com/gh/ReactJSResources/react-webpack-babel/tree/master.svg?style=svg )] ( https://circleci.com/gh/ReactJSResources/react-webpack-babel/tree/master )
1313
14- * React 16
15- * Webpack 3
16- * React Router 4
17- * SASS
18- * Babel Cli
19- * Hot Module Reloading
20- * Jest 21
21- * Enzyme 3 for testing
14+ [ ![ Dependency Status] ( https://img.shields.io/david/ReactJSResources/react-webpack-babel.svg )] ( https://david-dm.org/dylang/npm-check )
15+ </div >
2216
23- ### Features
17+ ### Demo
18+ https://murmuring-fjord-36537.herokuapp.com/
2419
25- * Simple src/index.jsx and src/index.css (local module css).
26- * Webpack configuration for development (with hot reloading) and production (with minification).
27- * CSS module loading, so you can include your css by ``` import styles from './path/to.css'; ``` .
28- * Both js(x) and css hot loaded during development.
29- * [ Webpack Dashboard Plugin] ( https://github.com/FormidableLabs/webpack-dashboard ) on dev server.
20+ ### Prerequisites
21+ * You'll need to have [ git] ( https://git-scm.com/ ) and [ node] ( https://nodejs.org/en/ ) installed in your system.
3022
3123### To run
32-
33- * You'll need to have [ git] ( https://git-scm.com/ ) and [ node] ( https://nodejs.org/en/ ) installed in your system.
3424* Fork and clone the project:
3525
3626```
@@ -45,84 +35,32 @@ npm install
4535
4636* Run development server:
4737
48- ```
49- npm start
50- ```
51-
52- * Or you can run development server with [ webpack-dashboard] ( https://github.com/FormidableLabs/webpack-dashboard ) :
53-
5438```
5539npm run dev
5640```
5741
58- Open the web browser to ` http://localhost:8888 / `
42+ Open the web browser to ` http://localhost:8080 / `
5943
6044### To test
6145To run unit tests:
6246
6347```
64- npm test
48+ npm run test
6549```
6650
67- Tests come bundled with:
68-
69- * Jest
70- * Enzyme
71- * React Test Utils
72- * React Test Renderer
73-
7451### To build the production package
75-
7652```
7753npm run build
7854```
7955
80- ### Running build locally
81-
82- ```
83- npm run serve:build
84- ```
85-
86- ### Nginx Config
87-
88- Here is an example Nginx config:
89-
90- ```
91- server {
92- # ... root and other options
93-
94- gzip on;
95- gzip_http_version 1.1;
96- gzip_types text/plain text/css text/xml application/javascript image/svg+xml;
97-
98- location / {
99- try_files $uri $uri/ /index.html;
100- }
101-
102- location ~ \.html?$ {
103- expires 1d;
104- }
105-
106- location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
107- access_log off;
108- log_not_found off;
109- expires max;
110- }
111- }
112- ```
113-
11456### Eslint
115- There is a ` .eslint.yaml ` config for eslint ready with React plugin.
57+ There is a ` .eslintrc.js ` config for eslint ready with React plugin.
11658
11759To run linting, run:
11860
11961```
12062npm run lint
12163```
12264
123- ### Notes on importing css styles
124- * styles having /src/ in their absolute path considered part of the application and exported as local css modules.
125- * other styles considered global styles used by components and included in the css bundle directly.
126-
12765### Contribute
12866Please contribute to the project if you know how to make it better, including this README :)
0 commit comments