You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+65-17Lines changed: 65 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,38 @@
1
-
# universal-react-redux
1
+
# Universal React Redux Boilerplate
2
2
3
3
A universal React/Redux boilerplate with sensible defaults. Out of the box, this
4
4
boilerplate comes with:
5
5
6
6
- Server-side rendering with Express
7
-
- Code splitting with Webpack's dynamic `import()`s and [react-loadable](https://github.com/thejameskyle/react-loadable)
7
+
- Code splitting with [dynamic imports](https://webpack.js.org/guides/code-splitting/#dynamic-imports) and [react-loadable](https://github.com/thejameskyle/react-loadable)
8
8
- Sane [webpack configurations](webpack/)
9
-
- JS hot reloading with `react-hot-loader`and `webpack-dev-server`
10
-
- CSS, SASS and `css-modules` support with hot reloading and no [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) (`css-hot-loader`)
11
-
- Routing with `react-router-v4`
9
+
- JS hot reloading with [react-hot-loader (@next)](https://github.com/gaearon/react-hot-loader)and [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
10
+
- CSS, SASS and [css-modules](https://github.com/css-modules/css-modules) support with hot reloading and no [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) ([css-hot-loader](https://github.com/shepherdwind/css-hot-loader))
11
+
- Routing with [react-router-v4](https://github.com/ReactTraining/react-router)
12
12
- Full production builds that do not rely on `babel-node`.
13
13
14
-
## Get started
14
+
## Philosophy
15
+
16
+
The JavaScript ecosystem is brimming with open source libraries. With advances
17
+
in ES6 and commitments by the big tech companies to invest in JavaScript, the
18
+
last several years have arguably turned web development into what was once a
19
+
huge pain in the ass, to a pretty decently enjoyable experience.
20
+
21
+
With so many different packages now available, we now have the freedom and the
22
+
choice to craft applications to our exact specifications, reducing bloat and
23
+
minimizing the number of code we need to support cross-platform apps. It really
24
+
is a new world.
25
+
26
+
However, with so many different developers working on different libraries,
27
+
things are constantly in flux, and breaking changes are often introduced. It can
28
+
be hard to keep up with the latest and greatest since they're always changing.
29
+
30
+
To help alleviate this, we've collected some of the best practices and features
31
+
from the React ecosystem and put them in one place. Although this boilerplate is
32
+
fully production-capable as is, its main goal is to serve as an example of how
33
+
to bring an application together using the latest tools in the ecosystem.
34
+
35
+
## Development Mode
15
36
16
37
Copy environment variables and edit them if necessary:
17
38
@@ -28,45 +49,72 @@ npm start
28
49
29
50
Direct your browser to `http://localhost:3000`.
30
51
31
-
For production builds:
52
+
## Production Builds
53
+
54
+
Add environment variables the way you normally would on your production system.
32
55
33
56
```
34
57
npm run prod:build
35
58
npm run serve
36
59
```
37
60
38
-
Or simply
61
+
Or simply:
39
62
40
63
```
41
64
npm run prod
42
65
```
43
66
44
-
For Heroku, simply add a `Procfile`:
67
+
If using Heroku, simply add a `Procfile` in the root directory. The
68
+
[postinstall](postinstall.js) script will do the rest.
45
69
46
70
```
47
71
web: npm run serve
48
72
```
49
73
74
+
## Environment Variables
75
+
76
+
In development mode, environment variables are loaded by `dotenv` off the `.env`
77
+
file in your root directory. In production, you'll have to manage these
78
+
yourself.
79
+
80
+
An example with Heroku:
81
+
82
+
```
83
+
heroku config:set FOO=bar
84
+
```
85
+
50
86
## CSS Modules
51
87
52
88
This project uses [CSS Modules](https://github.com/css-modules/css-modules).
53
-
Class names should be in `camelCase`. Place the css file as a sibling to the
54
-
component with the same name, for example:
89
+
Class names should be in `camelCase`. Simply import the .scss file into your
90
+
component, for example:
55
91
56
92
```
57
93
├── components
58
94
│ ├── Header.js
59
95
│ ├── Header.scss
60
96
```
61
97
62
-
## Environment Variables
63
-
64
-
In development mode, environment variables are loaded by `dotenv` off the `.env`
65
-
file in your root directory. In production, you'll have to manage these
0 commit comments