Initial commit.

ewliang · ewliang · commit df2ff7c2faee · 2018-10-23T09:09:10.000-07:00
diff --git a/package.json b/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "reactjs-project-template",
+  "version": "1.0.0",
+  "description": "A React.js project template created using Webpack without relying on React.js' CLI command of \"create-react-app\".",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ewliang/ReactJS-Project-Template.git"
+  },
+  "keywords": [
+    "reactjs",
+    "react.js",
+    "webpack",
+    "reactjs",
+    "webpack",
+    "react.js",
+    "webpack",
+    "reactjs",
+    "template",
+    "reactjs",
+    "project",
+    "template",
+    "reactjs",
+    "boilerplate"
+  ],
+  "author": "Eric Liang <ericwliang94@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ewliang/ReactJS-Project-Template/issues"
+  },
+  "homepage": "https://github.com/ewliang/ReactJS-Project-Template#readme",
+  "devDependencies": {
+      "@babel/core": "^7.1.2",
+      "@babel/preset-env": "^7.1.0",
+      "babel-loader": "^8.0.4",
+      "babel-polyfill": "^6.26.0",
+      "css-loader": "^1.0.0",
+      "file-loader": "^2.0.0",
+      "html-webpack-plugin": "^3.2.0",
+      "style-loader": "^0.23.1",
+      "webpack": "^4.20.2",
+      "webpack-cli": "^3.1.2",
+      "webpack-dev-server": "^3.1.9"
+    },
+    "dependencies": {
+      "@babel/preset-react": "^7.0.0",
+      "axios": "^0.18.0",
+      "moment": "^2.22.2",
+      "normalize.css": "^8.0.0",
+      "react": "^16.5.2",
+      "react-dom": "^16.5.2",
+      "react-router-dom": "^4.3.1"
+    }
+}
diff --git a/public/css/style.css b/public/css/style.css
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>HackerNews Clone</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="icon" type="image/png" href="public/imgs/favicon.ico" />
+  </head>
+  <body>
+    <noscript>Please enable JavaScript on your browser in order for this webapp to work properly.</noscript>
+    <div id = "app"></div>
+  </body>
+</html>
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+
+class App extends Component {
+  render() {
+    return (
+      
+    );
+  }
+}
+
+export default App;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+import 'normalize.css';
+import '../public/css/style.css';
+
+ReactDOM.render(<App/>, document.getElementById('app'));
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,54 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+// Webpack 4
+module.exports = {
+  entry: ['babel-polyfill', './src/index.js'],
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpg|gif|ico|svg|pdf)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[path][name]-[hash:8].[ext]'
+            },
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env', '@babel/preset-react']
+        }
+      }
+    ]
+  },
+  devServer: {
+    historyApiFallback: true
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './public/index.html'
+    })
+  ]
+};
