Boilerplate for developing with an express backend and react frontend. Using gulp as a task runner. Webpack to bundle, and BrowserSync.
From the repository:
Simply fork or clone this repository. Or alternatively download the zip.`npm install` in the root directory.
There are many dependencies required to transpile es2015 + jsx -> es5, as well as gulp packages so don't freak out if it takes a while
npm start will start the express app.
npm run dev will start the express app and the gulp watcher, triggering BrowserSync as well. This command essentially covers all the front-end development workflow.
If you want to micromanage the use of gulp you can install it globally by running:
npm install -g gulp
Tasks in the gulpfile.js:
gulp bundle will make gulp transpile all the es2015+jsx code in react-app/src/ into build/src/bundle.js. Essentially compiling the react app.
gulp sass will make gulp compile all the postcss code in css/ and output it into the build/stylesheets/ directory.
gulp html will copy any html files in the root of react-app/ into the build/ directory to be visible to the web server.
gulp images will minify and compress images in images/ and output them into the build/img/ directory.
gulp watch watches all files in react-app, css, images and will run their associated task if any changes are made. It then triggers a browser live-reload.
gulp postinstall runs everything except "gulp watch".
Running gulp alone will perform all these tasks then start gulp watch.