Merge pull request #3 from mxstbr/html-file

Add index.html file
facebook · Jul 17, 2016 · 3a003be · 3a003be
2 parents 4796e13 + 2b6ca02
commit 3a003be
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>My React App</title>
+  </head>
+  <body>
+    <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js) with the correct HTML tags, which is why they are missing in this HTML file. -->
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "bin",
     "scripts",
     "src",
+    "index.html",
     "webpack.config.dev.js",
     "webpack.config.prod.js"
   ],

diff --git a/scripts/init.js b/scripts/init.js
@@ -35,9 +35,10 @@ module.exports = function(hostPath, appName, verbose) {
     JSON.stringify(hostPackage, null, 2)
   );
 
-  // Move the src folder
+  // Move the files for the user
   // TODO: copying might be more correct?
   fs.renameSync(path.join(selfPath, 'src'), path.join(hostPath, 'src'));
+  fs.renameSync(path.join(selfPath, 'index.html'), path.join(hostPath, 'index.html'));
 
   // Run another npm install for react and react-dom
   // TODO: having to do two npm installs is bad, can we avoid it?

diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -74,7 +74,10 @@ module.exports = {
   },
   plugins: [
     // TODO: infer from package.json?
-    new HtmlWebpackPlugin({ title: 'My React Project' }),
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.resolve(__dirname, relative, 'index.html'),
+    }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' })
   ]
 };
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -74,7 +74,10 @@ module.exports = {
   },
   plugins: [
     // TODO: infer from package.json?
-    new HtmlWebpackPlugin({ title: 'My React Project' }),
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.resolve(__dirname, relative, 'index.html'),
+    }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } })