#ghpages-react-es6-bs4-webpack
Quickly publish your frontend demos to GitHub Pages, using React, ES6, Bootstrap 4, and Webpack
- Fork this repository.
- Go to GitHub's settings tab on your fork and rename your repo to whatever you want to name your project.
- On the same settings page, scroll down to the GitHub Pages section, and change the source to
Master branch /docs folder
- Clone your fork to your local machine.
- Run
npm install
. This will install required dependencies. - Run
npm run build
. This will compile your assets and generate a bundle in thedocs/assets
directory. - Commit the new bundle to git and push to GitHub.
- That's it! Your project is now live at:
http://your-github-username.github.io/your-project-name
Now you can go to src/App.jsx
, remove the sample content and get started building your own project. Just make your changes, npm run build
, commit and push - simple!
- React
- Babel: Set up for ES6; even the webpack config is ES6. You can easily add ES7/8 support by adding the required npm modules to dev-dependencies and
.babelrc
. - webpack-dev-server (with hot reload): Run
npm start
. A browser window will open and will hot reload as you edit your code, without refreshing the page. - Bootstrap 4: with webpack set up to compile your scss. I included
src/styles/_defaults.scss
for convenience; it doesn't get used, it's just a handy reference for bootstrap's defaults which you can override inbootstrap-custom.scss
. - Font-Awesome: with appropriate loaders set up in webpack to handle font types.
- promise-polyfill: use ES6 Promises in the browser.
- whatwg-fetch: polyfill for fetch API.