├── .babelrc ├── .eslintrc ├── .gitignore ├── .jshintrc ├── LICENSE ├── README.md ├── index.html ├── package.json ├── server.js ├── src ├── App.js ├── app.css └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 0 3 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "babel-eslint", 11 | "rules": { 12 | "quotes": [2, "single"], 13 | "strict": [2, "never"], 14 | "react/jsx-uses-react": 2, 15 | "react/jsx-uses-vars": 2, 16 | "react/react-in-jsx-scope": 2 17 | }, 18 | "plugins": [ 19 | "react" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "newcap": false 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Dan Abramov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-basscss-hot-boilerplate 2 | 3 | Fork of [gaearon/react-hot-boilerplate](https://github.com/gaearon/react-hot-boilerplate) 4 | with [Basscss](http://basscss.com) and [Rebass](http://jxnblk.com/rebass). 5 | 6 | Uses style-loader, css-loader, postcss-loader, and cssnext. 7 | 8 | ## Usage 9 | 10 | ``` 11 | npm install 12 | npm start 13 | open http://localhost:3000 14 | ``` 15 | 16 | Edit `src/App.js` to get started. 17 | 18 | ### Editing CSS 19 | 20 | The `src/app.css` is imported into `App.js` and is compiled through [postcss-basscss](https://github.com/basscss/postcss-basscss), which includes [conformance checking for Basscss](https://github.com/basscss/postcss-basscss#basscss-conformance). 21 | 22 | To adjust default custom property and custom media values, edit `app.css` or pass values in as options in `webpack.config.js`. Values defined in `webpack.config.js` will override those in the CSS file. 23 | 24 | ### Importing Rebass Components 25 | 26 | ```js 27 | import React, { Component } from 'react' 28 | import { Row, Col, Button } from 'rebass' 29 | ``` 30 | 31 | The complete list of components can be found on http://jxnblk.com/rebass 32 | 33 | #### Branches 34 | 35 | - The `nobass` branch has PostCSS set up, but without Basscss or Rebass 36 | - The `sass-loader` branch is set up for Sass if you’re not comfortable with CSS 37 | 38 | --- 39 | 40 | **Original README follows** 41 | 42 | react-hot-boilerplate 43 | ===================== 44 | 45 | The minimal dev environment to enable live-editing React components. 46 | 47 | ### Usage 48 | 49 | ``` 50 | npm install 51 | npm start 52 | open http://localhost:3000 53 | ``` 54 | 55 | Now edit `src/App.js`. 56 | Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922). 57 | 58 | ### Linting 59 | 60 | This boilerplate project includes React-friendly ESLint configuration. 61 | 62 | ``` 63 | npm run lint 64 | ``` 65 | 66 | ### Using `0.0.0.0` as Host 67 | 68 | You may want to change the host in `server.js` and `webpack.config.js` from `localhost` to `0.0.0.0` to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM. 69 | 70 | ### Missing Features 71 | 72 | This boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you'll want to add a separate config for production with hot reloading disabled and minification enabled. You'll also want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into [other starter kits](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#starter-kits). 73 | 74 | ### Dependencies 75 | 76 | * React 77 | * Webpack 78 | * [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 79 | * [babel-loader](https://github.com/babel/babel-loader) 80 | * [react-hot-loader](https://github.com/gaearon/react-hot-loader) 81 | 82 | ### Resources 83 | 84 | * [Demo video](http://vimeo.com/100010922) 85 | * [react-hot-loader on Github](https://github.com/gaearon/react-hot-loader) 86 | * [Integrating JSX live reload into your workflow](http://gaearon.github.io/react-hot-loader/getstarted/) 87 | * Ping dan_abramov on Twitter or #reactjs IRC 88 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Sample App 4 | 5 | 6 |
7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hot-boilerplate", 3 | "version": "1.0.0", 4 | "description": "Boilerplate for ReactJS project with hot code reloading", 5 | "scripts": { 6 | "lint": "eslint src", 7 | "start": "node server.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/gaearon/react-hot-boilerplate.git" 12 | }, 13 | "keywords": [ 14 | "boilerplate", 15 | "edit", 16 | "hmr", 17 | "hot", 18 | "live", 19 | "react", 20 | "reactjs", 21 | "reload", 22 | "webpack" 23 | ], 24 | "author": "Dan Abramov (http://github.com/gaearon)", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/gaearon/react-hot-boilerplate/issues" 28 | }, 29 | "homepage": "https://github.com/gaearon/react-hot-boilerplate", 30 | "devDependencies": { 31 | "babel-core": "^5.4.7", 32 | "babel-eslint": "^3.1.9", 33 | "babel-loader": "^5.1.2", 34 | "basscss": "^7.0.0", 35 | "css-loader": "^0.15.3", 36 | "cssnext": "^1.8.0", 37 | "eslint-plugin-react": "^2.3.0", 38 | "node-libs-browser": "^0.5.2", 39 | "postcss-basscss": "^0.2.3", 40 | "postcss-loader": "^0.5.1", 41 | "react-hot-loader": "^1.2.7", 42 | "rebass": "^0.1.4", 43 | "style-loader": "^0.12.3", 44 | "webpack": "^1.9.6", 45 | "webpack-dev-server": "^1.8.2" 46 | }, 47 | "dependencies": { 48 | "react": "^0.13.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var WebpackDevServer = require('webpack-dev-server'); 3 | var config = require('./webpack.config'); 4 | 5 | new WebpackDevServer(webpack(config), { 6 | publicPath: config.output.publicPath, 7 | hot: true, 8 | historyApiFallback: true 9 | }).listen(3000, 'localhost', function (err, result) { 10 | if (err) { 11 | console.log(err); 12 | } 13 | 14 | console.log('Listening at localhost:3000'); 15 | }); 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react' 3 | import css from './app.css' 4 | import { Container, PageHeader } from 'rebass' 5 | 6 | export default class App extends Component { 7 | render() { 8 | return ( 9 | 10 | 12 | 13 | ) 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /src/app.css: -------------------------------------------------------------------------------- 1 | 2 | /* Put custom app styles here. 3 | * Basscss is loaded through the postcss-basscss plugin 4 | */ 5 | 6 | 7 | /* 8 | * Adjust custom media query values here 9 | * or in webpack.config.js 10 | * 11 | * E.g. 12 | * @custom-media --breakpoint-sm (min-width: 42em); 13 | */ 14 | 15 | :root { 16 | /* Adjust custom property values (i.e. variables) here 17 | * or in webpack.config.js 18 | * 19 | * E.g. 20 | * --font-family: 'Avenir Next', 'Helvetica Neue', Helvetica, sans-serif; 21 | */ 22 | } 23 | 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from './App'; 3 | 4 | React.render(, document.getElementById('root')); 5 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | var path = require('path') 3 | var webpack = require('webpack') 4 | var basscss = require('postcss-basscss') 5 | var cssnext = require('cssnext') 6 | 7 | module.exports = { 8 | 9 | devtool: 'eval', 10 | 11 | entry: [ 12 | 'webpack-dev-server/client?http://localhost:3000', 13 | 'webpack/hot/only-dev-server', 14 | './src/index' 15 | ], 16 | 17 | output: { 18 | path: path.join(__dirname, 'dist'), 19 | filename: 'bundle.js', 20 | publicPath: '/static/' 21 | }, 22 | 23 | plugins: [ 24 | new webpack.HotModuleReplacementPlugin(), 25 | new webpack.NoErrorsPlugin() 26 | ], 27 | 28 | resolve: { 29 | extensions: ['', '.js', '.jsx'] 30 | }, 31 | 32 | module: { 33 | loaders: [ 34 | { 35 | test: /\.jsx?$/, 36 | loaders: ['react-hot', 'babel'], 37 | include: path.join(__dirname, 'src') 38 | }, 39 | { 40 | test: /\.css$/, 41 | loader: 'style-loader!css-loader!postcss-loader' 42 | } 43 | ] 44 | }, 45 | 46 | postcss: function () { 47 | return [ 48 | basscss({ 49 | raw: true 50 | }), 51 | cssnext({ 52 | features: { 53 | customProperties: { 54 | variables: { 55 | // Example 56 | // 'font-family': '"Avenir Next", Avenir, "Helvetica Neue", Helvetica, sans-serif' 57 | } 58 | } 59 | } 60 | }) 61 | ] 62 | } 63 | 64 | } 65 | 66 | --------------------------------------------------------------------------------