React + css-modulesify + gulp + browserify
This generator creates a new frontend-only project using React. It makes no assumption on your backend. It transpiles all the stuff into
static folder, and you can point your statics folder to it on your server, or link it anywhere you want.
The new project use css-modulesify to provide a webpack-like way of importing styles from css. It provides component scoped css isolation to avoid naming conflict.
Ideally a component will have a
src/css if it needs its own styles.
npm install -g yo npm install -g generator-react-css-modulesify
Then generate your new project:
The project makes two bundles: one for vendors dependencies, which does not change very often, and one for your app. For every entry file, a compiled css file will be created under
You can define vendor dependencies and entry files by udpating
# Build vendor bundle gulp build:vendor # Build main.js gulp build # Build other entry gulp build -f path/to/other-entry.js # Build all entries if you have more than one gulp build:all
The project use livereactload to provide hot reloading.
# Watch mian.js gulp watch # Watch other entry gulp watch -f path/to/other-entry.js # Watch all entries if you have more than one gulp watch:all
Note that you have to serve
index.html with a server in order for the page to reach the live reload server. Also changes made to css files will not update automatically (yet), you have to manually refresh the page.
Getting To Know Yeoman
- Yeoman has a heart of gold.
- Yeoman is a person with feelings and opinions, but is very easy to work with.
- Yeoman can be too opinionated at times but is easily convinced not to be.
- Feel free to learn more about Yeoman.
MIT © inoc603