diff --git a/.babelrc b/.babelrc
index 8a581f8..fa464cc 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,19 +1,22 @@
{
- "presets": ["react", "es2015"],
- "env": {
- "development": {
- "plugins": [
- ["react-transform", {
- "transforms": [{
- "transform": "react-transform-hmr",
- "imports": ["react"],
- "locals": ["module"]
- }, {
- "transform": "react-transform-catch-errors",
- "imports": ["react", "redbox-react"]
- }]
- }]
- ]
+ "presets": [
+ "es2015",
+ "stage-0",
+ "react"
+ ],
+ "plugins": [
+ "react-hot-loader/babel"
+ ],
+ "env": {
+ "production": {
+ "presets": [
+ "react-optimize"
+ ]
+ },
+ "development": {
+ "plugins": [
+ "transform-react-jsx-source"
+ ]
+ }
}
- }
-}
\ No newline at end of file
+}
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..78d7e38
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+# Ignore built files
+dist/
+bundle.js
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index f6daa6e..aa594cc 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,27 +1,77 @@
{
- "ecmaFeatures": {
- "jsx": true,
- "modules": true
- },
- "env": {
- "browser": true,
- "node": true
- },
- "parser": "babel-eslint",
- "rules": {
- "quotes": [2, "single"],
- "strict": [2, "never"],
- "babel/generator-star-spacing": 1,
- "babel/new-cap": 1,
- "babel/object-shorthand": 1,
- "babel/arrow-parens": 1,
- "babel/no-await-in-loop": 1,
- "react/jsx-uses-react": 2,
- "react/jsx-uses-vars": 2,
- "react/react-in-jsx-scope": 2
- },
- "plugins": [
- "babel",
- "react"
- ]
-}
+ "parserOptions": {
+ "ecmaFeatures": {
+ "jsx": true
+ },
+ "sourceType": "module",
+ "ecmaVersion": 6
+ },
+ "env": {
+ "es6": true,
+ "browser": true,
+ "node": true
+ },
+ "ignore": [
+ "node_modules"
+ ],
+ "extends": [
+ "eslint:recommended",
+ "plugin:import/errors",
+ "plugin:import/warnings",
+ "plugin:lodash/recommended",
+ "plugin:react/recommended"
+ ],
+ "globals": {
+ "__DEV__": true
+ },
+ "parser": "babel-eslint",
+ "rules": {
+ "quotes": [
+ 2,
+ "single"
+ ],
+ "strict": [
+ 2,
+ "never"
+ ],
+ "no-var": 2,
+ "prefer-spread": 2,
+ "prefer-const": 2,
+ "prefer-template": 2,
+ "generator-star-spacing": 1,
+ "babel/new-cap": 1,
+ "object-shorthand": 1,
+ "arrow-parens": 1,
+ "no-await-in-loop": 1,
+ "react/no-multi-comp": [
+ 2,
+ {
+ "ignoreStateless": true
+ }
+ ],
+ "lodash/prefer-lodash-method": [
+ 2,
+ {
+ "ignoreObjects": [
+ "React.Children"
+ ]
+ }
+ ]
+ },
+ "plugins": [
+ "babel",
+ "import",
+ "lodash",
+ "react"
+ ],
+ "settings": {
+ "import/resolver": {
+ "webpack": {
+ "config": "webpack.config.dev.js"
+ }
+ },
+ "import/ignore": [
+ "node_modules"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index f0132ce..2fd0406 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
.DS_Store
node_modules
npm-debug.log
-dist
\ No newline at end of file
+dist
+.vscode/chrome
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..ece26ff
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+ "recommendations": [
+ "msjsdiag.debugger-for-chrome",
+ "dbaeumer.vscode-eslint",
+ "xabikos.ReactSnippets",
+ "fknop.vscode-npm",
+ "christian-kohler.npm-intellisense"
+ ]
+}
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..b84c967
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,23 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug",
+ "type": "chrome",
+ "request": "launch",
+ "webRoot": "${workspaceRoot}",
+ "url": "http://localhost:3000",
+ "userDataDir": "${workspaceRoot}/.vscode/chrome",
+ "sourceMaps": true,
+ "preLaunchTask": "development",
+ "smartStep": true,
+ "internalConsoleOptions": "openOnSessionStart",
+ "skipFiles": [
+ "node_modules/**"
+ ],
+ "sourceMapPathOverrides": {
+ "webpack:///*": "${webRoot}/*"
+ }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f6bffcf
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,49 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+ "editor.formatOnType": true,
+ "eslint.enable": true,
+ "files.associations": {
+ "**/src/**/*.js": "javascriptreact",
+ "**/node_modules/**/*.js": "javascript",
+ ".babelrc": "json",
+ ".eslintignore": "gitignore"
+ },
+ "files.exclude": {
+ ".vscode/chrome/**": true
+ },
+ "files.watcherExclude": {
+ ".vscode/chrome/**": true
+ },
+ "html.format.extraLiners": "!",
+ "html.format.indentInnerHtml": true,
+ "json.schemas": [
+ {
+ "fileMatch": [
+ "/package.json"
+ ],
+ "schema": {
+ "type": "object",
+ "properties": {
+ "config": {
+ "properties": {
+ "port": {
+ "type": "number",
+ "description": "The port of the webpack-dev-server",
+ "default": 3000
+ },
+ "host": {
+ "type": "string",
+ "description": "The hostname or ip of the webpack-dev-server",
+ "default": "localhost"
+ }
+ }
+ }
+ }
+ }
+ }
+ ],
+ "search.exclude": {
+ "dist/**": true
+ },
+ "typescript.check.tscVersion": false
+}
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..38d3250
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,151 @@
+// Available variables which can be used inside of strings.
+// ${workspaceRoot}: the root folder of the team
+// ${file}: the current opened file
+// ${fileBasename}: the current opened file's basename
+// ${fileDirname}: the current opened file's dirname
+// ${fileExtname}: the current opened file's extension
+// ${cwd}: the current working directory of the spawned process
+{
+ "version": "0.1.0",
+ "command": "npm",
+ "isShellCommand": true,
+ "echoCommand": false,
+ "suppressTaskName": true,
+ "showOutput": "always",
+ "tasks": [
+ {
+ "args": [
+ "run",
+ "start",
+ "--silent",
+ "--react-hot-boilerplate-vscode:port=3000",
+ "--react-hot-boilerplate-vscode:host=localhost" // use these command line args to override host and port of the dev-server. default values are defined in package.json config section.
+ ],
+ "problemMatcher": [
+ {
+ "owner": "custom",
+ "pattern": {
+ "regexp": "____________"
+ },
+ "watching": {
+ "activeOnStart": true,
+ "beginsPattern": "^webpack: Compiling\\.\\.\\.$",
+ "endsPattern": "^webpack: (Compiled successfully|Failed to compile)\\.$"
+ }
+ },
+ {
+ "owner": "javascript",
+ "severity": "error",
+ "applyTo": "closedDocuments",
+ "fileLocation": "absolute",
+ "pattern": [
+ {
+ "regexp": "^(Module build failed:\\s.*?:\\s(.*):(.*?))[\\s+](?:\\(([\\d-]+):([\\d-]+)\\))?$",
+ "message": 3,
+ "file": 2,
+ "line": 4,
+ "column": 5
+ }
+ ]
+ },
+ {
+ "owner": "javascript",
+ "severity": "error",
+ "applyTo": "closedDocuments",
+ "fileLocation": "relative",
+ "pattern": [
+ {
+ "regexp": "^ERROR in ./(.*)\\s?$",
+ "file": 1
+ },
+ {
+ "regexp": "^.*?Error:\\s(.*').*$",
+ "message": 1
+ },
+ {
+ "regexp": "^\\s+@.*?(\\d+)(?:-([\\d]+))?:(\\d+)(?:-([\\d]+))?\\s?$",
+ "line": 1,
+ "endLine": 2,
+ "column": 3,
+ "endColumn": 4
+ }
+ ]
+ }
+ ],
+ "isBackground": true,
+ "taskName": "development"
+ },
+ {
+ "args": [
+ "run",
+ "build",
+ "--silent"
+ ],
+ "problemMatcher": [
+ {
+ "owner": "javascript",
+ "severity": "error",
+ "applyTo": "closedDocuments",
+ "fileLocation": "absolute",
+ "pattern": [
+ {
+ "regexp": "^(Module build failed:\\s.*?:\\s(.*):(.*?))[\\s+](?:\\(([\\d-]+):([\\d-]+)\\))?$",
+ "message": 3,
+ "file": 2,
+ "line": 4,
+ "column": 5
+ }
+ ]
+ },
+ {
+ "owner": "javascript",
+ "severity": "error",
+ "applyTo": "closedDocuments",
+ "fileLocation": "relative",
+ "pattern": [
+ {
+ "regexp": "^ERROR in ./(.*)\\s?$",
+ "file": 1
+ },
+ {
+ "regexp": "^.*?Error:\\s(.*').*$",
+ "message": 1
+ },
+ {
+ "regexp": "^\\s+@.*?(\\d+)(?:-([\\d]+))?:(\\d+)(?:-([\\d]+))?\\s?$",
+ "line": 1,
+ "endLine": 2,
+ "column": 3,
+ "endColumn": 4
+ }
+ ]
+ }
+ ],
+ "taskName": "release",
+ "isBuildCommand": true
+ },
+ {
+ "args": [
+ "install",
+ "--progress",
+ "false",
+ "--loglevel",
+ "http"
+ ],
+ "taskName": "install"
+ },
+ {
+ "args": [
+ "run",
+ "lint",
+ "--loglevel",
+ "silent"
+ ],
+ "problemMatcher": [
+ "$eslint-stylish"
+ ],
+ "taskName": "lint",
+ "isTestCommand": true
+ }
+ ]
+}
diff --git a/README.md b/README.md
index fb3de25..f4bb0f9 100644
--- a/README.md
+++ b/README.md
@@ -1,63 +1,52 @@
-# React Transform Boilerplate
+# React Hot Loader 3.0 Boilerplate for Visual Studio Code
-[](http://www.reactiflux.com)
+A react boilerplate project for Visual Studio Code based on [react-transform-boilerplate](https://github.com/gaearon/react-transform-boilerplate) and [React Hot Loader 3.0](https://github.com/gaearon/react-hot-boilerplate/pull/61)
+***
+
-:rocket: **Now with [Babel 6](https://github.com/babel/babel) support** (thanks [@justingreenberg](https://github.com/justingreenberg))
+## Features
+* Intellisense (code completion) for external libraries via [Automatic Type Acquisition (ATA)](https://code.visualstudio.com/updates/v1_7)
+* Debugging react ES2015 classes inside vscode via [vscode-chrome-debug](https://github.com/Microsoft/vscode-chrome-debug) extension
+* Easy access to install, build and debugging commands via vscode command palette and keyboard shortcuts
+* JSX code analysis (linting) with autofixing support via [vscode-eslint](https://github.com/Microsoft/vscode-eslint) extension
+* [React Hot Loading](https://www.youtube.com/watch?v=xsSnOQynTHs)
-This project is a reference implementation of **[babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform)** can be used as a boilerplate for quickly getting a new project up and running with a few useful transforms:
+### Server and Client Side Debugging
-* [**react-transform-hmr**](https://github.com/gaearon/react-transform-hmr) - enables hot reloading react components
-* [**react-transform-catch-errors**](https://github.com/gaearon/react-transform-catch-errors) - catches errors inside `render()`
+[react-hot-boilerplate-vscode-fullstack](https://github.com/GGAlanSmithee/react-hot-boilerplate-vscode/tree/server-debugging) (by [GGAlanSmithee](https://github.com/GGAlanSmithee))
-Syntax errors are displayed in an overlay using **[@glenjamin](https://github.com/glenjamin)**’s **[webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware)**, which replaces Webpack Dev Server. This project **[does not](https://medium.com/@dan_abramov/the-death-of-react-hot-loader-765fa791d7c4)** use React Hot Loader.
+## Visual Studio Code
-## Demo
+* [**Download**](https://code.visualstudio.com/)
+* [**Tips and Tricks**](https://github.com/Microsoft/vscode-tips-and-tricks)
+* [**Supercharge your JavaScript debugging workflow with Visual Studio Code (Build 2017)**](https://channel9.msdn.com/Events/Build/2017/T6071)
-
+### Required Extensions
-## Installation
-
-```bash
-git clone https://github.com/gaearon/react-transform-boilerplate.git
-cd react-transform-boilerplate
-npm install
-npm start
-open http://localhost:3000
-```
-
-Transforms are enabled for files inside `src` (except `index.js`).
-
-## Troubleshooting
+* [**vscode-chrome-debug**](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
+* [**vscode-eslint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-#### I can’t serve images, use different HTML, etc.
+### Recommended Extensions
-This project is a reference implementation of **[babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform)**—it is just a Webpack bundle served by an Express server. It’s not meant to demonstrate every feature of either project. Please consult Webpack and Express docs to learn how to serve images, or bundle them into your JavaScript application.
+* [ReactSnippets](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)
+* [vscode-npm](https://marketplace.visualstudio.com/items?itemName=fknop.vscode-npm)
+* [npm-intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
-#### My server is throwing a 404 after `npm run build`
-
-Again, this boilerplate is **not** intended to be production ready. The 404 is because `index.html` is hard coded with the webpack bundle path in `/static/` (used by development server). You must manually update the script tag in `index.html` with the correct bundle path of `/dist/bundle.js` in order to use compiled source.
-
-#### I don’t see the syntax error overlay
-
-Make sure your react-app is not attached to `document.body`. The client overlay provided by [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) will render into `document.body`.
+## Installation
-Attaching the React root node to `document.body` requires extra caution, as many third-party packages will append their markup to the body as well. React will replace the entire contents in the body on every re-render. Thus you will not see the additional markup.
+1. `git clone https://github.com/skolmer/react-hot-boilerplate-vscode.git`
+2. open react-hot-boilerplate-vscode in Visual Studio Code
+3. make sure you have [vscode-chrome-debug](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) and [vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension installed
+4. press F1 > `Run Task` > `install` (or `npm install`) to install all dependencies
-It’s always better to render your React app in a `#root` DOM element.
-```js
-import React from 'react'
-import { render } from 'react-dom'
-import { App } from 'app'
-
-render(, document.getElementById('root'))
-```
+## Visual Studio Code shortcuts
-## Discussion
+* F5 to start debugging
+* CTRL+SHIFT+B to build a production release
+* CTRL+SHIFT+T to run eslint
-You can discuss React Transform and related projects in **#react-transform** channel on [Reactiflux Discord](http://reactiflux.com).
## License
CC0 (public domain)
-domain)
diff --git a/devServer.js b/devServer.js
index 215420c..5f13c39 100644
--- a/devServer.js
+++ b/devServer.js
@@ -1,27 +1,24 @@
-var path = require('path');
-var express = require('express');
-var webpack = require('webpack');
-var config = require('./webpack.config.dev');
+/*eslint no-console: 0*/
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const config = require('./webpack.config.dev');
-var app = express();
-var compiler = webpack(config);
+const port = process.env.npm_package_config_port || 3000;
+const host = process.env.npm_package_config_host || 'localhost';
-app.use(require('webpack-dev-middleware')(compiler, {
- noInfo: true,
- publicPath: config.output.publicPath
-}));
+new WebpackDevServer(webpack(config), {
+ publicPath: config.output.publicPath,
+ hot: true,
+ historyApiFallback: true,
+ stats: {
+ colors: true,
+ chunks: false,
+ 'errors-only': true
+ }
+}).listen(port, host, function (err) {
+ if (err) {
+ console.log(err);
+ }
-app.use(require('webpack-hot-middleware')(compiler));
-
-app.get('*', function(req, res) {
- res.sendFile(path.join(__dirname, 'index.html'));
-});
-
-app.listen(3000, 'localhost', function(err) {
- if (err) {
- console.log(err);
- return;
- }
-
- console.log('Listening at http://localhost:3000');
-});
+ console.log(`Listening at http://${host}:${port}/`);
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 9839c5d..0038c4f 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,12 @@
-
- React Transform Boilerplate
-
-
-
-
-
-
+
+
+
+
+ React Hot Boilerplate
+
+
+
+
+