I couldn't find a simple webpack starter template that contained all the features I wanted.
I've put together this simple webpack starter example with the following features:
- Hot loading of react components
- Proxying onto your own api server (in
server/index.js
) for api calls - Auto reload of api server on server file changes
- Sourcemaps during developement
- Sourcemaps for production builds for debugging deployed code
- Babel for js/jsx processing
- Imagemin for processing images
- Font handling
- scss/sass with autoprefixer
- Testing
Clone the repository:
git clone [email protected]:cgreening/simple-webpack-react-starter.git
cd simple-webpack-react-starter
npm install
npm run dev
Browse to http://localhost:8080
If you just want to start a new project without all the commit history then do:
git clone --depth=1 [email protected]:cgreening/simple-webpack-react-starter <your-project-name>
cd <your-project-name>
npm install
npm run dev
Browse to http://localhost:8080
Special note for windows users
npm run dev
relies on being able to run two commands simultaneously, the server and the webpack dev server. This does not work on windows so you will need to open to command windows and run these commands:
npm run dev-web
npm run dev-server
You can now browse to http://localhost:8080
##Live Reload
In App
you'll find the single page reach app. Try opening `Components/Header.js' and modifying the text. Hit save and the browser should update with your changes.
In Server
you'll find a minimal express server. Currently it serves content from the build directory and has 1 api call to get the current time.
Try adding a new api endpoint and modify Components/Content.js
so that it hits your new endpoint.
You should be able to make all these changes without restarting the server manually as it should auto detect the changes and restart/reload as necessary.
npm run dev
This will start the webpack dev server on the defuault port (8080). It will also start the express server from server/index.js
using nodemon.
Webpack dev server will watch for changes in the files from the App
folder and hot load any changed modules.
nodemon will watch files in the server
folder and restart the express server if any files change.
This means that you can update both your single page app and your backend during development and have the changes available immediately.
npm run build
This will build the app and output the files to the build
directory.
npm run server
This will launch the express server serving content from build
Testing is done using karma + mocha with sinon for stubbing ajax requests. We use the karma-webpack preprocessor
The karma config lives in karma.conf.js
and is setup to run tests in Chrome and load up tests.webpack.js
tests.webpack.js
loads up all the tests from the tests
directory and bundles them all up using webpack. We then run them all at once.
To do a test run:
npm test
And to run continuous tests which rerun everytime a file changes:
npm run testing
- duplicated code in the web pack config files
There is a lot of duplication between the two webpack config files - this is deliberate as I wanted it to be a as clear as possible what is happening. I have refactored the obviously common stuff like loaders and the index page generation into webpack-common.config.js
- probably a lot of other things - open a pull request!
Try out the code on heroku: