Boilerplate 3 Project
, 13 | document.getElementById('app') 14 | ); 15 | -------------------------------------------------------------------------------- /app/styles/app.scss: -------------------------------------------------------------------------------- 1 | @import "base/variables"; 2 | 3 | // foundation 4 | @import "base/foundation-settings"; 5 | @import "foundation"; 6 | @include foundation-everything; 7 | 8 | // Components 9 | -------------------------------------------------------------------------------- /app/styles/base/_foundation-settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites Settings 2 | // ----------------------------- 3 | // 4 | // Table of Contents: 5 | // 6 | // 1. Global 7 | // 2. Breakpoints 8 | // 3. The Grid 9 | // 4. Base Typography 10 | // 5. Typography Helpers 11 | // 6. Abide 12 | // 7. Accordion 13 | // 8. Accordion Menu 14 | // 9. Badge 15 | // 10. Breadcrumbs 16 | // 11. Button 17 | // 12. Button Group 18 | // 13. Callout 19 | // 14. Close Button 20 | // 15. Drilldown 21 | // 16. Dropdown 22 | // 17. Dropdown Menu 23 | // 18. Flex Video 24 | // 19. Forms 25 | // 20. Label 26 | // 21. Media Object 27 | // 22. Menu 28 | // 23. Meter 29 | // 24. Off-canvas 30 | // 25. Orbit 31 | // 26. Pagination 32 | // 27. Progress Bar 33 | // 28. Reveal 34 | // 29. Slider 35 | // 30. Switch 36 | // 31. Table 37 | // 32. Tabs 38 | // 33. Thumbnail 39 | // 34. Title Bar 40 | // 35. Tooltip 41 | // 36. Top Bar 42 | 43 | @import 'util/util'; 44 | 45 | // 1. Global 46 | // --------- 47 | 48 | $global-font-size: 100%; 49 | $global-width: rem-calc(1200); 50 | $global-lineheight: 1.5; 51 | $foundation-palette: ( 52 | primary: #2199e8, 53 | secondary: #777, 54 | success: #3adb76, 55 | warning: #ffae00, 56 | alert: #ec5840, 57 | ); 58 | $light-gray: #e6e6e6; 59 | $medium-gray: #cacaca; 60 | $dark-gray: #8a8a8a; 61 | $black: #0a0a0a; 62 | $white: #fefefe; 63 | $body-background: $white; 64 | $body-font-color: $black; 65 | $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; 66 | $body-antialiased: true; 67 | $global-margin: 1rem; 68 | $global-padding: 1rem; 69 | $global-weight-normal: normal; 70 | $global-weight-bold: bold; 71 | $global-radius: 0; 72 | $global-text-direction: ltr; 73 | $global-flexbox: false; 74 | $print-transparent-backgrounds: true; 75 | 76 | @include add-foundation-colors; 77 | 78 | // 2. Breakpoints 79 | // -------------- 80 | 81 | $breakpoints: ( 82 | small: 0, 83 | medium: 640px, 84 | large: 1024px, 85 | xlarge: 1200px, 86 | xxlarge: 1440px, 87 | ); 88 | $breakpoint-classes: (small medium large); 89 | 90 | // 3. The Grid 91 | // ----------- 92 | 93 | $grid-row-width: $global-width; 94 | $grid-column-count: 12; 95 | $grid-column-gutter: ( 96 | small: 20px, 97 | medium: 30px, 98 | ); 99 | $grid-column-align-edge: true; 100 | $block-grid-max: 8; 101 | 102 | // 4. Base Typography 103 | // ------------------ 104 | 105 | $header-font-family: $body-font-family; 106 | $header-font-weight: $global-weight-normal; 107 | $header-font-style: normal; 108 | $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; 109 | $header-sizes: ( 110 | small: ( 111 | 'h1': 24, 112 | 'h2': 20, 113 | 'h3': 19, 114 | 'h4': 18, 115 | 'h5': 17, 116 | 'h6': 16, 117 | ), 118 | medium: ( 119 | 'h1': 48, 120 | 'h2': 40, 121 | 'h3': 31, 122 | 'h4': 25, 123 | 'h5': 20, 124 | 'h6': 16, 125 | ), 126 | ); 127 | $header-color: inherit; 128 | $header-lineheight: 1.4; 129 | $header-margin-bottom: 0.5rem; 130 | $header-text-rendering: optimizeLegibility; 131 | $small-font-size: 80%; 132 | $header-small-font-color: $medium-gray; 133 | $paragraph-lineheight: 1.6; 134 | $paragraph-margin-bottom: 1rem; 135 | $paragraph-text-rendering: optimizeLegibility; 136 | $code-color: $black; 137 | $code-font-family: $font-family-monospace; 138 | $code-font-weight: $global-weight-normal; 139 | $code-background: $light-gray; 140 | $code-border: 1px solid $medium-gray; 141 | $code-padding: rem-calc(2 5 1); 142 | $anchor-color: $primary-color; 143 | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%); 144 | $anchor-text-decoration: none; 145 | $anchor-text-decoration-hover: none; 146 | $hr-width: $global-width; 147 | $hr-border: 1px solid $medium-gray; 148 | $hr-margin: rem-calc(20) auto; 149 | $list-lineheight: $paragraph-lineheight; 150 | $list-margin-bottom: $paragraph-margin-bottom; 151 | $list-style-type: disc; 152 | $list-style-position: outside; 153 | $list-side-margin: 1.25rem; 154 | $list-nested-side-margin: 1.25rem; 155 | $defnlist-margin-bottom: 1rem; 156 | $defnlist-term-weight: $global-weight-bold; 157 | $defnlist-term-margin-bottom: 0.3rem; 158 | $blockquote-color: $dark-gray; 159 | $blockquote-padding: rem-calc(9 20 0 19); 160 | $blockquote-border: 1px solid $medium-gray; 161 | $cite-font-size: rem-calc(13); 162 | $cite-color: $dark-gray; 163 | $keystroke-font: $font-family-monospace; 164 | $keystroke-color: $black; 165 | $keystroke-background: $light-gray; 166 | $keystroke-padding: rem-calc(2 4 0); 167 | $keystroke-radius: $global-radius; 168 | $abbr-underline: 1px dotted $black; 169 | 170 | // 5. Typography Helpers 171 | // --------------------- 172 | 173 | $lead-font-size: $global-font-size * 1.25; 174 | $lead-lineheight: 1.6; 175 | $subheader-lineheight: 1.4; 176 | $subheader-color: $dark-gray; 177 | $subheader-font-weight: $global-weight-normal; 178 | $subheader-margin-top: 0.2rem; 179 | $subheader-margin-bottom: 0.5rem; 180 | $stat-font-size: 2.5rem; 181 | 182 | // 6. Abide 183 | // -------- 184 | 185 | $abide-inputs: true; 186 | $abide-labels: true; 187 | $input-background-invalid: map-get($foundation-palette, alert); 188 | $form-label-color-invalid: map-get($foundation-palette, alert); 189 | $input-error-color: map-get($foundation-palette, alert); 190 | $input-error-font-size: rem-calc(12); 191 | $input-error-font-weight: $global-weight-bold; 192 | 193 | // 7. Accordion 194 | // ------------ 195 | 196 | $accordion-background: $white; 197 | $accordion-plusminus: true; 198 | $accordion-item-color: foreground($accordion-background, $primary-color); 199 | $accordion-item-background-hover: $light-gray; 200 | $accordion-item-padding: 1.25rem 1rem; 201 | $accordion-content-background: $white; 202 | $accordion-content-border: 1px solid $light-gray; 203 | $accordion-content-color: foreground($accordion-background, $primary-color); 204 | $accordion-content-padding: 1rem; 205 | 206 | // 8. Accordion Menu 207 | // ----------------- 208 | 209 | $accordionmenu-arrows: true; 210 | $accordionmenu-arrow-color: $primary-color; 211 | 212 | // 9. Badge 213 | // -------- 214 | 215 | $badge-background: $primary-color; 216 | $badge-color: foreground($badge-background); 217 | $badge-padding: 0.3em; 218 | $badge-minwidth: 2.1em; 219 | $badge-font-size: 0.6rem; 220 | 221 | // 10. Breadcrumbs 222 | // --------------- 223 | 224 | $breadcrumbs-margin: 0 0 $global-margin 0; 225 | $breadcrumbs-item-font-size: rem-calc(11); 226 | $breadcrumbs-item-color: $primary-color; 227 | $breadcrumbs-item-color-current: $black; 228 | $breadcrumbs-item-color-disabled: $medium-gray; 229 | $breadcrumbs-item-margin: 0.75rem; 230 | $breadcrumbs-item-uppercase: true; 231 | $breadcrumbs-item-slash: true; 232 | 233 | // 11. Button 234 | // ---------- 235 | 236 | $button-padding: 0.85em 1em; 237 | $button-margin: 0 0 $global-margin 0; 238 | $button-fill: solid; 239 | $button-background: $primary-color; 240 | $button-background-hover: scale-color($button-background, $lightness: -15%); 241 | $button-color: $white; 242 | $button-color-alt: $black; 243 | $button-radius: $global-radius; 244 | $button-sizes: ( 245 | tiny: 0.6rem, 246 | small: 0.75rem, 247 | default: 0.9rem, 248 | large: 1.25rem, 249 | ); 250 | $button-opacity-disabled: 0.25; 251 | 252 | // 12. Button Group 253 | // ---------------- 254 | 255 | $buttongroup-margin: 1rem; 256 | $buttongroup-spacing: 1px; 257 | $buttongroup-child-selector: '.button'; 258 | $buttongroup-expand-max: 6; 259 | 260 | // 13. Callout 261 | // ----------- 262 | 263 | $callout-background: $white; 264 | $callout-background-fade: 85%; 265 | $callout-border: 1px solid rgba($black, 0.25); 266 | $callout-margin: 0 0 1rem 0; 267 | $callout-padding: 1rem; 268 | $callout-font-color: $body-font-color; 269 | $callout-font-color-alt: $body-background; 270 | $callout-radius: $global-radius; 271 | $callout-link-tint: 30%; 272 | 273 | // 14. Close Button 274 | // ---------------- 275 | 276 | $closebutton-position: right top; 277 | $closebutton-offset-horizontal: 1rem; 278 | $closebutton-offset-vertical: 0.5rem; 279 | $closebutton-size: 2em; 280 | $closebutton-lineheight: 1; 281 | $closebutton-color: $dark-gray; 282 | $closebutton-color-hover: $black; 283 | 284 | // 15. Drilldown 285 | // ------------- 286 | 287 | $drilldown-transition: transform 0.15s linear; 288 | $drilldown-arrows: true; 289 | $drilldown-arrow-color: $primary-color; 290 | $drilldown-background: $white; 291 | 292 | // 16. Dropdown 293 | // ------------ 294 | 295 | $dropdown-padding: 1rem; 296 | $dropdown-border: 1px solid $medium-gray; 297 | $dropdown-font-size: 1rem; 298 | $dropdown-width: 300px; 299 | $dropdown-radius: $global-radius; 300 | $dropdown-sizes: ( 301 | tiny: 100px, 302 | small: 200px, 303 | large: 400px, 304 | ); 305 | 306 | // 17. Dropdown Menu 307 | // ----------------- 308 | 309 | $dropdownmenu-arrows: true; 310 | $dropdownmenu-arrow-color: $anchor-color; 311 | $dropdownmenu-min-width: 200px; 312 | $dropdownmenu-background: $white; 313 | $dropdownmenu-border: 1px solid $medium-gray; 314 | 315 | // 18. Flex Video 316 | // -------------- 317 | 318 | $flexvideo-margin-bottom: rem-calc(16); 319 | $flexvideo-ratio: 4 by 3; 320 | $flexvideo-ratio-widescreen: 16 by 9; 321 | 322 | // 19. Forms 323 | // --------- 324 | 325 | $fieldset-border: 1px solid $medium-gray; 326 | $fieldset-padding: rem-calc(20); 327 | $fieldset-margin: rem-calc(18 0); 328 | $legend-padding: rem-calc(0 3); 329 | $form-spacing: rem-calc(16); 330 | $helptext-color: $black; 331 | $helptext-font-size: rem-calc(13); 332 | $helptext-font-style: italic; 333 | $input-prefix-color: $black; 334 | $input-prefix-background: $light-gray; 335 | $input-prefix-border: 1px solid $medium-gray; 336 | $input-prefix-padding: 1rem; 337 | $form-label-color: $black; 338 | $form-label-font-size: rem-calc(14); 339 | $form-label-font-weight: $global-weight-normal; 340 | $form-label-line-height: 1.8; 341 | $select-background: $white; 342 | $select-triangle-color: $dark-gray; 343 | $select-radius: $global-radius; 344 | $input-color: $black; 345 | $input-placeholder-color: $medium-gray; 346 | $input-font-family: inherit; 347 | $input-font-size: rem-calc(16); 348 | $input-background: $white; 349 | $input-background-focus: $white; 350 | $input-background-disabled: $light-gray; 351 | $input-border: 1px solid $medium-gray; 352 | $input-border-focus: 1px solid $dark-gray; 353 | $input-shadow: inset 0 1px 2px rgba($black, 0.1); 354 | $input-shadow-focus: 0 0 5px $medium-gray; 355 | $input-cursor-disabled: default; 356 | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; 357 | $input-number-spinners: true; 358 | $input-radius: $global-radius; 359 | 360 | // 20. Label 361 | // --------- 362 | 363 | $label-background: $primary-color; 364 | $label-color: foreground($label-background); 365 | $label-font-size: 0.8rem; 366 | $label-padding: 0.33333rem 0.5rem; 367 | $label-radius: $global-radius; 368 | 369 | // 21. Media Object 370 | // ---------------- 371 | 372 | $mediaobject-margin-bottom: $global-margin; 373 | $mediaobject-section-padding: $global-padding; 374 | $mediaobject-image-width-stacked: 100%; 375 | 376 | // 22. Menu 377 | // -------- 378 | 379 | $menu-margin: 0; 380 | $menu-margin-nested: 1rem; 381 | $menu-item-padding: 0.7rem 1rem; 382 | $menu-item-color-active: $white; 383 | $menu-item-background-active: map-get($foundation-palette, primary); 384 | $menu-icon-spacing: 0.25rem; 385 | 386 | // 23. Meter 387 | // --------- 388 | 389 | $meter-height: 1rem; 390 | $meter-radius: $global-radius; 391 | $meter-background: $medium-gray; 392 | $meter-fill-good: $success-color; 393 | $meter-fill-medium: $warning-color; 394 | $meter-fill-bad: $alert-color; 395 | 396 | // 24. Off-canvas 397 | // -------------- 398 | 399 | $offcanvas-size: 250px; 400 | $offcanvas-background: $light-gray; 401 | $offcanvas-zindex: -1; 402 | $offcanvas-transition-length: 0.5s; 403 | $offcanvas-transition-timing: ease; 404 | $offcanvas-fixed-reveal: true; 405 | $offcanvas-exit-background: rgba($white, 0.25); 406 | $maincontent-class: 'off-canvas-content'; 407 | $maincontent-shadow: 0 0 10px rgba($black, 0.5); 408 | 409 | // 25. Orbit 410 | // --------- 411 | 412 | $orbit-bullet-background: $medium-gray; 413 | $orbit-bullet-background-active: $dark-gray; 414 | $orbit-bullet-diameter: 1.2rem; 415 | $orbit-bullet-margin: 0.1rem; 416 | $orbit-bullet-margin-top: 0.8rem; 417 | $orbit-bullet-margin-bottom: 0.8rem; 418 | $orbit-caption-background: rgba($black, 0.5); 419 | $orbit-caption-padding: 1rem; 420 | $orbit-control-background-hover: rgba($black, 0.5); 421 | $orbit-control-padding: 1rem; 422 | $orbit-control-zindex: 10; 423 | 424 | // 26. Pagination 425 | // -------------- 426 | 427 | $pagination-font-size: rem-calc(14); 428 | $pagination-margin-bottom: $global-margin; 429 | $pagination-item-color: $black; 430 | $pagination-item-padding: rem-calc(3 10); 431 | $pagination-item-spacing: rem-calc(1); 432 | $pagination-radius: $global-radius; 433 | $pagination-item-background-hover: $light-gray; 434 | $pagination-item-background-current: $primary-color; 435 | $pagination-item-color-current: foreground($pagination-item-background-current); 436 | $pagination-item-color-disabled: $medium-gray; 437 | $pagination-ellipsis-color: $black; 438 | $pagination-mobile-items: false; 439 | $pagination-arrows: true; 440 | 441 | // 27. Progress Bar 442 | // ---------------- 443 | 444 | $progress-height: 1rem; 445 | $progress-background: $medium-gray; 446 | $progress-margin-bottom: $global-margin; 447 | $progress-meter-background: $primary-color; 448 | $progress-radius: $global-radius; 449 | 450 | // 28. Reveal 451 | // ---------- 452 | 453 | $reveal-background: $white; 454 | $reveal-width: 600px; 455 | $reveal-max-width: $global-width; 456 | $reveal-padding: $global-padding; 457 | $reveal-border: 1px solid $medium-gray; 458 | $reveal-radius: $global-radius; 459 | $reveal-zindex: 1005; 460 | $reveal-overlay-background: rgba($black, 0.45); 461 | 462 | // 29. Slider 463 | // ---------- 464 | 465 | $slider-width-vertical: 0.5rem; 466 | $slider-transition: all 0.2s ease-in-out; 467 | $slider-height: 0.5rem; 468 | $slider-background: $light-gray; 469 | $slider-fill-background: $medium-gray; 470 | $slider-handle-height: 1.4rem; 471 | $slider-handle-width: 1.4rem; 472 | $slider-handle-background: $primary-color; 473 | $slider-opacity-disabled: 0.25; 474 | $slider-radius: $global-radius; 475 | 476 | // 30. Switch 477 | // ---------- 478 | 479 | $switch-background: $medium-gray; 480 | $switch-background-active: $primary-color; 481 | $switch-height: 2rem; 482 | $switch-height-tiny: 1.5rem; 483 | $switch-height-small: 1.75rem; 484 | $switch-height-large: 2.5rem; 485 | $switch-radius: $global-radius; 486 | $switch-margin: $global-margin; 487 | $switch-paddle-background: $white; 488 | $switch-paddle-offset: 0.25rem; 489 | $switch-paddle-radius: $global-radius; 490 | $switch-paddle-transition: all 0.25s ease-out; 491 | 492 | // 31. Table 493 | // --------- 494 | 495 | $table-background: $white; 496 | $table-color-scale: 5%; 497 | $table-border: 1px solid smart-scale($table-background, $table-color-scale); 498 | $table-padding: rem-calc(8 10 10); 499 | $table-hover-scale: 2%; 500 | $table-row-hover: darken($table-background, $table-hover-scale); 501 | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); 502 | $table-striped-background: smart-scale($table-background, $table-color-scale); 503 | $table-stripe: even; 504 | $table-head-background: smart-scale($table-background, $table-color-scale / 2); 505 | $table-foot-background: smart-scale($table-background, $table-color-scale); 506 | $table-head-font-color: $body-font-color; 507 | $show-header-for-stacked: false; 508 | 509 | // 32. Tabs 510 | // -------- 511 | 512 | $tab-margin: 0; 513 | $tab-background: $white; 514 | $tab-background-active: $light-gray; 515 | $tab-item-font-size: rem-calc(12); 516 | $tab-item-background-hover: $white; 517 | $tab-item-padding: 1.25rem 1.5rem; 518 | $tab-expand-max: 6; 519 | $tab-content-background: $white; 520 | $tab-content-border: $light-gray; 521 | $tab-content-color: foreground($tab-background, $primary-color); 522 | $tab-content-padding: 1rem; 523 | 524 | // 33. Thumbnail 525 | // ------------- 526 | 527 | $thumbnail-border: solid 4px $white; 528 | $thumbnail-margin-bottom: $global-margin; 529 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); 530 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); 531 | $thumbnail-transition: box-shadow 200ms ease-out; 532 | $thumbnail-radius: $global-radius; 533 | 534 | // 34. Title Bar 535 | // ------------- 536 | 537 | $titlebar-background: $black; 538 | $titlebar-color: $white; 539 | $titlebar-padding: 0.5rem; 540 | $titlebar-text-font-weight: bold; 541 | $titlebar-icon-color: $white; 542 | $titlebar-icon-color-hover: $medium-gray; 543 | $titlebar-icon-spacing: 0.25rem; 544 | 545 | // 35. Tooltip 546 | // ----------- 547 | 548 | $has-tip-font-weight: $global-weight-bold; 549 | $has-tip-border-bottom: dotted 1px $dark-gray; 550 | $tooltip-background-color: $black; 551 | $tooltip-color: $white; 552 | $tooltip-padding: 0.75rem; 553 | $tooltip-font-size: $small-font-size; 554 | $tooltip-pip-width: 0.75rem; 555 | $tooltip-pip-height: $tooltip-pip-width * 0.866; 556 | $tooltip-radius: $global-radius; 557 | 558 | // 36. Top Bar 559 | // ----------- 560 | 561 | $topbar-padding: 0.5rem; 562 | $topbar-background: $light-gray; 563 | $topbar-submenu-background: $topbar-background; 564 | $topbar-title-spacing: 1rem; 565 | $topbar-input-width: 200px; 566 | $topbar-unstack-breakpoint: medium; 567 | -------------------------------------------------------------------------------- /app/styles/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $grey: #333333; 3 | -------------------------------------------------------------------------------- /app/tests/app.test.jsx: -------------------------------------------------------------------------------- 1 | var expect = require('expect'); 2 | 3 | describe('App', () => { 4 | it('should properly run tests', () => { 5 | expect(1).toBe(1); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | var webpackConfig = require('./webpack.config.js'); 2 | 3 | module.exports = function (config) { 4 | config.set({ 5 | browsers: ['Chrome'], 6 | singleRun: true, 7 | frameworks: ['mocha'], 8 | files: [ 9 | 'node_modules/jquery/dist/jquery.min.js', 10 | 'node_modules/foundation-sites/dist/foundation.min.js', 11 | 'app/tests/**/*.test.jsx' 12 | ], 13 | preprocessors: { 14 | 'app/tests/**/*.test.jsx': ['webpack', 'sourcemap'] 15 | }, 16 | reporters: ['mocha'], 17 | client: { 18 | mocha: { 19 | timeout: '5000' 20 | } 21 | }, 22 | webpack: webpackConfig, 23 | webpackServer: { 24 | noInfo: true 25 | } 26 | }); 27 | }; 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boilerplate", 3 | "version": "1.0.0", 4 | "description": "Simple react app", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "karma start", 8 | "start": "node server.js" 9 | }, 10 | "author": "Andrew Mead", 11 | "license": "MIT", 12 | "dependencies": { 13 | "axios": "^0.9.1", 14 | "express": "^4.13.4", 15 | "react": "^0.14.7", 16 | "react-addons-test-utils": "^0.14.7", 17 | "react-dom": "^0.14.7", 18 | "react-router": "^2.0.0" 19 | }, 20 | "devDependencies": { 21 | "babel-core": "^6.5.1", 22 | "babel-loader": "^6.2.2", 23 | "babel-preset-es2015": "^6.5.0", 24 | "babel-preset-react": "^6.5.0", 25 | "babel-preset-stage-0": "^6.5.0", 26 | "css-loader": "^0.23.1", 27 | "expect": "^1.14.0", 28 | "foundation-sites": "6.2.0", 29 | "jquery": "^2.2.1", 30 | "karma": "^0.13.22", 31 | "karma-chrome-launcher": "^0.2.2", 32 | "karma-mocha": "^0.2.2", 33 | "karma-mocha-reporter": "^2.0.0", 34 | "karma-sourcemap-loader": "^0.3.7", 35 | "karma-webpack": "^1.7.0", 36 | "mocha": "^2.4.5", 37 | "node-sass": "^3.4.2", 38 | "sass-loader": "^3.1.2", 39 | "script-loader": "^0.6.1", 40 | "style-loader": "^0.13.0", 41 | "webpack": "^1.12.13" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | Boilerplate React App 2 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | 3 | // Create our app 4 | var app = express(); 5 | const PORT = process.env.PORT || 3000; 6 | 7 | app.use(function (req, res, next){ 8 | if (req.headers['x-forwarded-proto'] === 'https') { 9 | res.redirect('http://' + req.hostname + req.url); 10 | } else { 11 | next(); 12 | } 13 | }); 14 | 15 | app.use(express.static('public')); 16 | 17 | app.listen(PORT, function () { 18 | console.log('Express server is up on port ' + PORT); 19 | }); 20 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | entry: [ 6 | 'script!jquery/dist/jquery.min.js', 7 | 'script!foundation-sites/dist/foundation.min.js', 8 | './app/app.jsx' 9 | ], 10 | externals: { 11 | jquery: 'jQuery' 12 | }, 13 | plugins: [ 14 | new webpack.ProvidePlugin({ 15 | '$': 'jquery', 16 | 'jQuery': 'jquery' 17 | }) 18 | ], 19 | output: { 20 | path: __dirname, 21 | filename: './public/bundle.js' 22 | }, 23 | resolve: { 24 | root: __dirname, 25 | alias: { 26 | applicationStyles: 'app/styles/app.scss' 27 | }, 28 | extensions: ['', '.js', '.jsx'] 29 | }, 30 | module: { 31 | loaders: [ 32 | { 33 | loader: 'babel-loader', 34 | query: { 35 | presets: ['react', 'es2015', 'stage-0'] 36 | }, 37 | test: /\.jsx?$/, 38 | exclude: /(node_modules|bower_components)/ 39 | } 40 | ] 41 | }, 42 | sassLoader: { 43 | includePaths: [ 44 | path.resolve(__dirname, './node_modules/foundation-sites/scss') 45 | ] 46 | }, 47 | devtool: 'cheap-module-eval-source-map' 48 | }; 49 | --------------------------------------------------------------------------------