Simple ES6 React, Redux and Sass boilerplate under Webpack 3. Based loosely on Kliment Petrov boilerplate.
- React 16.x
- React Router 4.x
- Redux 3.x
- Webpack 3.x with Webpack Dev Server 2.x
- Webpack dashboard included if prefered
- Sass support utilising CSS modules
- ECMAScript 6 support through Babel
- Hot Module Replacement using react-hot-loader
- Testing using Jest and Enzyme
- Development and production .env config
- Production config with separate CSS generation with Extract Text Plugin
- Ready to deploy and alias to now out the box
Ensure you have Node installed, then;
git clone https://github.com/thekeogh/webpack-react-redux .
Install node modules
npm install
Copy the .env.example
for your development
and production
variables.
cp .env.example .env
cp .env.example .env.production
Start the server
npm start
// Or for Webpack Dashboard
npm run dev
Open your browser to http://localhost:8111
. You can change the hostname and port by editing the values in the .env
you created above.
dotenv-safe is used for the .env
variables, therefore all .env
vars must be declared in the .env.example
file for them to be usable in the app.
You are provided with two .env
files, a .env
which is used for your local development app (webpack dev server) and a .env.production
which will be used when building your production ready assets via npm run build
(see below).
By default .env.production
is in .gitignore
, if this doesn't contain any sensitive information, you may want to commit it.
A few simple tests have been included using Jest and Enzyme.
npm test
To build production ready assets, simply run:
npm run build
This will build a uglified app-[hash].js
and a minified app-[hash].css
and automatically create a index.html
linking these files for you in a build/
directory.
The build/
directory is .gitignore
'd by default, and purged before every build.
We can deploy to now (zeit) right out the box. Ensure you have the now-cli installed globally with npm first.
Edit the now.json
in the root, change this to the name of your app, then run:
npm run deploy
This will build the production assets and deploy to now.
To alias your deployment (e.g. my-app.example.com
or my-app.now.sh
) supply your alias
in the now.json
and run:
npm run alias
Your deployment should now be aliased.
If you want to deploy to now for production also, then you will likely have a slightly different config for production (i.e. a different alias
pointing to your live domain). There is a supplied now.production.json
config for this. To deploy/alias to production run:
npm run deploy-production
npm run alias-production
npm start
- start the dev servernpm run clean
- delete thebuild
foldernpm run lint
- run a eslint checknpm test
- run all testsnpm run dev
- start the dev server using webpack dashboardnpm run build
- create a production ready build in thebuild
foldernpm run deploy
- deploy the production build to nownpm run alias
- alias the deployed build on nownpm run deploy-production
- deploy the production build to a production ready now instancenpm run alias-production
- alias the deployed build on a production ready now instance