v3.1.0

.gitignore

@@ -0,0 +1,5 @@
+.idea/*
+node_modules/*
+dist/*
+functions/node_modules/*
+package-lock.json

README.md

@@ -21,15 +21,15 @@ git clone https://[email protected]/LaurenceHo/reactjs-beautiful-weather.
 ```
 or
 ```
-git clone https://github.com/bluegray1015/reactjs-beautiful-weather.git
+git clone https://github.com/LaurenceHo/reactjs-beautiful-weather.git
 ```
 
 * Install npm package: 
 ```
-npm install
+npm i
 ```
 
-* Put your google & darksky API key into `./functions/apiKey.js`
+* Put your google & dark sky API key into `./functions/apiKey.js`
 
 * Launch the app: 
 ```
@@ -45,8 +45,12 @@ Please visit: https://cloud.google.com/functions/ for more detail
 1. Run `npm run firebase-init`
 2. Visit https://console.firebase.google.com to create a new project
 3. Add the firebase project into your local configuration `npm run firebase-add`
-4. If you want to deploy the whole project, run `npm run firebase-deploy`
-5. If you just want to deploy the cloud functions, run `npm run deploy-functions`
+4. You may need to change the default project setting in the `.firebaserc`
+5. If you want to deploy the whole project, run `npm run firebase-deploy`
+6. If you want to deploy the cloud functions only, run `npm run deploy-functions`
 
 ### Live demo
 https://react-beautiful-weather-app.firebaseapp.com/
+
+## License
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

config/webpack.common.js

@@ -3,78 +3,76 @@
  */
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
-	entry: './src/index.tsx',
-	output: {
-		path: path.resolve(__dirname, '../dist'),
-		filename: '[name].bundle.js'
-	},
-	resolve: {
-		modules: [
-			path.join(__dirname, "../dist"),
-			"node_modules"
-		],
-		extensions: [".ts", ".tsx", '.js', '.json']
-	},
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				loader: "ts-loader"
-			},
-			// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-			{
-				enforce: "pre",
-				test: /\.js$/,
-				exclude: /(node_modules)/,
-				loader: "source-map-loader"
-			},
-			{
-				test: /\.css$/,
-				use: ['style-loader', 'css-loader']
-			},
-			{
-				test: /\.(jpe?g|png|gif|ico)$/i,
-				use: ['file-loader']
-			},
-			{
-				test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-				use: ["url-loader?limit=10000&mimetype=application/font-woff"]
-			},
-			{
-				test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-				use: ["file-loader"]
-			}
-		]
-	},
-	plugins: [
-		new CleanWebpackPlugin(['../dist']),
-		/*
+  entry: [ './src/index.tsx', 'whatwg-fetch' ],
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: '[name].bundle.js'
+  },
+  resolve: {
+    modules: [
+      path.join(__dirname, '../dist'),
+      'node_modules'
+    ],
+    extensions: [ '.ts', '.tsx', '.js', '.json' ]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader'
+      },
+      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        loader: 'source-map-loader'
+      },
+      {
+        test: /\.css$/,
+        use: [ 'style-loader', 'css-loader' ]
+      },
+      {
+        test: /\.(jpe?g|png|gif|ico)$/i,
+        use: [ 'file-loader' ]
+      },
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [ 'url-loader?limit=10000&mimetype=application/font-woff' ]
+      },
+      {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [ 'file-loader' ]
+      }
+    ]
+  },
+  plugins: [
+    /*
        * Plugin: HtmlWebpackPlugin
        * Description: Simplifies creation of HTML files to serve your webpack bundles.
        * This is especially useful for webpack bundles that include a hash in the filename
        * which changes every compilation.
        *
        * See: https://github.com/ampedandwired/html-webpack-plugin
        */
-		new HtmlWebpackPlugin({
-			template: 'src/index.html'
-		}),
-		/*
+    new HtmlWebpackPlugin({
+      template: 'src/index.html'
+    }),
+    /*
        * Plugin: CopyWebpackPlugin
        * Description: Copy files and directories in webpack.
        * Copies project static assets.
        * See: https://www.npmjs.com/package/copy-webpack-plugin
        */
-		new CopyWebpackPlugin([
-			{
-				from: 'src/assets',
-				to: 'assets'
-			}
-		])
-	]
+    new CopyWebpackPlugin([
+      {
+        from: 'src/assets',
+        to: 'assets'
+      }
+    ])
+  ]
 };
 

config/webpack.dev.js

@@ -1,17 +1,23 @@
 const merge = require('webpack-merge');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
 const common = require('./webpack.common.js');
 const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
 
 module.exports = merge(common, {
-	mode: 'development',
-	devtool: 'inline-source-map',
-	devServer: {
-		contentBase: '../dist',
-		historyApiFallback: true,
-		hot: true,
-		inline: true
-	},
-	plugins: [
-		new HotModuleReplacementPlugin()
-	]
-});
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: '../dist',
+    historyApiFallback: true,
+    hot: true,
+    inline: true
+  },
+  plugins: [
+    new HotModuleReplacementPlugin(),
+    new DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('development')
+      }
+    })
+  ]
+});

config/webpack.prod.js

@@ -1,38 +1,46 @@
+const CompressionPlugin = require('compression-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const merge = require('webpack-merge');
 const DefinePlugin = require('webpack/lib/DefinePlugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
-	mode: 'production',
-	devtool: 'source-map',
-	plugins: [
-		new DefinePlugin({
-			'process.env': {
-				'NODE_ENV': JSON.stringify('production')
-			}
-		})
-	],
-	optimization: {
-		splitChunks: {
-			cacheGroups: {
-				commons: {
-					test: /[\\/]node_modules[\\/]/,
-					name: "vendors",
-					chunks: "all"
-				}
-			}
-		},
-		minimize: true,
-		minimizer: [
-			new UglifyJsPlugin({
-				uglifyOptions: {
-					compress: {
-						warnings: false
-					},
-					sourceMap: true
-				}
-			})
-		]
-	}
-});
+  mode: 'production',
+  devtool: 'source-map',
+  plugins: [
+    new DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('production')
+      }
+    }),
+    new CompressionPlugin({
+      filename: "[path].gz[query]",
+      algorithm: "gzip",
+      test: /\.js$|\.css$|\.html$/,
+      threshold: 10240,
+      minRatio: 0
+    })
+  ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all'
+        }
+      }
+    },
+    minimize: true,
+    minimizer: [
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          compress: {
+            warnings: false
+          },
+          sourceMap: true
+        }
+      })
+    ]
+  }
+});