Skip to content

Home

Jump to bottom
Christophe Rosset edited this page Jun 17, 2017 · 12 revisions

Webpack Babel Starter

Deploy

Github pages

Setup

You only have to do this once to setup your ./build/dist directory as a git folder following the gh-pages branch.

From the root of your project:

npm run build
npm run clean-dist
cd build/dist
git clone https://github.com/username/awesome-repository-name.git ./
git checkout --orphan gh-pages
cd ../..
Deploy

From the root of your project:

npm run build-prod
cd build/dist
git add .
git commit -m "new version"
git push -u origin gh-pages
cd ../..

Your distribution version will be versionned in the gh-pages branch like this and made available on your github pages.

Note: This process can be applied to any hosting service that uses git for deployment (like heroku for example).

FAQ

I make some changes in my source code, I don't see them reloading

Check your console (chrome devtools or terminal) for eslint errors and fix the errors.

My code seems OK but eslint keeps throwing warnings

The eslint configuration is very strict. It's based on eslint-config-airbnb. I invite you to customize the .eslintrc file so that it fits your codestyle.

If you feel like it is too strict, you can remove eslint-config-airbnb by removing the following from .eslintrc

"extends": "airbnb/base"

Otherwise, you can temporary disable the linter using LINTER=false npm start or completly remove it (also remove it from the npm task test so that you could commit).

I don't want to use sass but an other css pre-processor

In the webpack.config.js file, replace the loader handling .scss files by the loader for your pre-processor (like less, stylus ...). The workflow will stay the same (url and file loaders will keep behaving the same way).

Why isn't there hot-reloading ?

Hot reloading is React specific. This boilerplate aims to be framework agnostic. You can add it using gaearon/react-transform-hmr. You should checkout how I implemented it on the following projects (with the same workflow):

This is explained in this commit.

I want to use multiple output chunks of JavaScript

To include the right chunks in your index file, customize src/index.ejs, add them after the conditional :

<% if (!htmlWebpackPlugin.options.MODE_DEV_SERVER) { %><script ...

How do I start with a fresh git repo from your boilerplate ?

You may want to use this boilerplate for your next project, but you'd like to start without all my commits ... Just clone it and remove the .git folder.

git clone https://github.com/topheman/webpack-babel-starter.git my-project
cd my-project
rm -rf .git
git init
git add .
git commit -m "chore(*): import topheman/webpack-babel-starter boilerplate"
git remote add origin https://github.com/username/my-project-repo-name.git

What is this "contributing" folder ?

If you don't plan to contribute to the project, you can remove it, it contains tools (like test suites) used when developping this boilerplate. More infos.

Clone this wiki locally