fbolafsson/WonderYonder

Boilerplate

Table of contents

• 1 Prerequisites
• 2 Project Structure
• 3 Usage
  • 3.1 Development
  • 3.2 Production
• 4 Helpful Links
• 5 Notes
• 6 Clean Project
• 7 Special Thanks

Prerequisites for running this project

This project has been tested on Linux Mint and Windows 10 using the following versions without any errors. Newer versions are also likely to work but you can always fallback to the version number specified.

• NodeJS (v4.4.5)

• npm (v2.15.5) installed automatically with NodeJS

• Atom text editor (see reccomended packages in the Notes section) or another text editor of your choice.

• Run the following command

-> npm install

or alternatively (reccomended)

-> yarn install

What it includes

• React
• Redux
• ImmutableJS
• Webpack
• Jest & Enzyme
• Babel with ES6 & ES7 support
• Axios or Superagent for HTTP requests
• Hot reloading in development

Usage

Development

There are two separate scripts used in development.

-> npm run jest:watch

• This is used while in TDD, only runs unit tests defined. Does not launch the application nor build it with webpack.
• Jest picks up on all files with .test. or .spec. in their filename and everything inside any __tests__ folder, regardless of filename.

-> npm start

• This is used to view the site in the browser with access to development tools like the Redux Dock and source map for chrome. This also opens up to localhost:3000 in chrome.
  • Runs the Linter and Jest once.
  • To toggle the Redux Dock use ctrl+h, to move them around use ctrl+q.

Production

When running the production build script the contents of the /src folder will be minimized and put into a /dist folder. All javascript files will be bundled into one file. All the other files needed to server the website will also be moved to the /dist folder. Any console.log statements should also be quashed.

Finally it opens up to localhost:3000 in chrome with the minified version.

-> npm run build

Other helpful links

• React Component lifecycles
• Redux Api
• Immutable Api
• Jest Api
• ESLint general rules
• ESLint react rules

Notes

• Be aware that certain packages are subject to updates and could potentially break this build. If this is the case you can either revert said packages to the version specified in the package.json file by removing the ^ from the version number or by trying to fix the errors caused by the update.

• Not all linting errors will be caught by running the development/production scripts. They should however all be caught by Atom with relevant plugins.

• I recommend the following community packages for atom:

  • autocomplete-paths
  • file-icons
  • highlight-selected
  • language-babel
  • linter
  • linter-eslint
  • pigments

• Other cool community packages for atom:

  • docblockr
  • emmet
  • merge-conflicts
  • pretty-json
  • todo-show

Starting a new project

This boilerplate includes some basic implementations of components/actions/reducers/api/selectors and a hierarchy tree. If you wish to clean up the project here's how to do it:

• src/actions: delete all files.
• src/api: delete all files or the folder if the project wont be using any external api for communication.
• src/components: everything but the App.jsx file. And in that file:
  • remove user defined modules/files imports and their references.
  • replace { this.props.children } with something like <p>Hello world</p> for some output.
  • remove the children prop from propTypes.
• src/selectors: delete all files.
• src/reducers: delete all files except index.js and from that file remove the imports/references from user defined modules/files.
• src/global.css: you can safely remove everything here except maybe the import at the top (unless you don't want a variables.css file). If you don't want to use global css then:
  • remove the file.
  • remove src/variables.css if you wont be using it in your project.
  • remove the import in src/index.jsx that references global.css.
• src/reduxConstants.js: change the export to: export default createConstants({}).
• src/routes.jsx: remove all user defined modules/files and their references except the App one.
• src/variables.jsx: remove the Miscellaneous variable and change the comments to whatever you want. Or remove the file if it won't be used.
• package.json: If you won't be doing any http requests you can remove both axios and superagent from the dependencies. However, if you will be doing them then I suggest removing one and using the other.

If you want a clean project with a different structure then you can follow the above guide and setup your own hierarchy.

For more advanced removals (such as removing redux) you are on your own.

Special thanks

The project is largely based on a course by Cory House on Pluralsight so be sure to check it out.