A minimal skeleton for building testable React apps using Babel

Pretty straightforward idea, see #3 for more info.

TODO:

• [x] Add Webpack and related dependencies
• [x] Remove no longer needed dependencies
• [x] Ensure watch and build scripts work
• [x] Setup headless unit testing and ensure test script works
• [x] Code coverage
• [x] React Hot Loader

Let me know what you guys think, would like to get the community's opinion on best practices with Webpack while still maintaining the simplicity of the skeleton.

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. https://github.com/webpack/extract-text-webpack-plugin/issues/57 https://github.com/webpack/webpack/issues/215

I made a couple of changes to make the app deployable on heroku as it gave an error before.

I'm very novice with webpack and with the process.env.PRODUCTION variable so my solution is probably incorrect.

I have removed ExtractTextPlugin from package.json and webpack configs, because it doesn't support css hot reloading.

Without it, css hot reload works. This should resolve issue #37 - live reload of css files.

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?

This allows the server.js to be independent from webpack-dev-server. Since it allows to reload the server without breaking the hot-loader, I also added nodemon, in order to automatically reload the server when a file changes.

Technically, the server.js listens to the 8081 port, and the webpack-dev-server (which is listening to 8080) creates a proxy to the server (using the content-base-taget option)

It also allows to have the same index.html file in dev and production environment, because the dev-server and the production-server are listening to the same port

To launch the server with webpack-dev-server and nodemon, use the dev npm script.

PS: Sorry if I did any spelling error in the README file or in this PR, I'm French :no_mouth:

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

• https://github.com/petehunt/webpack-howto
• https://gist.github.com/substack/68f8d502be42d5cd4942

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.

Having a codebase split between es5 and es6 is confusing, this PR shows a way to have the server in es6 without breaking everything. Again I am quite a novice at this so it might not be too helpful.

I really like the starting point, but I did not like opening 2 terminals. So I added a Procfile which runs the server, watch and test-watch tasks at the same time. In addition, I added a npm task which handles the file with either the foreman ruby gem or node-forman. In case you're interested... :wink:

• run against node 4, 5, 6
• make sure building production version of app succeeds
• sudo: false is recommended by Travis; then it uses their docker setup I believe

Build is passing with this setup, eg: https://travis-ci.org/harlantwood/essential-react/builds/130282326

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.

Hi

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",

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

This fixes issues when deploying to Heroku, #41

• import for ES6 modules is not supported yet natively, but server.js has import statement. This project does not build server.js with any build tool to augument import, so nodejs fails on that import line, had to fix it
• if you deploy to Heroku from command line, environment variables in app.json are ignored, so you need to set them manually