bradleyboy / yarsk

Don't use this, use Create React App

YARSK

Yet Another React Starter Kit.

Everyone has one, here's mine.

Features

• React, of course.
• Webpack for asset bundling.
• Hot reloading enabled out of the box. Changes to React components will show in the browser immediately without a full reload thanks to react-transform-hmr.
• Babel for ES6+ transpilation.
• SASS (SCSS or Sass style), Less, and Autoprefixer enabled by default through Webpack.
• Image loaders setup and ready to go so you can reference your images as require() statements in JS, or just use url() as usual in CSS and Webpack will take care of the rest. See the Header component and the Application component stylesheet for examples of each.
• Karma + Mocha + Enyzme for testing. Istanbul and isparta are also activated with karma-coverage for code coverage analysis, even on your ES6 classes. See Testing below for more info.
• Production configuration with best practices applied for optimizing React file size. The bundled JS file produced from this example is right at 40KB minified and gzipped. See Building below for more info.
• Built-in command for publishing your app to GitHub pages. See Building below for more info.
• Optional support for ESLint via babel-eslint.

This kit is intentionally missing a specific Flux implementation, or any other non-essential library, as I use this as a base for experimenting with various parts of the React ecosystem.

In the wild

• React TODO app with Flummox

Usage

Fork this repo, then run:

npm install
npm start

That will fire up a webpack dev server in hot mode. Most changes will be reflected in the browser automatically without a browser reload. You can view the app in the browser at http://localhost:8080.

Building

To generate a production build, run:

npm run build

The above command will generate a dist folder with the appropriate index.html file along with the minified CSS and JS files.

You can also automatically publish to GitHub pages. Just run this instead of the regular build command:

npm run build:gh

You can then view your app at http://[yourgithubusername].github.io/[reponame]. For example, you can load this demo at http://bradleyboy.github.io/yarsk.

Modifying the HTML

The HTML file is generated using the conf/tmpl.html file. This file is used for both the development and production build.

Tests

The tests use Karma, Mocha and Chai through PhantomJS. See the example test in app/components/Application/__tests__/index.js. The test suite can be run like so:

npm test

To run the tests in watch mode (tests will re-run each time a file changes), use this instead:

npm run test:watch

You can generate code coverage reports with:

npm run test:coverage

See the coverage directory once that command is completed.

Finally, the repo is Travis ready. The .travis.yml file should work out of the box, just add your repo in Travis.

Linting

If you'd like your JavaScript to be linted, copy the .eslintrc.example to .eslintrc. I've included my own defaults, feel free to modify them to your own taste. For more information on configuring ESLint, consult its documentation. Linting is run before each webpack build when a .eslintrc file is present.

.editorconfig

An example .editorconfig file is provided with sensible defaults for JavaScript. Feel free to modify .editorconfig.example to match your own preferences, then renamed the file to .editorconfig and use an IDE or editor that supports EditorConfig.

yarsk's Issues

Segmentation Fault with npm start

On Mac OSX,

After pulling master and running npm install and npm start, I get the following message:

[email protected] start /Users/jiangkewei/yarsk
webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --inline --content-base ./build

70% 1/1 build moduleshttp://localhost:8080/
webpack result is served from http://localhost:8080/
content is served from /Users/jiangkewei/yarsk/build
[1] 8344 segmentation fault npm start

Any clues as to why this is happening?
I tried this on the same machine last month or so and it worked fine. I can only guess it's caused by some dependency update, and I'm trying to trial-and-error which one it could be. :/

I get an error on npm start

This is the npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 silly lifecycle [email protected]prestart: no script for prestart, continuing
7 info lifecycle [email protected]start: [email protected]
8 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/jonatan/projects/reactStarter/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
10 verbose lifecycle [email protected]start: CWD: /Users/jonatan/projects/reactStarter
11 silly lifecycle [email protected]start: Args: [ '-c',
11 silly lifecycle 'webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build' ]
12 silly lifecycle [email protected]start: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:818:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/jonatan/projects/reactStarter
17 error Darwin 15.3.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
19 error node v4.2.3
20 error npm v3.5.2
21 error code ELIFECYCLE
22 error [email protected] start: webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build
22 error Exit status 1
23 error Failed at the [email protected] start script 'webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the yarsk package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --content-base ./build
23 error You can get information on how to open an issue for this project with:
23 error npm bugs yarsk
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls yarsk
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Getting err about lodash

Trying it out...get this after npm install. Installing lodash does not fix it-

$ npm run serve

> [email protected] serve /Users/Jeff/repos/ghtemp
> webpack-dev-server --config conf/webpack.config.js --hot --progress --colors --inline --content-base ./build

http://localhost:8080/
webpack result is served from /
content is served from /Users/Jeff/repos/ghtemp/build
-25% 1/4 build modules
/Users/Jeff/repos/ghtemp/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:204
                    throw e;
                          ^
Error: Cannot find module 'lodash/lang/isFunction'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/Jeff/repos/ghtemp/node_modules/babel-core/lib/babel/api/node.js:13:34)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

saucelab?

would you mind adding an example for saucelab integration? I can't seem to make it work, getting

 Disconnected (1 times), because no message in 10000 ms.

libsass bindings not found

missing node deps? not a sass user here.

$ npm run build

> [email protected] build /Users/Jeff/repos/yarsk
> webpack --config conf/webpack.production.js

Error: `libsass` bindings not found. Try reinstalling `node-sass`?
    at getBinding (/Users/Jeff/repos/yarsk/node_modules/sass-loader/node_modules/node-sass/lib/index.js:22:11)
    at Object.<anonymous> (/Users/Jeff/repos/yarsk/node_modules/sass-loader/node_modules/node-sass/lib/index.js:188:23)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/Jeff/repos/yarsk/node_modules/sass-loader/index.js:4:12)
    at Module._compile (module.js:460:26)

40KB bundle?

So I followed your step by step which was pretty flawless for now. But this is the output I get:

                               Asset       Size  Chunks             Chunk Names
f81123791caadd01a948c1bc8d3082ef.jpg     766 kB          [emitted]  
         app.5424fa5a93311efc1d88.js     154 kB       0  [emitted]  main
        app.5424fa5a93311efc1d88.css    1.98 kB       0  [emitted]  main
                          index.html  398 bytes          [emitted]  

Therefore it seems that your bundle size is really more like 154kB rather than 40...

Could you please check on your end. Because if you get 40kB I want to know how :)

Webpack newbie

Hi,
I am refactoring a react project and jsx with your project.
I do not know webpack and I am learning it now.
I was loading a json file first by making an ajax request on /myjson.json for instance to build Dom page then with react.
How can i serve this json file while using server deserved by your npm server start command ?
Thanks in advance,
Julien

Add optional eslint support

Just need to pull this in from bradleyboy/react-todo-flummox

question about SEO

Hi,

So nice kit.

Could you advise me about SEO results if I only host my react website with no server rendering.

It is just a one page presentation website, is it correct in term of crawling and indexation.

My React renders some section with text inside..

Thanks,

Julien

Add expressjs support

Please add the support expressjs

ReferenceError: couldn't resolve escope/referencer

Hello @bradleyboy , thanks for this amazing starter kit. I am developing an application using your starter kit and I am getting the following error while I am trying to run npm start

`
➜ analyze git:(master) ✗ npm start

[email protected] start /Users/anup/projects/analyze
webpack-dev-server --config conf/webpack.config.js --hot --history-api-fallback --progress --colors --content-base ./build --host 0.0.0.0

0% compilehttp://0.0.0.0:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/anup/projects/analyze/build
404s will fallback to /index.html
10% 0/1 build modulesReferenceError: couldn't resolve escope/referencer
at monkeypatch (/Users/anup/projects/analyze/node_modules/babel-eslint/index.js:85:11)
at Object.exports.parse (/Users/anup/projects/analyze/node_modules/babel-eslint/index.js:422:5)
at parse (/Users/anup/projects/analyze/node_modules/eslint/lib/eslint.js:462:27)
at EventEmitter.module.exports.api.verify (/Users/anup/projects/analyze/node_modules/eslint/lib/eslint.js:614:15)
at processText (/Users/anup/projects/analyze/node_modules/eslint/lib/cli-engine.js:225:23)
at CLIEngine.executeOnText (/Users/anup/projects/analyze/node_modules/eslint/lib/cli-engine.js:336:22)
at lint (/Users/anup/projects/analyze/node_modules/eslint-loader/index.js:17:20)
at Object.module.exports (/Users/anup/projects/analyze/node_modules/eslint-loader/index.js:80:3)
at WEBPACK_CORE_LOADER_EXECUTION (/Users/anup/projects/analyze/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
at runSyncOrAsync (/Users/anup/projects/analyze/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
at nextLoader (/Users/anup/projects/analyze/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
at /Users/anup/projects/analyze/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/anup/projects/analyze/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/anup/projects/analyze/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/Cellar/node/6.3.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.3.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: webpack-dev-server --config conf/webpack.config.js --hot --history-api-fallback --progress --colors --content-base ./build --host 0.0.0.0
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --config conf/webpack.config.js --hot --history-api-fallback --progress --colors --content-base ./build --host 0.0.0.0'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the yarsk package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --config conf/webpack.config.js --hot --history-api-fallback --progress --colors --content-base ./build --host 0.0.0.0
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs yarsk
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls yarsk
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/anup/projects/analyze/npm-debug.log
➜ analyze git:(master) ✗
`

I tried the following steps and I am still not able to find where I am going wrong:

• removed the node modules and installed them again.
• rm -rf node_modules && npm cache clean && npm install;

My configuration and versions of npm:

• npm version: 3.10.3
• nodejs version: 6.3.0
• react version: 15.2.1

Can you help me with the following issue and help me out?

Switch to react-transform-hmr once stateless functions are working

react-transform-hmr is the new react-hot-loader. Should switch once stateless functions are working and also change some of the yarsk's demo code to use stateless fns:

gaearon/react-transform-hmr#6

css classnames

Hi,

Just wondering. Is there an easy way to give the generated local css classnames a more readable name so you can trace them back easily to the css classnames for debugging?

running the /dist using outside server background image is not shown.

npm start and go to http:localhost:8080\index.html all is well. Close browser and stop server then..

npm install -g http-server

npm run build
cd dist
http-server

Go to same http:localhost:8080\index.html and only see black screen (missing the bg image) all other content is there.

Sourcemaps?

For browsers / devtools like Chrome and Firefox that support sourcemaps, it would be great to have generated sourcemaps.

Add less and scss support

In case Sass ain't your thing.

how to generate sourceMaps for production mode?

Babel polyfill required for some features/browsers

Forgive me if this is common knowledge, but it might be nice to throw something in the README about needing to npm install babel --save and put require("babel/register"); into Application/index.jsx. This includes the Babel polyfill in the build, which I believe is required in certain browsers for things like Symbol.iterator. My app was failing to load on iOS and OS X Safari without the polyfill.

express and server rendering

Hi again,

I have tried using generated react app to be rendered on server side, by instance with Express with no success...

Would you mind do provide a simple example.

My idea was to use generated ES5 js sources instead of ES6 not handled quite well with Express.
Then see if bundle can be digest in server express code to call Application react root node.

var express = require('express')
  , app = express()
  , React = require('react/addons')
  , components = require('TODO'); // js react component file ? app.js ?

var Application = React.createFactory(components.Application);  

// application
app.get("/*", function(req, res) {
  res.contentType = "text/html; charset=utf8";
  var html = Application();
  res.end(html);  
});


var port = +(process.env.PORT || 8080);
app.listen(port, function() {
  console.log("Server listening on port " + port);
});

I have looked into react-starter but looks complicated and not ES6 by default

Update to sass-loader 1.0.0 once stable

sass-loader 1.0 offers a new handy feature of handling import statements like require(). However, there is an issue that needs resolving before pulling this in (webpack-contrib/sass-loader#65).

Cannot GET /

i'm trying to start the server with the command

npm start

everything builds smoothly but when i go to http://localhost:8080 i see the error

Cannot GET /

i think that maybe there's something wrong with HtmlWebpackPlugin configuration.

Yeoman?

A Yeoman generator might be interesting. Would be cleaner than having to fork this repo each time you start a new project:

http://yeoman.io/authoring/index.html

Triying to create a yo angular app

yo angular

 _-----_
|       |    .--------------------------.
|--(o)--|    |    Welcome to Yeoman,    |

---------´ | ladies and gentlemen! | ( _´U_ ) '--------------------------'
/_A\
| ~ |
**'.**.'__
´ |° ´ Y

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js
create app/styles/main.scss
create app/index.html
create bower.json
identical .bowerrc
create package.json
create Gruntfile.js
create README.md
invoke angular:common:/usr/local/lib/node_modules/generator-angular/app/index.js
identical .editorconfig
identical .gitattributes
identical .jshintrc
identical .yo-rc.json
identical .gitignore
create test/.jshintrc
create app/.buildignore
create app/.htaccess
create app/404.html
create app/favicon.ico
create app/robots.txt
create app/views/main.html
create app/images/yeoman.png
invoke angular:main:/usr/local/lib/node_modules/generator-angular/app/index.js
create app/scripts/app.js
invoke angular:controller:/usr/local/lib/node_modules/generator-angular/app/index.js
create app/scripts/controllers/main.js
create test/spec/controllers/main.js
module.js:338
throw err;
^
Error: Cannot find module 'lodash'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/usr/local/lib/node_modules/generator-karma/node_modules/yeoman-generator/lib/env/index.js:6:9)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

Remove HTML template duplication

Right now, we have build/index.html for the dev HTML and conf/tmpl.html which is used for npm run build and the GitHub pages build. Would be nice to have them source the same template, as for now you have to make changes in two places.

Also, getting this into webpack would allow for auto reload when changes to the HTML page are made.