This is a Webpack 2, ES6 & PostCSS boilerplate that utilizes some of the latest open source tools around such as:
- Node.js
- Yarn
- Webpack 2
- Babel (ES6) transpiling
- ESLint for linting
- PostCSS w/ cssnext
- Sass
- ...and more
This boilerplate is intended to be small in scope so that it can be easily extended and customized, or used as a learning tool for folks who are trying to become familiar with Webpack 2.
This boilerplate is fully open source and public domain, so you are free to do whatever you wish with it -- commercially or personally.
After completing the steps below, you will be ready to begin using Starbase:
- Install Node.js (latest LTS recommended)
- Install Yarn
- Clone this repository into your project root directory
- Install dependencies by running
yarn
in your project root directory
Note: if you hate Yarn for some reason, you can skip Step 2 and use npm install
instead of yarn
in Step 4.
This boilerplate uses webpack-dev-server to serve up your project at http://localhost:8080 for streamlined and convenient development.
After running yarn run dev
in the project root, your /src
code will be served at the url above and watched for changes. As you modify code in /src
, the project will be recompiled and your browser will refresh to show the latest changes.
cd /path/to/repo
yarn run dev
Use yarn run build
in your project root to run a production build.
Production builds compile & minify your assets into /dist
for distribution and/or integration into whatever codebase you'll be using these assets in.
cd /path/to/repo
yarn run build
This project uses Sass, if you prefer Less or just plain old css you can remve it from the project.
- Change
test: /\.sass$/
in both/webpack/webpack.config.prod.js
and/webpack/webpack.config.dev.js
totest: /\.css$/
or your choice of file extension. - Remove
sass-loader
from both/webpack/webpack.config.prod.js
and/webpack/webpack.config.dev.js
- Run
yarn remove node-sass sass-loader
dependency from/package.json
This project uses ESLint for Javascript (ES6) linting. The config (/.eslintrc
) included out of the box is based on the create-react-app file. It is focused on warnings and do not include any plugins. I recommend modifying this to your liking. Check out the official docs for more information.