sahat / react-boilerplate

:fire: Quick setup for performance orientated, offline-first React.js applications featuring Redux, hot-reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha.

Using this boilerplate with WebStorm

WebStorm is a powerful IDE, and why not also use it as debugger tool? Here is the steps

1. Install JetBrain Chrome Extension
2. Setting up the PORT
3. Change WebPack devtool config to source-map (This line)
4. Run web server (npm run start)
5. Create Run Configuration (Run > Edit Configurations)
6. Add new JavaScript Debug
7. Setting up URL
8. Start Debug (Click the green bug button)
9. Edit Run Configuration Again
10. Mapping Url as below picture * Map your root directory with webpack://. (please note the last dot) * Map your build directory with your root path (e.g. http://localhost:3000)
11. Hit OK and restart debugging session

Troubleshooting

1. You miss the last . (dot) in webpack://.
2. The port debugger is listening tool and the JetBrain extension is mismatch.

Enable ESLint

ESLint help making all developer follow the same coding format. Please also setting up in your IDE, otherwise, you will fail ESLint test.

1. Go to WebStorm Preference
2. Search for ESLint
3. Click Enable