React, NPM and CircleCI Boilerplate

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.

Getting Started

Clone the repo.

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

Install packages.

$ npm install

Development

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

Build

Compiles code to public/ folder.

$ npm run dev

Deploy to AWS

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.

Setup a CircleCI Account

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

Add Access Keys to CircleCI

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.

Configure yml File

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.

Packages

Dependencies

• React
• React DOM

Dev Dependencies

• 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

License

The code is available under the MIT license.