|
| 1 | +# react-redux-starter |
| 2 | + |
| 3 | +A universal starter kit built with react, react-router and redux. Server |
| 4 | +rendering with react and express, bundles with Webpack with hot module reloading |
| 5 | +and hot style reloading with SCSS support. Bonus: Cordova support. |
| 6 | + |
| 7 | +## Prerequisites |
| 8 | + |
| 9 | +* Node >4.2.x is recommended. |
| 10 | + |
| 11 | +* Webpack |
| 12 | +``` |
| 13 | +npm install -g webpack |
| 14 | +``` |
| 15 | + |
| 16 | +* nodemon |
| 17 | + |
| 18 | +``` |
| 19 | +npm install -g nodemon |
| 20 | +``` |
| 21 | + |
| 22 | +* eslint, babel-eslint |
| 23 | + |
| 24 | +``` |
| 25 | +npm install -g eslint babel-eslint |
| 26 | +``` |
| 27 | + |
| 28 | +## Get started |
| 29 | + |
| 30 | +``` |
| 31 | +npm install |
| 32 | +npm start |
| 33 | +``` |
| 34 | + |
| 35 | +Direct your browser to `http://localhost:3000`. |
| 36 | + |
| 37 | + |
| 38 | +## Directory Structure |
| 39 | +``` |
| 40 | +├── client # Client-side code. |
| 41 | +├── common # Shared code between client and server. |
| 42 | +│ ├── assets # All fonts, images, stylsheets. |
| 43 | +│ │ ├── fonts |
| 44 | +│ │ ├── images |
| 45 | +│ │ └── stylesheets # Follows the 7-1 pattern: http://sass-guidelin.es/#the-7-1-pattern |
| 46 | +│ │ ├── base |
| 47 | +│ │ ├── components |
| 48 | +│ │ ├── layout |
| 49 | +│ │ ├── pages |
| 50 | +│ │ ├── shame |
| 51 | +│ │ ├── utils |
| 52 | +│ │ └── vendors |
| 53 | +│ ├── config # Contains the redux store configuration. Add anything else you like. |
| 54 | +│ ├── middleware # Custom redux middleware can be placed here. |
| 55 | +│ ├── reducers # Redux reducers |
| 56 | +| | └── index.js # Root reducer. Imports all other reducers. |
| 57 | +│ ├── routes # Routes each have an index.js which exports a react-router Route. |
| 58 | +│ │ ├── app |
| 59 | +│ │ │ ├── components |
| 60 | +│ │ │ ├── containers |
| 61 | +│ │ │ └── index.js |
| 62 | +│ │ ├── example # The name of route. |
| 63 | +│ │ │ ├── components # "Dumb" components |
| 64 | +│ │ │ └── containers # "Smart" containers |
| 65 | +│ │ │ └── index.js # Exports a react-router route. Uses [alternate configuration](https://github.com/rackt/react-router/blob/master/docs/guides/basics/RouteConfiguration.md#alternate-configuration) |
| 66 | +│ │ └── home |
| 67 | +│ │ └── containers |
| 68 | +│ │ │ └── index.js |
| 69 | +│ ├── selectors # Memoized selectors. See https://github.com/rackt/reselect |
| 70 | +│ ├── shared # Shared actions and components and do not belong to a single route. |
| 71 | +│ │ ├── actions |
| 72 | +│ │ └── components |
| 73 | +│ ├── templates # HTML templates |
| 74 | +│ └── util # Utility methods |
| 75 | +├── cordova-build # Cordova build tools |
| 76 | +│ └── config |
| 77 | +├── server # Server-side code. |
| 78 | +└── webpack # Webpack configuration files. |
| 79 | +``` |
| 80 | + |
| 81 | +## Writing Tests |
| 82 | +The default testing framework is Mocha, though you can use whatever you want. |
| 83 | +Make sure you have it installed: |
| 84 | + |
| 85 | +``` |
| 86 | +npm install -g mocha |
| 87 | +``` |
| 88 | + |
| 89 | +Tests should reside alongside the component/module/selector/etc that it is |
| 90 | +testing. For example: |
| 91 | + |
| 92 | +``` |
| 93 | +├── reducers |
| 94 | +│ ├── todos.js |
| 95 | +│ ├── todos.test.js |
| 96 | +``` |
| 97 | + |
| 98 | +Tests can be written with ES2015, since it passes through `babel-register`. |
| 99 | + |
| 100 | +## Running Tests |
| 101 | +To run a single test: |
| 102 | +``` |
| 103 | +npm test /path/to/single.test.js |
| 104 | +``` |
| 105 | + |
| 106 | +To run a directory of tests: |
| 107 | + |
| 108 | +``` |
| 109 | +npm test /path/to/test/directory |
| 110 | +``` |
| 111 | + |
| 112 | +To run all tests: |
| 113 | + |
| 114 | +``` |
| 115 | +npm run test:all |
| 116 | +``` |
| 117 | + |
| 118 | +This will run all files that are suffixed with a `.test.js`. |
| 119 | + |
| 120 | +## Deploying to Heroku |
| 121 | + |
| 122 | +Just set an environment variable to point the asset host to whereever you want, |
| 123 | +since it defaults to `localhost:3001`. If using Heroku to store assets, just use |
| 124 | +a local route. Otherwise, set it to the CDN of your choice. |
| 125 | +``` |
| 126 | +heroku config:set ASSET_HOST=/dist/ |
| 127 | +# OR |
| 128 | +heroku config:set ASSET_HOST=https://s3.amazonaws.com/mybucket/myasssets/ |
| 129 | +``` |
| 130 | + |
| 131 | +## Building Cordova Apps |
| 132 | + |
| 133 | +First, make sure you have Cordova installed: |
| 134 | + |
| 135 | +``` |
| 136 | +npm install -g cordova |
| 137 | +``` |
| 138 | + |
| 139 | +Initialize the Cordova app: |
| 140 | + |
| 141 | +``` |
| 142 | +cordova create cordova/ com.org.appname "My App" |
| 143 | +``` |
| 144 | + |
| 145 | +Add the platform(s) you want to build for: |
| 146 | + |
| 147 | +``` |
| 148 | +cd cordova/ |
| 149 | +cordova platform add ios # or 'android' |
| 150 | +``` |
| 151 | + |
| 152 | +Install plugins (if you don't have a `/plugins` folder) |
| 153 | +``` |
| 154 | +cordova prepare |
| 155 | +``` |
| 156 | + |
| 157 | +### Build/Start Dev Environment |
| 158 | + |
| 159 | +``` |
| 160 | +npm run start:cordova # build for development with hot reloading |
| 161 | +npm run build:cordova # build for development without hot reloading |
| 162 | +npm run build:cordova:development # alias for above |
| 163 | +npm run build:cordova:production # build for production without hot reloading |
| 164 | +``` |
| 165 | + |
| 166 | +### Start a simulator/emulator |
| 167 | + |
| 168 | +* iOS - CLI |
| 169 | + |
| 170 | +Install XCode, then: |
| 171 | + |
| 172 | +``` |
| 173 | +npm install -g ios-deploy |
| 174 | +cd cordova && cordova run ios |
| 175 | +``` |
| 176 | + |
| 177 | +* iOS - XCode |
| 178 | + |
| 179 | +Open the file located in `./cordova/platforms/ios/MarcasDirectos.xcodeproj`. |
| 180 | + |
| 181 | +* Android - CLI |
| 182 | + |
| 183 | +Install the Android SDK, then: |
| 184 | +``` |
| 185 | +cd cordova && cordova run android |
| 186 | +``` |
| 187 | + |
| 188 | +## Distributing Betas |
| 189 | + |
| 190 | +You may want to distribute the app via Fabric (Crashlytics). To do so, prepare |
| 191 | +the following files (copy and rename them): |
| 192 | + |
| 193 | +``` |
| 194 | +build/fabric.json.example -> build/fabric.json |
| 195 | +build/config/release.json.example -> build/config/release.json |
| 196 | +``` |
| 197 | + |
| 198 | +Fill in the fields in the JSON files properly, then run the following commands: |
| 199 | + |
| 200 | +``` |
| 201 | +npm run build:cordova:production # build the source files for cordova's www |
| 202 | +npm run dist:android # build the binary and upload to Crashlytics |
| 203 | +# OR |
| 204 | +npm run dist:ios |
| 205 | +``` |
| 206 | + |
| 207 | +## Additional Notes |
| 208 | + |
| 209 | +If you're debugging in a mobile browser and you want to access your project |
| 210 | +locally, do the following: |
| 211 | + |
| 212 | +- Make sure your mobile device on the same network as your desktop/laptop. |
| 213 | +- Run `npm start` with a `HOSTNAME` environment variable set to your computer's |
| 214 | +local ip address (the computer that your dev environment is on): |
| 215 | +``` |
| 216 | +HOSTNAME=10.0.1.3 npm start |
| 217 | +``` |
| 218 | +- Browse to `http://10.0.1.3:3000` on your mobile device. |
0 commit comments