A minimal skeleton for building testable React apps using Babel

Overview

Essential React

Travis branch Coveralls


Deploy

A minimal skeleton for building testable React apps using Babel.

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.

Changelog

Comments
  • Switch over to Webpack from Browserify

    Switch over to Webpack from Browserify

    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.

    opened by pheuter 8
  • SOLVED: Incorrect CSS import order

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

    opened by scottanglr 5
  • Possible fix for heroku deployment

    Possible fix for heroku deployment

    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.

    opened by lolcookie 5
  • Fix for issue #37 - hot reload of css files.

    Fix for issue #37 - hot reload of css files.

    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.

    opened by vkomulai 4
  • Stupid/Basic question about session, how to login and route to it?

    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?

    opened by therealmarv 4
  • Extract webpack-dev-server from server.js to npm scripts

    Extract webpack-dev-server from server.js to npm scripts

    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:

    opened by sandhose 4
  • Switch over to using Webpack instead of Browserify

    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

    • 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.

    enhancement WIP 
    opened by pheuter 4
  • Using es6 for server

    Using es6 for server

    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.

    opened by lolcookie 3
  • Added Procfile and

    Added Procfile and "npm start dev" task.

    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:

    opened by martinbalfanz 3
  • build production version in travis; run against node 4,5,6

    build production version in travis; run against node 4,5,6

    • 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

    opened by harlantwood 2
  • Warning: It looks like you're using a minified copy of the development build of React.

    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.

    opened by harlantwood 2
  • Why is there warning about using only minified dev build of react?

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

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

    opened by vladimirpekez 3
  • npm start fails on osx mavericks and node version 6.40.

    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. [email protected]~/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

    opened by calirails 1
  • fixing Heroku deployment

    fixing Heroku deployment

    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
    opened by sizov 3
Releases(v0.5.1)
  • v0.5.1(Jul 31, 2018)

  • v0.5.0(Apr 16, 2016)

  • v0.4.0(Feb 28, 2016)

    Major refactor to bring dependencies up-to-date:

    • Upgrade React 0.13 -> 0.14
    • Upgrade React Router 0.x -> 2.0
    • Upgrade Babel 5 -> 6
    • Replace Karma and Istanbul with ava and nyc
    • No more custom routers
    • Added server-side Babel require hook
    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Sep 12, 2015)

  • v0.2.5(May 29, 2015)

  • v0.2.4(May 16, 2015)

  • v0.2.3(Apr 5, 2015)

    • Use the HTML5 history API for cleaner URLs - @paulyoung
    • Wrapped up remaining unit tests, better code coverage
    • PRODUCTION environment variable now serves static file when running node server.js
    • Build app upon npm postinstall
    • Instant deploy with Heroku button
    Source code(tar.gz)
    Source code(zip)
  • v0.2.2(Mar 21, 2015)

  • v0.2.1(Mar 21, 2015)

  • v0.2.0(Mar 14, 2015)

    Major changes:

    • Moved underlying module / build system from Browserify to Webpack.
    • Using React Hot Loader under the scenes to automatically reload file changes during local dev
    • Using Karma to run test suite and generate code coverage reports

    Removed no longer necessary dependencies:

    • browserify
    • watchify
    • expect.js
    • xhr
    • es5-shim
    • console-polyfill

    Continuing to maintain core philosophies of minimal tooling and testing:

    • Simplified run scripts: watch, watch-js and server replaced with server
    • No additional commands needed
    • Tests now include Sinon for mocks and Chai for assertions, no more expect.js
    • Same src/ directory structure
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Mar 8, 2015)

Owner
Mark Fayngersh
Mark Fayngersh
A skeleton for un-bundled react projects.

react-es2015-template A skeleton for un-bundled react projects. Install this command will do an npm install for you npm run vendor Build npm run build

null 3 Oct 12, 2021
React skeleton app

React Skeleton App I think this project is still lacking a few tests and some polish to be considered "production" quality, but I've already spent too

Nik 2 Mar 4, 2022
Dashboard made complete with skeleton structure and dark mode switcher

Dashboard made complete with skeleton structure and dark mode switcher. Using localstorage and api.. On Progress Development

Ferdian Ahmad R 2 Apr 26, 2022
Starting project with react from scratch using webpack and babel

React Part 2 Meliuz Iniciando projeto com react do zero usando webpack e babel. O que é? (Onde vivem? O que comem?) webpack (com “w” minúsculo, respei

Douglas Morais 4 Oct 30, 2021
demo with react,ant-design,redux,react-router,webpack,babel

star-initReact-example A demo with star-initReact-example ##效果截图 首页 列表页 弹框 表格组件 echart 使用技术和实现功能 webpack + React +React-router + React-redux +ES6 + an

对影三人 76 Apr 15, 2022
A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

Inderpal Singh 20 Oct 24, 2021
A boilerplate of SPA, built with React.js, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design...

Getting start Clone this repo: $ git clone https://github.com/jovey-zheng/react-start-kit.git Install dependenices: $ npm i Start the project: $ npm

Jovey Zheng 109 Mar 1, 2022
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

null 22 Aug 5, 2022
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Cory House 9.8k Sep 23, 2022
Babel React Koa Hot Universal Boilerplate

Babel React Koa - Hot Universal Boilerplate Breko Hub Breko hub is a github repository that helps anyone create new JavaScript applications. Giving yo

Thomas 142 Aug 8, 2022
A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Colin Meinke 65 Jul 1, 2020
Large SPA boilerplate use react redux webpack babel es6 express browsync nodemon...

React-workflow Why Large SPA application is hard to design, because a lot of things need to consider The boilerplate had solved the difficulty for

云霜儿 66 Mar 27, 2021
Large SPA boilerplate use react redux webpack babel es6 express browsync nodemon...

React-workflow Why Large SPA application is hard to design, because a lot of things need to consider The boilerplate had solved the difficulty for

云霜儿 66 Mar 27, 2021
Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

React package boilerplate by HackingBay Rollup + React 17 + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterpri

HackingBay 2 Jan 19, 2022
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS

Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It com

Varayut Lerdkanlayanawat 993 Sep 20, 2022
Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Gabriel Rohden 3 Jul 7, 2022
Vtexio-react-apps - Apps react para plafaforma VTEX.

Projeto Modal + Apps Extras Projeto modal setando cookies. Desenvolvido em React + TypeScript para aplicação em e-commerce VTEXIO. ?? Este projeto se

Marcelo 1 Jan 3, 2022
An opinionated CLI for building redux/react apps quicker

______ _ _____ _ _____ | ___ \ | | / __ \| | |_ _| | |_/ /___ __| |_ ___ ________| / \/

Spencer Dixon 890 Jul 26, 2022
Small boilerplate project for building React apps with Serverless functions

Serverless + React Stack A simple, containerized project for quickly starting with Serverless and React. The goal of this project is to containerize d

Kent Safranski 2 Feb 8, 2022