Boilerplate template for building npm modules with React and JSX. Also includes a script from CircleCI to deploy to AWS S3.

1. Run a testing server for local development.
2. Build with babel and webpack for production ready code.
3. Use CircleCI to deploy to AWS S3.

Clone the repo.

$ git clone https://github.com/sallf/react-npm-boilerplate.git

Install packages.

$ npm install

We're using Hot Module Replacement (HMR), with webpack-dev-server. HMR exchanges, adds, or removes modules while an application is running, without a full reload which can significantly speed up development

$ npm start

Compiles code to public/ folder.

$ npm run dev

This template includes a config.yml file which will help you deploy to your AWS S3 bucket. If you don't need this functionality, just delete the .circleci/ folder.

After you've followed the setup steps below, any merge to master branch should trigger a buid on CircleCI.

You'll need to setup an account with CircleCI and link to your GitHub account.

In your CircleCI account you'll need to add your AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY as Environment Variables in a Context called AWS (Organization Settings > Contexts > Create Context). If you name your Context something different, be sure to update the context value in the .circleci/confg.yml file.

You can create access keys on AWS through your IAM profile.

We'll be using CircleCI's new aws-s3 orb which does most of the heavy lifting.

1. By default the file is setup to track your master branch. Adjust this as needed.
2. Add your S3 bucket URL to the last line in the file.

• React
• React DOM

• Babel Makes ECMAScript 2015+ backwards compatible
• Clean Webpack Plugin Removes unused files on each build
• CSS Loader Allows CSS imports
• ESLint Linter
• File Loader Handles import/require() on files
• HTML Webpack Plugin Simplifies creation of HTML files
• SASS Loader SCSS files to CSS
• Style Loader Inject CSS into the DOM.
• URL Loader Transforms files into base64 URIs
• Webpack Bundler
• Webpack CLI Webpack on the command line
• Webpack Dev Server Webpack on a development server

The code is available under the MIT license.