react-stylus-webpack-boilerplate

A starter kit for creating applications using react and stylus, client side rendering, development and production configurations and hot reloading

React-Stylus-Webpack boilerplate

An opinionated starter kit for creating applications using react and stylus, client side rendering, development and production configurations and hot reloading

Tecnology stack: * Plain react (for now), no flux implementation in order to keep it simple (maybe create a fork later for redux/reflux/plain flux) * react-router for handling routes * Client side rendering (leaving isomorphic rendering for later) * ES6 with Babel * Stylus preprocessor for styles * react-jade-loader for using jade templates instead of JSX * Scoped styles using css-modules => http://glenmaddern.com/articles/css-modules * gulp for build automation * eslint for coding style enforcement * webpack for development and production bundling * webpack-dev-server for running locally, with hot reloading (styles, jsx, images, files)

You can check a running version here: https://alejofernandez.github.io/react-stylus-webpack-boilerplate react-stylus-webpack-boilerplate

How to use this starter kit

Install local modules

  • npm install

To run locally

  • npm run serve
  • open http://localhost:3000

To build distributable files

  • npm run build

To deploy to github pages

  • npm run deploy
  • open http://<your-github-account>.github.io/<your-repo-name>

About this boilerplate

Folder structure:

|- src
|   |- theme               // Theme definition stuff goes here, a base css framework (i.e. bootstrap)
|   |   |- framework.css   // overrides, mixins, variables
|   |   |- mixins.styl
|   |   |- variables.styl
|   |   |- helpers.styl
|   |   |- overrides.styl
|   |   |- base.styl       // Base file with all the includes
|   |   \- theme.styl      // Main theme file with global styles
|   |
|   |- components          // Dumb reusable components
|   |   |- Header
|   |   |- Footer
|   |   |   |- Footer.styl // Specific footer styles, includes common definition from './theme'
|   |   |   \- Footer.jsx  // Component logic
|   |   |
|   |   \- index.js
|   |
|   |- containers          // Complex views (smart components, pages, layouts)
|   |   |- Home
|   |   |   |- Home.styl   // Specific home styles, includes common definition from './theme'
|   |   |   \- Home.jsx    // Component logic
|   |   |- About
|   |   |
|   |   \- index.js
|   |
|   |- routes.js           // Routes for the application
|   \- index.js            // Entry point for the application
|
\-[build and configuration files]

Sample container (smart component):

// src/containers/App/App.js
import styles from './App.styl';
import React from 'react';
import { Footer, Header, Navbar } from '../../components';

const App = (props) => (
  <section id="application">
    <Header />
    <div className={styles.container}>
      <Navbar />
      <div className={styles.content}>
        {props.children}
      </div>
    </div>
    <Footer />
  </section>
);

App.propTypes = {
  children: React.PropTypes.node
};

export default App;

Sample component (dumb component):

// src/components/Header/Header.js
import styles from './Header.styl';
import React from 'react';

const Header = () => (
  <header className={styles.header}>
    <h1><a href="#/">React Stylus Webpack boilerplate</a></h1>
    <h2>A starter kit for creating applications using react and stylus</h2>
    <a className={styles.stylusLogo} href="https://learnboost.github.io/stylus/"></a>
    <a className={styles.reactLogo} href="https://facebook.github.io/react/"></a>
  </header>
);

export default Header;

Sample style file:

// src/components/Header/Header.styl
@import "../../theme/base"

.header
  background-color: get-deep-orange()
  color: get-white()
  padding: 60px 20px 50px 110px
  position: relative

Related Repositories

react-reflux-boilerplate-with-webpack

react-reflux-boilerplate-with-webpack

React + Reflux + CoffeeScript + Stylus Boilerplate with Webpack ...

boilerplate-webpack-react

boilerplate-webpack-react

Boilerplate project for Reactjs with webpack, gulp and stylus ...

react-stylus-webpack-boilerplate

react-stylus-webpack-boilerplate

A starter kit for creating applications using react and stylus, client side rendering, development and production configurations and hot reloading ...

backfire

backfire

:cyclone: Personal boilerplate for React.js focused on animation using react-gsap-enhancer with redux, react-sagas, webpack, stylus, postcss plugins. ...

boilerplate-webpack-react

boilerplate-webpack-react

Boilerplate project for Reactjs with webpack, gulp and stylus ...


Top Contributors

alejofernandez ghoshnirmalya nickfletcher ramasilveyra