removed build folder, added prod and dev webpack config

.gcloudignore

@@ -12,6 +12,7 @@
 # below:
 .git
 .gitignore
+.idea
 
 # Python pycache:
 __pycache__/

app.yaml

@@ -2,7 +2,7 @@ runtime: python37
 
 handlers:
 - url: /static
-  static_dir: static
+  static_dir: build
 
 - url: /.*
   script: auto

package-lock.json

@@ -5308,6 +5308,15 @@
         "yargs": "^12.0.5"
       }
     },
+    "webpack-merge": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.1.tgz",
+      "integrity": "sha512-4p8WQyS98bUJcCvFMbdGZyZmsKuWjWVnVHnAS3FFg0HDaRVrPbkivx2RYCre8UiemD67RsiFFLfn4JhLAin8Vw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.5"
+      }
+    },
     "webpack-sources": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz",

package.json

@@ -5,8 +5,8 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --config webpack.config.js",
+    "build": "webpack --config webpack.prod.js",
-    "devbuild": "webpack --mode development --config webpack.config.js"
+    "devbuild": "webpack --config webpack.dev.js"
   },
   "repository": {
     "type": "git",
@@ -27,7 +27,8 @@
     "css-loader": "^2.1.1",
     "style-loader": "^0.23.1",
     "webpack": "^4.32.2",
-    "webpack-cli": "^3.3.2"
+    "webpack-cli": "^3.3.2",
+    "webpack-merge": "^4.2.1"
   },
   "dependencies": {
     "react": "^16.8.6",

sarsoo/sarsoo.py

@@ -8,7 +8,7 @@ from .music import music_print
 # Project ID is determined by the GCLOUD_PROJECT environment variable
 db = firestore.Client()
 
-app = Flask(__name__, static_folder=os.path.join(os.path.dirname(__file__), '..', 'static'), template_folder="templates")
+app = Flask(__name__, static_folder=os.path.join(os.path.dirname(__file__), '..', 'build'), template_folder="templates")
 
 app.register_blueprint(art_print, url_prefix='/art')
 app.register_blueprint(music_print, url_prefix='/music')

src/js/App.js

@@ -5,7 +5,7 @@ class App extends Component{
     render(){
         return(
             <div className="App">
-            <h1> hello world </h1>
+            <h1> hello world!!!!! </h1>
             </div>
         );
     }

static/style.css

@@ -1,289 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: "Lato", arial;
-}
-
-body {
-  background-color: #202124;
-}
-
-a {
-  color: white;
-  font-size: 20px;
-  /*text-shadow: 1px 1px 1px #aaa;*/
-}
-
-p {
-  color: white;
-  font-size: 20px;
-  padding: 10px;
-}
-
-.button {
-  background-color: #505050;
-  color: black;
-  border-radius: 10px;
-  display: inline-block;
-  margin: 4px auto;
-  cursor: pointer;
-  padding: 15px;
-  box-shadow: 2px 2px 4px black;
-  /*-webkit-transition-duration: 0.4s;
-   	transition-duration: 0.4s;*/
-  text-align: center;
-  text-decoration: none;
-}
-.button:hover {
-  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
-}
-
-.row {
-  margin: 30px;
-}
-
-.gallerystrip {
-  width: 100%;
-  margin: auto;
-  margin-top: 15px;
-}
-.gallerystrip img {
-  height: auto;
-  border: 10px solid #313439;
-  margin: 10px;
-  box-shadow: 4px 4px 7px #070707;
-}
-
-.profile {
-  background-color: #131313;
-  height: auto;
-  margin-top: 10px;
-  /*border: 8px solid #313439;*/
-  border-radius: 0px;
-  box-shadow: 7px 7px 8px black;
-}
-.profile img {
-  border-radius: 50%;
-  display: block;
-  margin-top: 10px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 10px;
-  border: 8px solid #212121;
-  box-shadow: 4px 4px 3px #0c0c0c;
-}
-
-h1.title {
-  color: white;
-  font-size: 6em;
-  font-family: "Megrim", arial;
-  text-shadow: 2px 2px 2px #aaa;
-  font-weight: bold;
-  display: block;
-  text-decoration: none;
-  background-color: #131313;
-  padding: 0px;
-  /*font-size: 16em;*/
-  width: 3em;
-  height: 1.3em;
-  text-align: center;
-  margin: auto;
-  box-shadow: 4px 4px 8px #000000;
-}
-
-.card {
-  /*background-color: grey;*/
-  background-color: #131313;
-  box-shadow: 4px 4px 8px black;
-  padding: 10px;
-  margin: 10px;
-  /*border-radius: 3px;*/
-}
-.card h1 {
-  text-align: center;
-  color: white;
-  text-shadow: 1px 1px 2px #4f4f4f;
-}
-.card img {
-  width: 100%;
-  border-radius: 3px;
-  margin-bottom: 8px;
-  box-shadow: 2px 2px 2px black;
-  margin-left: auto;
-  margin-right: auto;
-}
-.card p {
-  margin-top: 20px;
-}
-
-h1.sectiontitle {
-  text-align: center;
-  color: white;
-  font-family: "Megrim", sans-serif;
-}
-
-ul.navbar {
-  list-style-type: none;
-  border-radius: 5px 5px;
-  /*box-shadow: 3px 3px 1px grey;*/
-  margin: 10px;
-  padding: 0;
-  overflow: hidden;
-  background-color: #131313;
-}
-ul.navbar li {
-  float: left;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-}
-ul.navbar li a {
-  display: block;
-  color: white;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-  text-shadow: 1px 1px 2px black;
-  -webkit-transition: background-color 0.4s;
-  transition: background-color 0.4s;
-}
-ul.navbar li a:hover {
-  background-color: #080808;
-}
-ul.navbar li.right {
-  float: right;
-}
-
-footer p {
-  text-align: right;
-  font-size: 12px;
-}
-footer a {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: right;
-  display: block;
-  color: grey;
-  font-size: 12px;
-}
-
-@media only screen and (max-width: 600px) {
-  ul.navbar li.right,
-ul.navbar li {
-    float: none;
-  }
-}
-[class*=col-] {
-  float: left;
-  width: 100%;
-}
-
-[class*=pad-] {
-  float: left;
-  width: calc(100% - 20px);
-}
-
-@media only screen and (min-width: 768px) {
-  /* For desktop: */
-  .col-1 {
-    width: 8.33%;
-  }
-
-  .col-2 {
-    width: 16.66%;
-  }
-
-  .col-3 {
-    width: 25%;
-  }
-
-  .col-4 {
-    width: 33.33%;
-  }
-
-  .col-5 {
-    width: 41.66%;
-  }
-
-  .col-6 {
-    width: 50%;
-  }
-
-  .col-7 {
-    width: 58.33%;
-  }
-
-  .col-8 {
-    width: 66.66%;
-  }
-
-  .col-9 {
-    width: 75%;
-  }
-
-  .col-10 {
-    width: 83.33%;
-  }
-
-  .col-11 {
-    width: 91.66%;
-  }
-
-  .col-12 {
-    width: 100%;
-  }
-
-  /* For desktop: */
-  .pad-2 {
-    width: calc(16.66% - 20px);
-  }
-
-  .pad-3 {
-    width: calc(25% - 20px);
-  }
-
-  .pad-4 {
-    width: calc(33.33% - 20px);
-  }
-
-  .pad-5 {
-    width: calc(41.66% - 20px);
-  }
-
-  .pad-6 {
-    width: calc(50% - 20px);
-  }
-
-  .pad-7 {
-    width: calc(58.33% - 20px);
-  }
-
-  .pad-8 {
-    width: calc(66.66% - 20px);
-  }
-
-  .pad-9 {
-    width: calc(75% - 20px);
-  }
-
-  .pad-10 {
-    width: calc(83.33% - 20px);
-  }
-
-  .pad-11 {
-    width: calc(91.66% - 20px);
-  }
-
-  .pad-12 {
-    width: calc(100% - 20px);
-  }
-}
-.row::after {
-  content: "";
-  clear: both;
-  display: table;
-}
-
-/*# sourceMappingURL=style.css.map */

static/style.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../css/style.scss"],"names":[],"mappings":"AAOA;EACC;;;AAGD;EACC,aAZY;;;AAeb;EACC,kBAfmB;;;AAkBpB;EACC,OAjBa;EAkBb;AACA;;;AAGD;EACQ,OAvBM;EAwBN;EACP;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAIC;EACA;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EAEC;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;AACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;;;AAID;AACC;EACA,kBAjHW;EAkHX;EACA;EACA;AACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACI;;AAGL;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA,kBAxJW;;AA2JX;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACE;;AAGF;EACC;;AAKH;EAAU;;;AAIV;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;AAAA;IACc;;;AAGhB;EACG;EACF;;;AAGD;EACG;EACF;;;AAGD;AACE;EACA;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAS;;;EACT;IAAS;;;EACT;IAAS;;;AAET;EACA;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAS;;;EACT;IAAS;;;EACT;IAAS;;;AAGX;EACE;EACA;EACA","file":"style.css"}

webpack.common.js

@@ -3,7 +3,6 @@ const webpack = require('webpack');
 
 module.exports = {
 	entry: './src/js/index.js',
-	devtool: 'inline-source-map',
 	module: {
     rules: [
       {
@@ -21,6 +20,6 @@ module.exports = {
     resolve: { extensions: ["*", ".js", ".jsx"] },
 	output: {
 		filename: 'main.js',
-		path: path.resolve(__dirname, 'static/js')
+		path: path.resolve(__dirname, 'build/js')
 	}
 };

webpack.dev.js

@@ -0,0 +1,8 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+	mode: 'development',
+	devtool: 'inline-source-map',
+	watch: true
+});

webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+	mode: 'production',
+	devtool: 'source-map'
+});