first commit

MichaelBurgess · Dec 23, 2016 · 1c426b0 · 1c426b0
commit 1c426b0
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+1. Ensure node is installed and npm is available as a command
+2. Clone the repo
+3. run "npm install"
+4. run "./node_modules/webpack/bin/webpack.js"
+5. How can I Run/Debug this in WebStorm by loading /index.html, but the URL is /home, rather than /index.html?
+⋅⋅* If you just try to Run/Debug by default you get "Warning: [react-router] Location "/debugging-webpack-react-router/index.html" did not match any routes"
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>React Router Webpack Debugging Test</title>
+</head>
+<body>
+    <div id="react-container"></div>
+    <script type="application/javascript" src="build/bundle.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { browserHistory, Route, Router } from 'react-router';
+
+const Home = () => (
+  <h1>Hello World!</h1>
+);
+
+// This would work as expected if our browser URL was /index.html
+// render(
+//   <Home/>,
+//   document.getElementById('react-container')
+// );
+
+// This won't work, as instead of /index.html, we need the browser URL to be /home (to match the route)
+render(
+  <Router history={browserHistory}>
+    <Route path="home" component={Home} />
+  </Router>,
+  document.getElementById('react-container')
+);
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "debugging-webpack-react-router",
+  "version": "1.0.0",
+  "description": "Basic React app with react-router to test webpack debugging",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "react-router": "^3.0.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "webpack": "^1.14.0"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,16 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: './main.js',
+  output: { path: __dirname + '/build', filename: 'bundle.js' },
+  module: {
+    loaders: [
+      {
+        test: /.js?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      }
+    ]
+  },
+};