splitting out libraries

index-dev.html

@@ -1,8 +1,4 @@
-<!--
+<!-- DEVELOPMENT version of the web app. -->
-  DEVELOPMENT version of the web app.
-  It links to online babel transformer and the original JSX app script.
--->
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -17,17 +13,25 @@
     <!-- Ask Google not to offer page translation -->
     <meta name="google" value="notranslate">
 
-    <link rel="manifest" href="manifest.json">
+    <link rel="manifest" href="manifest.json" />
-    <link id="shortcut-icon" rel="shortcut icon" href="img/logo32x32.png" type="image/png" />
+    <link rel="shortcut icon" id="shortcut-icon" href="img/logo32x32.png" type="image/png" />
     <link rel="apple-touch-icon" sizes="192x192" href="img/logo192.png" type="image/png" />
     <link rel="canonical" href="https://api.tinode.co/" />
     <!-- Google's Roboto font -->
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700"
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700" />
-      rel="stylesheet" type="text/css" />
     <!-- Google's material design icons -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <!-- Styles for local elements -->
     <link rel="stylesheet" href="css/base.css" />
+    <!-- ReactJs scripts -->
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <!-- React-Intl -->
+    <script crossorigin="anonymous" src="https://unpkg.com/prop-types@15/prop-types.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-intl@2/dist/react-intl.js"></script>
+    <!-- Firebase scripts -->
+    <script crossorigin="anonymous" src="https://unpkg.com/firebase@5.5.6/firebase-app.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/firebase@5.5.6/firebase-messaging.js"></script>
   </head>
 
   <body>

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
 <title>Tinode</title>
 <meta charset="utf-8">
@@ -7,22 +7,21 @@
 <meta name="application-name" content="TinodeWeb">
 <meta name="description" content="Tinode instant messaging">
 <meta name="application-url" content="https://api.tinode.co/">
-    <!-- Browser styling for Chrome, FF, Opera -->
 <meta name="theme-color" content="#3949AB">
-    <!-- Ask Google not to offer page translation -->
 <meta name="google" value="notranslate">
-
+<link rel="manifest" href="manifest.json" />
-    <link rel="manifest" href="manifest.json">
+<link rel="shortcut icon" id="shortcut-icon" href="img/logo32x32.png" type="image/png" />
-    <link id="shortcut-icon" rel="shortcut icon" href="img/logo32x32.png" type="image/png" />
 <link rel="apple-touch-icon" sizes="192x192" href="img/logo192.png" type="image/png" />
 <link rel="canonical" href="https://api.tinode.co/" />
-    <!-- Google's Roboto font -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700" />
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700"
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-      rel="stylesheet" type="text/css" />
-    <!-- Google's material design icons -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-    <!-- Styles for local elements -->
 <link rel="stylesheet" href="css/base.min.css" />
+<script crossorigin="anonymous" src="https://unpkg.com/react@16.6.0/umd/react.production.min.js"></script>
+<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.6.0/umd/react-dom.production.min.js"></script>
+<script crossorigin="anonymous" src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js"></script>
+<script crossorigin="anonymous" src="https://unpkg.com/react-intl@2.7.2/dist/react-intl.min.js"></script>
+<script crossorigin="anonymous" src="https://unpkg.com/firebase@5.5.6/firebase-app.js"></script>
+<script crossorigin="anonymous" src="https://unpkg.com/firebase@5.5.6/firebase-messaging.js"></script>
 </head>
 <body>
 <noscript><div id="noscript-alertbox"><div id="noscript-title">Javascript support is required.</div>

service-worker.js

@@ -1,6 +1,6 @@
 // Must be located at the root.
-importScripts('https://unpkg.com/firebase@5.5.5/firebase-app.js');
+importScripts('https://unpkg.com/firebase@5.5.6/firebase-app.js');
-importScripts('https://unpkg.com/firebase@5.5.5/firebase-messaging.js');
+importScripts('https://unpkg.com/firebase@5.5.6/firebase-messaging.js');
 importScripts('firebase-init.js');
 
 firebase.initializeApp(FIREBASE_INIT);

webpack.config.js

@@ -1,3 +1,5 @@
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
 module.exports = config = {
   entry: [
     './src/index.js',
@@ -13,4 +15,28 @@ module.exports =  config = {
       },
     ],
   },
+  output: {
+    libraryTarget: 'umd'
+  },
+  optimization: {
+    minimizer: [
+      // we specify a custom UglifyJsPlugin here to get source maps in production.
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true,
+        uglifyOptions: {
+          compress: true,
+          mangle: true
+        },
+        sourceMap: true
+      })
+    ]
+  },
+  externals: {
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+    'react-intl': 'ReactIntl',
+    'firebase/app': 'firebase',
+    'firebase/messaging': true
+  },
 };