Yet another React Webpack Boilerplate.
On your local machine, for development, just run:
npm install
webpack-dev-server
If you want to minify and send everything on Heroku.
Windows users, beware, doesn't run on Windows (you'll need to do it manually or install Rimraf).
npm run clean
npm run build
It will build :
/dist/index.htmlfrom./src/index.tpl.html/dist/bundle.js/dist/styles.css
It will run the express.js server instead of webpack-dev-server
npm run start
TODO: Explain a bit more.
git push heroku master
Load uikit components from src/styles.scss and src/index.js.
- App-wide styling or css-frameworks can imported in scss.
- Otherwise prefer to stuff styling in a
style.cssfile. - Then import them from your React component with
import styles from './styles.css' - You can now call a style from your component like so :
<div className={styles.some-styling}> - See css modules and css-loader for more info.
Group your css, static images, fonts inside your very component folder. I personnally use this folder structure:
src/
|-- components/
|--- Component/
| |--- fonts/
| |--- images/
| |--- index.jsx
| |--- styles.css
|--- AnotherComponent/
Component is defined in index.jsx. I have seen some people specify a displayName: inside the component but it works without it. If you know why, I'd be glad to hear why.
Read more on this in this great article.