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
@@ -15,7 +15,7 @@ MERN is a scaffolding tool which makes it easy to build isomorphic apps using Mo
15
15
16
16
```
17
17
npm install -g mern-cli
18
-
mern your_new_app
18
+
mern init your_new_app
19
19
cd your_new_app
20
20
npm install
21
21
npm start
@@ -27,7 +27,7 @@ MERN is a scaffolding tool which makes it easy to build isomorphic apps using Mo
27
27
28
28
### Webpack Configs
29
29
30
-
MERN uses Webpack for bundling modules. There are two types of Webpack configs provided `webpack.config.dev.js` (for development)and `webpack.config.prod.js` (for production).
30
+
MERN uses Webpack for bundling modules. There are three types of Webpack configs provided `webpack.config.dev.js` (for development), `webpack.config.prod.js` (for production) and `webpack.config.server.js` (for bundling server in production).
31
31
32
32
The Webpack configuration is minimal and beginner-friendly. You can customize and add more features to it for production build.
33
33
@@ -41,7 +41,7 @@ If NODE_ENV is development we apply Webpack middlewares for bundling and Hot Mod
41
41
42
42
We use React Router's match function for handling all page requests so that browser history works.
43
43
44
-
All the routes are defined in `shared/routes.js`. React Router renders components according to route requested.
44
+
All the routes are defined in `client/routes.js`. React Router renders components according to route requested.
45
45
46
46
```js
47
47
// Server Side Rendering based on routes matched by React-router.
@@ -90,14 +90,55 @@ If there's an error in matching we return 500 status code, if no matches are fou
90
90
91
91
`fetchComponentData` is the key function. It takes three params : first is a dispatch function of Redux store, second is an array of components that should be rendered in current route and third is the route params. `fetchComponentData` collects all the needs (need is an array of actions that are required to be dispatched before rendering the component) of components in the current route. It returns a promise when all the required actions are dispatched. We render the page and send data to client for client-side rendering in `window.__INITIAL_STATE__`.
92
92
93
-
### Shared
93
+
### Client
94
94
95
-
Shared directory contains all the components, routes, actions and reducers.
95
+
Client directory contains all the shared components, routes, modules.
96
96
97
-
### Client
97
+
#### components
98
+
This folder contains all the shared components which is used throughout the project.
98
99
100
+
#### index.js
99
101
Index.js simply does client side rendering using the data provided from `window.__INITIAL_STATE__`.
100
102
103
+
#### assets
104
+
All the assets images, fonts goes here. All of these will be copied to `dist` folder while running in production and served from there.
105
+
106
+
#### modules
107
+
Modules are way of organising different domain specific modules in the project. A typical module contains the following
108
+
```
109
+
| - Post
110
+
| - __tests__ // all the tests for this module goes here
111
+
| - components // Sub components of this module
112
+
| - Post.spec.js
113
+
| - PostList.spec.js
114
+
| - PostItem.spec.js
115
+
| - PostImage.spec.js
116
+
| - pages
117
+
| - PostPage.spec.js
118
+
| - PostViewPage.spec.js
119
+
| - PostReducer.spec.js
120
+
| - PostActions.spec.js
121
+
| - components // Sub components of this module
122
+
| - Post.js
123
+
| - PostList.js
124
+
| - PostItem.js
125
+
| - PostImage.js
126
+
| - pages // React Router Pages from this module
127
+
| - PostPage
128
+
| - PostPage.js
129
+
| - PostPage.css
130
+
| - PostViewPage
131
+
| - PostViewPage.js
132
+
| - PostViewPage.css
133
+
| - PostReducer.js
134
+
| - PostActions.js
135
+
```
136
+
137
+
## Misc
138
+
139
+
### ES6 support
140
+
We use babel to transpile code in both server and client with `stage-0` plugin. So, you can use both ES6 and experimental ES7 features.
141
+
101
142
## Roadmap
102
143
103
144
The roadmap discussion thread for v2.0.0 can be found [here](https://github.com/Hashnode/mern-starter/issues/146).
0 commit comments