├── .gitignore ├── README.md ├── app ├── css │ ├── app.css │ └── normalize.css ├── images │ └── icon.png ├── index.html ├── jsx │ ├── components │ │ └── HelloWorld.jsx │ └── index.jsx └── shim.js ├── build └── build ├── package.json └── test └── placeholder.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | app/bundle.js 4 | build/cache/ 5 | build/builds/ 6 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-nodewebkit starter 2 | 3 | Download this skeleton if you want a no-nonsense react starter project for making standalone [node-webkit](https://github.com/rogerwang/node-webkit) apps. It uses [skeleton.css](http://getskeleton.com/) and will get you started super-quick and look rad. 4 | 5 | This project is [MIT licensed](http://opensource.org/licenses/MIT), and although totally not required, I think it'd be real sweet if you told people you started your awesome project using mine. 6 | 7 | 8 | ## development 9 | 10 | Get started with `npm install`. 11 | 12 | ### nativeRequire 13 | 14 | I like to make node-webkit apps in the browser. It's a lot faster than building a native app & re-running it when I make changes. Also, an issue that you will run into is that browserify overwrites `require()` to use a browser-context version. I wanted to solve both things with minimal configuration. You will probably still want to use npm modules, natively (that is the whole point of using node-webkit, right?) I made `nativeRequire` and a non-native shim (in `app/shim.js`.) The idea is that when you really need a native module, you just run `nativeRequire('module')` instead of `require('module')` and make a shim in shim.js for browser-based testing. Pretty slick, eh? 15 | 16 | #### example please 17 | 18 | Here is an example that uses the `serial` npm module: 19 | 20 | Lets imagine a world, just for a moment, where I need to get a list of serial ports. 21 | 22 | ```javascript 23 | var serial = nativeRequire('serialport'); 24 | serial.list(function(err, ports){ 25 | // do stuff with me arggh & ports on dee open sea 26 | }); 27 | ``` 28 | 29 | in `app/shim.js`, I make a fake module that does something similar to `serial.list`: 30 | 31 | ```javascript 32 | /** 33 | * Browser-dev shim 34 | * shim all native modules here 35 | */ 36 | 37 | (function(){ 38 | function shim(name){ 39 | var fakePorts = [{comName:"Fake COM1"}, {comName:"Fake COM2"}]; 40 | 41 | switch(name){ 42 | case 'serialport': return { 43 | list: function(cb){ 44 | cb(null, fakePorts); 45 | } 46 | }; 47 | } 48 | } 49 | 50 | window.nativeRequire = (typeof require !== 'undefined') ? require : shim; 51 | })(); 52 | ``` 53 | 54 | Pretty simple, eh? 55 | 56 | You don't need to fake every native module completely, and not doing so can help you keep track of what exactly is needed from the native system, just in case you do native things differently in the future ([cordova](http://cordova.apache.org/), [atom-shell](https://github.com/atom/atom-shell), [CEF](https://code.google.com/p/chromiumembedded/), etc.) 57 | 58 | #### more on native modules 59 | 60 | For compiled native modules (like `serialport` in the example above) you will need to compile them specifically for node-webkit: 61 | 62 | ``` 63 | npm install -g node-pre-gyp 64 | npm install --save serialport 65 | cd node_modules/serialport 66 | node-pre-gyp rebuild --runtime=node-webkit --target=0.11.2 --target_arch=ia32 67 | ``` 68 | 69 | I also had an [issue](https://github.com/voodootikigod/node-serialport/issues/374) with the serialport native module being put in the wrong folder. I resolved it, like this: 70 | 71 | ``` 72 | mv node_modules/serialport/build/serialport/v1.4.6/Release/node-webkit-v0.11.2-darwin-ia32/ node_modules/serialport/build/serialport/v1.4.6/Release/node-webkit-v14-darwin-ia32 73 | ``` 74 | 75 | #### more on browserify 76 | 77 | If you hate this elegant simplicity, feel free to use [browserify options](https://github.com/substack/node-browserify) to do something clever. I put the build options in `package.json`. I imagine you could ignore `serialport` and do a try/catch in your application code to shim it, as needed. 78 | 79 | ### node run 80 | 81 | Instead of using a [proper task-runner](http://gulpjs.com/), I just put tasks inside the `package.json` file to reduce the configuration/dependency overhead & keep things simple & light. 82 | 83 | * `npm start` - watch file for changes & rebuild 84 | * `npm test` - run mocha all tests in `test/` 85 | * `npm run app` - run node-webkit app 86 | * `npm run build` - Build the app as an executable for the current platform 87 | 88 | I develop features, like this: `npm start & open app/index.html` 89 | -------------------------------------------------------------------------------- /app/css/app.css: -------------------------------------------------------------------------------- 1 | /* based on Skeleton V2.0: http://getskeleton.com/ */ 2 | 3 | @import "normalize.css"; 4 | @import "https://fonts.googleapis.com/css?family=Raleway:400,300,600"; 5 | 6 | /* Table of contents 7 | –––––––––––––––––––––––––––––––––––––––––––––––––– 8 | - Grid 9 | - Base Styles 10 | - Typography 11 | - Links 12 | - Buttons 13 | - Forms 14 | - Lists 15 | - Code 16 | - Tables 17 | - Spacing 18 | - Utilities 19 | - Clearing 20 | - App-specific 21 | */ 22 | 23 | 24 | /* Grid 25 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 26 | .container { 27 | position: relative; 28 | width: 80%; 29 | max-width: 960px; 30 | margin: 0 auto; 31 | padding: 0; } 32 | .container .column, 33 | .container .columns { 34 | float: left; 35 | width: 100%; 36 | box-sizing: border-box; } 37 | .row { 38 | margin-bottom: 2rem; } 39 | .row .column:first-child, 40 | .row .columns:first-child { 41 | margin-left: 0; } 42 | 43 | /* For devices larger than 550px */ 44 | @media (min-width: 550px) { 45 | 46 | .container .column, 47 | .container .columns { 48 | margin-left: 4%; } 49 | 50 | .container .one.column, 51 | .container .one.columns { width: 4.66666666667%; } 52 | .container .two.columns { width: 13.3333333333%; } 53 | .container .three.columns { width: 22%; } 54 | .container .four.columns { width: 30.6666666667%; } 55 | .container .five.columns { width: 39.3333333333%; } 56 | .container .six.columns { width: 48%; } 57 | .container .seven.columns { width: 56.6666666667%; } 58 | .container .eight.columns { width: 65.3333333333%; } 59 | .container .nine.columns { width: 74.0%; } 60 | .container .ten.columns { width: 82.6666666667%; } 61 | .container .eleven.columns { width: 91.3333333333%; } 62 | .container .twelve.columns { width: 100%; margin-left: 0; } 63 | 64 | .container .one-third.column { width: 30.6666666667%; } 65 | .container .two-thirds.column { width: 65.3333333333%; } 66 | 67 | .container .one-half.column { width: 48%; } 68 | 69 | /* Offsets */ 70 | .container .offset-by-one.column, 71 | .container .offset-by-one.columns { margin-left: 8.66666666667%; } 72 | .container .offset-by-two.column { margin-left: 17.3333333333%; } 73 | .container .offset-by-three.column { margin-left: 26%; } 74 | .container .offset-by-four.column { margin-left: 34.6666666667%; } 75 | .container .offset-by-five.column { margin-left: 43.3333333333%; } 76 | .container .offset-by-six.column { margin-left: 52%; } 77 | .container .offset-by-seven.column { margin-left: 60.6666666667%; } 78 | .container .offset-by-eight.column { margin-left: 69.3333333333%; } 79 | .container .offset-by-nine.column { margin-left: 78.0%; } 80 | .container .offset-by-ten.column { margin-left: 86.6666666667%; } 81 | .container .offset-by-eleven.column { margin-left: 95.3333333333%; } 82 | 83 | .container .offset-by-one-third.column { margin-left: 34.6666666667%; } 84 | .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; } 85 | 86 | .container .offset-by-one-half.column { margin-left: 52%; } 87 | 88 | } 89 | 90 | 91 | /* Base Styles 92 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 93 | /* NOTE 94 | html is set to 62.5% so that all the REM measurements throughout Skeleton 95 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 96 | html { 97 | font-size: 62.5%; } 98 | body { 99 | font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ 100 | line-height: 1.6; 101 | font-weight: 400; 102 | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 103 | color: #222; } 104 | 105 | 106 | /* Typography 107 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 108 | h1, h2, h3, h4, h5, h6 { 109 | font-weight: 300; 110 | margin-top: 0; 111 | margin-bottom: 2rem; } 112 | h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} 113 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 114 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 115 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 116 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } 117 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 118 | 119 | /* Larger than phablet */ 120 | @media (min-width: 550px) { 121 | h1 { font-size: 5.0rem; } 122 | h2 { font-size: 4.2rem; } 123 | h3 { font-size: 3.6rem; } 124 | h4 { font-size: 3.0rem; } 125 | h5 { font-size: 2.4rem; } 126 | h6 { font-size: 1.5rem; } 127 | } 128 | 129 | p { 130 | margin-top: 0; } 131 | 132 | 133 | /* Links 134 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 135 | a { 136 | color: #1EAEDB; } 137 | a:hover { 138 | color: #0FA0CE; } 139 | 140 | 141 | /* Buttons 142 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 143 | .button, 144 | button, 145 | input[type="submit"], 146 | input[type="reset"], 147 | input[type="button"] { 148 | display: inline-block; 149 | background-color: transparent; 150 | border-radius: 4px; 151 | color: #555; 152 | text-align: center; 153 | font-size: 11px; 154 | font-weight: 600; 155 | text-decoration: none; 156 | cursor: pointer; 157 | border: 1px solid #bbb; 158 | height: 38px; 159 | line-height: 38px; 160 | padding: 0 30px; 161 | letter-spacing: .1rem; 162 | text-transform: uppercase; 163 | white-space: nowrap; 164 | box-sizing: border-box; } 165 | .button:hover, 166 | button:hover, 167 | input[type="submit"]:hover, 168 | input[type="reset"]:hover, 169 | input[type="button"]:hover, 170 | .button:focus, 171 | button:focus, 172 | input[type="submit"]:focus, 173 | input[type="reset"]:focus, 174 | input[type="button"]:focus { 175 | border-color: #888; 176 | color: #333; 177 | outline: 0; } 178 | .button.button-primary, 179 | button.button-primary, 180 | input[type="submit"].button-primary, 181 | input[type="reset"].button-primary, 182 | input[type="button"].button-primary { 183 | color: #FFF; 184 | border-color: #33C3F0; 185 | background-color: #33C3F0; } 186 | .button.button-primary:hover, 187 | button.button-primary:hover, 188 | input[type="submit"].button-primary:hover, 189 | input[type="reset"].button-primary:hover, 190 | input[type="button"].button-primary:hover, 191 | .button.button-primary:focus, 192 | button.button-primary:focus, 193 | input[type="submit"].button-primary:focus, 194 | input[type="reset"].button-primary:focus, 195 | input[type="button"].button-primary:focus { 196 | background-color: #1EAEDB; 197 | border-color: #1EAEDB; 198 | color: #FFF; } 199 | 200 | 201 | /* Forms 202 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 203 | input[type="email"], 204 | input[type="search"], 205 | input[type="text"], 206 | input[type="password"], 207 | textarea, 208 | select { 209 | border: 1px solid #D1D1D1; 210 | height: 36px; 211 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 212 | border-radius: 4px; 213 | box-shadow: none; 214 | background: #fff; } 215 | /* Removes awkard default styles on some inputs */ 216 | input[type="email"], 217 | input[type="search"], 218 | input[type="text"], 219 | textarea { 220 | -webkit-appearance: none; 221 | -moz-appearance: none; 222 | appearance: none; 223 | } 224 | textarea { 225 | min-height: 65px; 226 | padding-top: 6px; 227 | padding-bottom: 6px; } 228 | input[type="email"]:focus, 229 | input[type="search"]:focus, 230 | input[type="text"]:focus, 231 | input[type="password"]:focus, 232 | textarea:focus, 233 | select:focus { 234 | border: 1px solid #33C3F0; 235 | outline: 0; } 236 | label, 237 | legend { 238 | display: block; 239 | font-weight: 600; 240 | margin-bottom: .5rem; } 241 | fieldset { 242 | border-width: 0; 243 | padding: 0; } 244 | input[type="checkbox"], 245 | input[type="radio"] { 246 | display: inline; } 247 | label > .label-body { 248 | display: inline-block; 249 | font-weight: normal; 250 | margin-left: .5rem; } 251 | 252 | 253 | /* Lists 254 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 255 | ul { 256 | list-style: circle inside; } 257 | ol { 258 | list-style: decimal inside; } 259 | ol, ul { 260 | margin-top: 0; 261 | padding-left: 0; } 262 | ul ul, 263 | ul ol, 264 | ol ol, 265 | ol ul { 266 | margin: 1.5rem 0 1.5rem 3rem; 267 | font-size: 90%; } 268 | li { 269 | margin-bottom: 1rem; } 270 | 271 | 272 | /* Code 273 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 274 | code { 275 | padding: .2rem .5rem; 276 | margin: 0 .2rem; 277 | font-size: 90%; 278 | background: #F1F1F1; 279 | border: 1px solid #E1E1E1; 280 | border-radius: 4px; 281 | white-space: nowrap; } 282 | pre > code { 283 | display: block; 284 | padding: 1rem 1.5rem; 285 | white-space: pre; } 286 | 287 | 288 | /* Tables 289 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 290 | th, 291 | td { 292 | padding: 12px 15px; 293 | text-align: left; 294 | border-bottom: 1px solid #E1E1E1; } 295 | th:first-child, 296 | td:first-child { 297 | padding-left: 0; } 298 | th:last-child, 299 | td:last-child { 300 | padding-right: 0; } 301 | 302 | 303 | /* Spacing 304 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 305 | button, 306 | .button { 307 | margin-bottom: 1rem; } 308 | input, 309 | textarea, 310 | select, 311 | fieldset { 312 | margin-bottom: 1.5rem; } 313 | pre, 314 | blockquote, 315 | form, 316 | dl, 317 | figure, 318 | table, 319 | p, 320 | ul, 321 | ol, 322 | form { 323 | margin-bottom: 2.5rem; } 324 | p { 325 | margin-top: 0; } 326 | 327 | 328 | 329 | /* Utilities 330 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 331 | .u-full-width { 332 | width: 100%; 333 | box-sizing: border-box; } 334 | .u-max-full-width { 335 | max-width: 100%; 336 | box-sizing: border-box; } 337 | .u-pull-right { 338 | float: right; } 339 | .u-pull-left { 340 | float: left; } 341 | 342 | 343 | /* Misc 344 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 345 | hr { 346 | margin-top: 3rem; 347 | margin-bottom: 3.5rem; 348 | border-width: 0; 349 | border-top: 1px solid #E1E1E1; 350 | } 351 | 352 | /* Clearing 353 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 354 | 355 | /* Self Clearing Goodness */ 356 | .container:after, 357 | .row:after, 358 | .u-cf { 359 | content: ""; 360 | display: table; 361 | clear: both; } 362 | 363 | 364 | 365 | /* App-specific 366 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 367 | 368 | #topbar { 369 | background: #333; 370 | color: #ccc; 371 | } 372 | 373 | 374 | -------------------------------------------------------------------------------- /app/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } -------------------------------------------------------------------------------- /app/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konsumer/react-nodewebkit/870a194d2a7dc57f811bafd3b0e0cd0185c185be/app/images/icon.png -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | your app 5 | 6 | 7 | 8 | 9 |
10 |
11 |

your app

12 |
13 |
14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /app/jsx/components/HelloWorld.jsx: -------------------------------------------------------------------------------- 1 | /* @jsx React.DOM */ 2 | 3 | var React = require('react'); 4 | 5 | module.exports = React.createClass({ 6 | render: function() { 7 | return ( 8 |
9 |

O, hey there

10 |

You can find this text in app/components/HelloWorld.jsx. It's pulled in by app/index.jsx

11 |
12 | ); 13 | } 14 | }); -------------------------------------------------------------------------------- /app/jsx/index.jsx: -------------------------------------------------------------------------------- 1 | /* @jsx React.DOM */ 2 | 3 | var React = require('react'); 4 | var HelloWorld = require('./components/HelloWorld.jsx'); 5 | 6 | React.render(, document.getElementById('content')); -------------------------------------------------------------------------------- /app/shim.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Browser-dev shim 3 | * shim all native modules here 4 | */ 5 | 6 | (function(){ 7 | function shim(name){ 8 | // put shims for native-requires in here, for browser testing 9 | } 10 | 11 | window.nativeRequire = (typeof require !== 'undefined') ? require : shim; 12 | })(); 13 | 14 | -------------------------------------------------------------------------------- /build/build: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Build script for POSIX environments 4 | 5 | DIR=$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd ) 6 | rm -rf "${DIR}/cache" && mkdir "${DIR}/cache" && cd "${DIR}/cache" && 7 | cp -R "../../app" "../../package.json" . && 8 | npm install --production && 9 | browserify app/jsx/index.jsx -o app/bundle.js && 10 | nwbuild . -o ../builds -p win,osx,linux32,linux64 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-nodewebkit", 3 | "private": true, 4 | "version": "0.0.1", 5 | "description": "react node-webkit starter project", 6 | "keywords": [], 7 | "window": { 8 | "icon": "app/images/icon.png", 9 | "toolbar": false, 10 | "frame": true, 11 | "width": 800, 12 | "height": 600, 13 | "position": "center", 14 | "resizable": true 15 | }, 16 | "webkit": { 17 | "plugin": false 18 | }, 19 | "main": "app/index.html", 20 | "dependencies": { 21 | "react": "^0.13.3" 22 | }, 23 | "devDependencies": { 24 | "browserify": "^11.1.0", 25 | "chai": "^3.2.0", 26 | "mocha": "^2.0.1", 27 | "nw-builder": "^2.0.2", 28 | "reactify": "^1.1.1", 29 | "watchify": "^3.4.0" 30 | }, 31 | "scripts": { 32 | "start": "watchify app/jsx/index.jsx -o app/bundle.js -v", 33 | "test": "mocha", 34 | "app": "nwbuild --run .", 35 | "build": "./build/build", 36 | "clean": "rm -rf build/cache app/bundle.js" 37 | }, 38 | "browserify": { 39 | "transform": [ 40 | [ 41 | "reactify", 42 | { 43 | "es6": true 44 | } 45 | ] 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /test/placeholder.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Dumb test, to show how testing works 3 | */ 4 | 5 | var expect = require('chai').expect; 6 | 7 | describe('placeholder', function(){ 8 | describe('tester', function(){ 9 | var tester = 'o hai'; 10 | 11 | it('should be a string', function(){ 12 | expect(tester).to.be.a('string'); 13 | }); 14 | 15 | it('should be "o hai"', function(){ 16 | expect(tester).to.equal('o hai'); 17 | }); 18 | 19 | it('should be 5 chars long', function(){ 20 | expect(tester).to.have.length(5); 21 | }); 22 | 23 | }) 24 | }) --------------------------------------------------------------------------------