- How to use this project * Setup * Common Tasks
- Tech Stacks * Node.js and Yarn * React with Redux * TypeScript and ES6+ * React Router 4 * Styling with Sass * Webpack 2 * ESLint
- Receipts * Configure Docker build workflow
# cd to the workspace folder
git clone --depth 1 [email protected]:chaione/web-template-ts-react-webpack.git my-project
cd my-project
yarn
yarn start| Command | Usage | Notes |
|---|---|---|
yarn start |
Start a dev server | http://localhost:8080 |
yarn build |
Build the optimized build in default(development) environment | Code will be minifed |
yarn build:staging |
Build the optimized build in staging environment | Minifed, comments remove, console log removed etc. |
yarn build:production |
Build the optimized build in production environment | Minifed, comments remove, console log removed etc. |
yarn docker:build |
Build the Docker image in dev environment | |
yarn docker:build:production |
Build the Docker image in production environment | |
yarn test |
Run test |
Node.js 6.10.3 LTS and Yarn 0.24.5 is our build environment. NVM is recommended for managing multiple Node.js versions similar to chruby or rvm on Ruby side.
React and Redux makes a great combo in structuring scalable web applications. We use React as the view engine and let Redux help us manage the system states.
redux-devtools-extension has been baked into the template as well. It's a useful and handy tool for developers to be able to inspect and manipulate the store right from the developer console.
TypeScript is the new standard for all future ChaiOne front-end projects. But it's not mandatory. If you have particular requirements or project needs, ES6 or beyond is still supported in this template through Babel.
Webpack is the build tool we use to compiling and packing the application. The configuration files can be found at configs/webpack.
Sass is the default styling choices. We follow the widely used 7-1 pattern in most cases. A complete Sass guideline can be found here.
On top of Sass, React has made the inline class name changes very easy. With the combination of classnames packages, we can easily add or remove classes based on a component's state or a system state.
A quick example
import React from 'react';
import cx from 'classnames';
export default class extends React.Component {
render() {
const {date, month} = this.props;
let dpClasses = cx('dp-date', {
current: date.month() === month,
future: date.month() > month,
past: date.month() < month
});
return (
<div
className={dpClasses}
key={date}
onClick={this.props.updateDate.bind(this, date)}>
{date.date()}
</div>
);
}
}For a better demonstration of how traditional Sass 7-1 pattern works with React's ability to change classnames in the JS level, here's a complete reading.
Edit the Dockerfile saved at configs/Dockerfile.