pheuter / essential-react Goto Github PK

View Code? Open in Web Editor NEW

2.0K 44.0 131.0 352 KB

A minimal skeleton for building testable React apps using Babel

License: MIT License

JavaScript 81.68% HTML 2.65% CSS 15.67%

react babel webpack boilerplate skeleton

essential-react's Introduction

Essential React

A minimal skeleton for building testable React apps using Babel.

Design Goals
Getting Started
Commands
- server
- build
- test
- coveralls
- clean
Changelog

Design Goals

Use fewer tools (no yeoman, gulp, bower, etc...)
Babel 6 with Webpack and Hot Loader
Fast testing with mocked-out DOM
Import css files as class names
Separate Smart and Dumb components
No specific implementation of Flux or data fetching patterns

Getting Started

$ npm install

Start the local dev server:

$ npm run server

Navigate to http://localhost:8080/ to view the app.

Commands

A core philosophy of this skeleton app is to keep the tooling to a minimum. For this reason, you can find all the commands in the scripts section of package.json.

server

$ npm run server

Input: src/main.jsx

This leverages React Hot Loader to automatically start a local dev server and refresh file changes on the fly without reloading the page.

It also automatically includes source maps, allowing you to browse code and set breakpoints on the original ES6 code:

build

$ npm run build

Input: src/main.jsx

Output: build/app.js

Build minified app for production using the production shortcut.

test

$ npm test

Input: test/main.js

Output: coverage/

Leverages ava to execute the test suite and generate code coverage reports using nyc

coveralls

$ npm run coveralls

Input: coverage/lcov.info

Sends the code coverage report generated by nyc to Coveralls.

clean

$ npm run clean

Input: build/app.js

Removes the compiled app file from build.

essential-react's People

Contributors

Stargazers

Watchers

Forkers

sderosiaux viktor-evdokimov martinbalfanz drooids jaredwilli bobbijvoet ekeric13 gittmaan lukehoban chrisbuttery kevnz kaosat-dev sandhose weconnect dtoxin duan112358 chaabni paulyoung eiriklv alopes devlato react-ut yanivefraim danielma imuchnik alex-react esaul joshmilo janusnic stevenlangbroek ndjoe chaosmaple owmf shane935 ghostlandr secretyouth therealmarv lyuehh favorit dallonf mydearxym claudiopro jonekee enozr suminda123 jwcastillo brakowski gabrielfirmacion marlncpe i5ting malucky auser subvisual srameshr sachgits svoeller99 hhjcz exodia witer5 davedx michalkononenko pedrogarciagarcia mdenisov dylanb-dev chrisptsang zhufengnodejs madanhar jakejacobs guillermoparedes prog1dev leecade faddi balupton pennyandsean bencallis1 birdwell sgantrim brian-griffin dannycroft vkomulai alivedise timfpark sizov harlantwood tb jefferydutra fantix hw-hello-world wuyanan 2015feng ruicky junkycoder franzherzog charles-tai yuwenbin1988 mizukusak krlosg robin-- yunchuwang boplennon

essential-react's Issues

livereload of css

How can we add support for live reload of css with this setup?

Hot Reloading

Would be nice to implement the React Hot Loader as part of the watch process.

http://gaearon.github.io/react-hot-loader/getstarted/

Less support

It would be great to have an example of getting less support with this setup

Thanks

Use webpack-dev-server and drop the express dependency.

Stupid/Basic question about session, how to login and route to it?

I've taken this template and added a simple button on it to change user state (from false/logged off to true/logged on).

But how can I route and let the user switch from homepage to the landing page? I cannot get away from landing page or homepage.

So basically... how do I make the page refresh with a logged in (user=true) status?

Can't find where the <head> elements come from

Where is the DOCTYPE and header content generated from?

npm start fails on osx mavericks and node version 6.40.

I've cloned this as a starter kit. I was able to run npm install without error but running npm start, resulted int this error that I can't quite figure out what to do with logged output.
calvin@~/Documents/Safezone/Projects/fb-react/react-starter-kit$ npm start

[email protected] start /Users/calvin/Documents/Safezone/Projects/fb-react/react-starter-kit
node server.js

/Users/calvin/Documents/Safezone/Projects/fb-react/react-starter-kit/server.js:1
(function (exports, require, module, __filename, __dirname) { import express from 'express';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:528:28)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.runMain (module.js:590:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node/6.4.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.4.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: node server.js
npm ERR! Exit status 1

Node v6.0.0 support?

Hi @pheuter, thanks for this great boilerplate! Have you tested support for v6.0.0 on the v0.5.0 branch? I'm noticing better npm install speeds (a clean install went from 3m45s to 2m2s in real time when comparing node v5.7.1 vs v6.0.0) but am running into the following error with Node v6.0.0 and npm 3.8.6:

npm run server

> [email protected] server /wrk/essential-react-node6
> node start.js

Essential React listening at http://:::8080
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#before is deprecated. Use Node#raws.before
Node#removeSelf is deprecated. Use Node#remove.
(node) v8::ObjectTemplate::Set() with non-primitive values is deprecated
(node) and will stop working in the next major release.

==== JS stack trace =========================================

Security context: 0x11f505dc9fa9 <JS Object>#0#
    1: .node [module.js:568] [pc=0x2316ffd24064] (this=0x12e9cee0a999 <an Object with map 0x18348d491841>#1#,module=0x3893efda2921 <a Module with map 0x18348d4181b9>#2#,filename=0x3893efda28f9 <String[97]: /wrk/essential-react-node6/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node>)
    2: load [module.js:~447] [pc=0x2316ff4e79d6] (this=0x3893efda2921 <a Module with map 0x18348d4181b9>#2#,filename=0x3893efda28f9 <String[97]: /wrk/essential-react-node6/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node>)
    3: tryModuleLoad(aka tryModuleLoad) [module.js:415] [pc=0x2316ff33899d] (this=0x11f505d04189 <undefined>,module=0x3893efda2921 <a Module with map 0x18348d4181b9>#2#,filename=0x3893efda28f9 <String[97]: /wrk/essential-react-node6/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node>)
    4: _load [module.js:~381] [pc=0x2316ff92298b=0x11f505de99f1 <JS Global Object>#37#,err=0x11f505d04101 <null>)
  165: /* anonymous */ [/wrk/essential-react-node6/node_modules/async/lib/async.js:52] [pc=0x2316ff6bf525] (this=0x11f505de99f1 <JS Global Object>#37#)
  166: arguments adaptor frame: 1->0
  167: done [/wrk/essential-react-node6/node_modules/async/lib/async.js:~238] [pc=0x2316ff452da4] (this=0x11f505de99f1 <JS Global Object>#37#,err=0x11f505d04189 <undefined>)
  168: arguments adaptor frame: 0->1
  169: /* anonymous */ [/wrk/essential-react-node6/node_modules/async/lib/async.js:44] [pc=0x2316ff66f0d4] (this=0x11f505de99f1 <JS Global Object>#37#)
  170: /* anonymous */ [/wrk/essential-react-node6/node_modules/webpack/lib/Compilation.js:332] [pc=0x2316ff85c261] (this=0x11f505de99f1 <JS Global Object>#37#,err=0x11f505d04101 <null>)
  171: /* anonymous */ [/wrk/essential-react-node6/node_modules/async/lib/async.js:52] [pc=0x2316ff6bf525] (this=0x11f505de99f1 <JS Global Object>#37#)
  172: arguments adaptor frame: 1->0
  173: done [/wrk/ess
==== C stack trace ===============================

 1: v8::Template::Set(v8::Local<v8::Name>, v8::Local<v8::Data>, v8::PropertyAttribute)
 2: fse::FSEvents::Initialize(v8::Local<v8::Object>)
 3: node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&)
 4: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&))
 5: v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::(anonymous namespace)::BuiltinArguments<(v8::internal::BuiltinExtraArguments)1>)
 6: v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*)
 7: 0x2316ff20961b
(node) v8::ObjectTemplate::Set() with non-primitive values is deprecated
(node) and will stop working in the next major release.

==== JS stack trace =========================================

Security context: 0x11f505dc9fa9 <JS Object>#0#
    1: .node [module.js:568] [pc=0x2316ffd24064] (this=0x12e9cee0a999 <an Object with map 0x18348d491841>#1#,module=0x3893efda2921 <a Module with map 0x18348d4181b9>#2#,filename=0x3893efda28f9 <String[97]: /wrk/essential-react-node6/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node>)
    2: load [module.js:~447] [pc=0x2316ff4e79d6] (this=0x3893efda2921 <a Module with map 0x18348d4181b9>#2#,filename=0x3893efda28f9 <String[97]: /wrk/essential-react-node6/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node>)
    3: tryModuleLoad(aka tryModuleLoad) [module.js:415] [pc=0x2316ff33899d] (this=0x11f505d04189 <undefined>,module=0x3893efda2921 <a Module with map 0x18348d4181b9>#2#,filename=0x3893efda28f9 <String[97]: /wrk/essential-react-node6/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node>)
    4: _load [module.js:~381] [pc=0x2316ff92298b
==== C stack trace ===============================

 1: v8::Template::Set(v8::Local<v8::Name>, v8::Local<v8::Data>, v8::PropertyAttribute)
 2: fse::FSEvents::Initialize(v8::Local<v8::Object>)
 3: node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&)
 4: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&))
 5: v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::(anonymous namespace)::BuiltinArguments<(v8::internal::BuiltinExtraArguments)1>)
 6: v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*)
 7: 0x2316ff20961b

cannot load 'webpack'

> [email protected] test /Users/delphine/Development/Git/pheuter/essential-react
> PHANTOMJS_BIN=./node_modules/.bin/phantomjs ./node_modules/karma/bin/karma start karma.config.js

WARN [preprocess]: Can not load "webpack"!
  TypeError: undefined is not a function
  at Plugin.notifyKarmaAboutChanges (/Users/delphine/Development/Git/pheuter/essential-react/node_modules/karma-webpack/index.js:108:15)
  at Plugin.<anonymous> (/Users/delphine/Development/Git/pheuter/essential-react/node_modules/karma-webpack/index.js:72:9)
  at Compiler.applyPlugins (/Users/delphine/Development/Git/pheuter/essential-react/node_modules/webpack/node_modules/tapable/lib/Tapable.js:26:37)
  at Watching._done (/Users/delphine/Development/Git/pheuter/essential-react/node_modules/webpack/lib/Compiler.js:78:17)
  at Watching.<anonymous> (/Users/delphine/Development/Git/pheuter/essential-react/node_modules/webpack/lib/Compiler.js:61:18)
  at Compiler.emitRecords (/Users/delphine/Development/Git/pheuter/essential-react/node_modules/webpack/lib/Compiler.js:282:37)
  at Watching.<anonymous> (/Users/delphine/Development/Git/pheuter/essential-react/node_modules/webpack/lib/Compiler.js:58:19)
  at /Users/delphine/Development/Git/pheuter/essential-react/node_modules/webpack/lib/Compiler.js:275:11

This is the same as codymikol/karma-webpack#70

I'm preparing a PR to upgrade karma to 0.13

Use fetch

Maybe you should replace /common/request.js by fetch?
https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent
There is polyfill: https://github.com/github/fetch

Warning: It looks like you're using a minified copy of the development build of React.

After updating all packages (#42), I noticed this big red warning in the JS console, when viewing the production version (made with npm run build):

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

Not sure if this was an issue before #42 or not.

Not working Hot Loader

[Question] Measure code coverage on JSX, not on transpiled JS

This is more a question rather than an issue. I am struggling to find a configuration that allows me to measure code coverage on the JSX source. This project shows coverage on the code transpiled from JSX by babel. Would you know if it is even possible to measure coverage on the original JSX source?

Radium

Responsive design with media query mixins

NPM Install fails

I tried to run npm install essential-react. However, I get an error stating, "cannot find module webpack" . This template looks promising.

testing + modular css = unexpected token error

Hi there,

What would be the best approach for testing components that import a css file? Modular css does not seem to play well with ava/enzyme... I could find a discussion here that may be relevant, but the solutions found seem to make use of karma.

Use Unlicense instead of MIT

As this is just a skeleton that other people will take and redo, it would be nice if it was in the public domain, so we don't have to worry about giving attribution to files that we have modified - say even files we haven't.

http://spdx.org/licenses/Unlicense.html

SOLVED: Incorrect CSS import order

EDIT SOLUTION: It's simply because the base styling is imported after routes in the main.js file and therefore overrides the css imported with the components.

Hi, it seems that the css is being built in the wrong order. My understanding would be that base.css should be at the top of the stylesheet and then any other css in the components would be at the bottom, overriding the top. Any easy way to test this is to add this line to style.css in the login folder

h1{
    color: #00FF00;
}

It should override to the new color, but it actually stays its original color.

We can see that this style has been applied to the heading, but the css in base.css has overriden it. I had this issue in my project when trying to import bootstrap, and everything was in reverse order of where I wanted it to be. I found this issue had always been in the project by going back to an empty essential-react project.

I have spent many hours trying to debug this while also trying to learn webpack.

Edit: The below issues were different and led me on the wrong path to trying to fix it
I have seen this issue in many places, but have not been able to fix it from these, despite trying to disable extract-text-webpack, etc.
webpack-contrib/extract-text-webpack-plugin#57
webpack/webpack#215

Unexpected reserved word

I've installed all modules but when i launch "npm run server" i got this error:

/Volumes/Mac Data/Users/Elias/noteshare2/server.js:1
(function (exports, require, module, __filename, __dirname) { import express from 'express';
                                                              ^^^^^^

SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at loader (/Volumes/Mac Data/Users/Elias/noteshare2/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Volumes/Mac Data/Users/Elias/noteshare2/node_modules/babel-register/lib/node.js:136:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Volumes/Mac Data/Users/Elias/noteshare2/start.js:5:1)
    at Module._compile (module.js:409:26)

This is my log:
npm-debug.txt

Any ideas?

Support source map debugging

Right now to debug in browser dev tools webpack exposes the transpiled ES5 version of scripts.
If we could tell webpack to generate source maps for local debugging that would be awesome.

I'm still very new to all this so I have no idea how to do it but I've seen it in other webpack starter kits so it should be possible I think.

UPDATE
I've just read that it's supposed to support debugging the original ES6 files but it's not working for me...

Switch over to using Webpack instead of Browserify

Been hearing good things about Webpack, including a nice integration with the Hot Loader. Will assess potential to switch over from Browserify.

Note: This should minimally, if at all, affect the interface of the skeleton

Edit: Created a new branch where I will be making progress towards switching over to use Webpack. The core philosophy of minimal tooling is being respected as always. Minimal, if any, changes to the skeleton interface will be introduced.

Default Heroku deploy using button (without changing anything) builds but fails when running app

Hi pheuter,

Great starter kit!

Clicking "Deploy to Heroku" from this repo deploys and builds fine, but accessing the actual application causes "an unexpected error". Looking at the logs from heroku it seems there is a syntax error around "import from", i.e., something regarding Babel is not configured properly for Heroku?

I'm pretty new to all this Babel/ES6/webpack/react stuff so maybe it is something I'm doing completely wrong. Thanks in advance!

[CORS]

Are CORS support enabled? (i'm using axios)

how to setup it properly? there's nothing in README

add basic flux

Update React to v0.13

Images in readme.md are broken

The broken images all point to dropbox.

Solution proposal:
Maybe upload to imgur or even to the repo itself and pointing relative to it?!

deprecated api calls

Essential React listening at http://:::8080
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#before is deprecated. Use Node#raws.before
Node#removeSelf is deprecated. Use Node#remove.

Why is there warning about using only minified dev build of react?

After running:

npm run build

in my browser I get the following message:

app.js:1 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

Shouldn't npm run build take care of this?

In package JSON I can see production webpack config is used:
...
"scripts": {
...
"build": "webpack -p --progress --config webpack.production.config.js",