changes all kinds of stuff for deployment

from latests changes to changes 7 hours ago,
everything that I did to configure the deployment on heroku:

- gunicorn and eventlet version mismatch
- eventlet in procfile needed for flask socketio
- makes client use io URL according to dev/prod build process
- flask cors allow all
- defining all npm modules as dependencies, so that heroku will install
them in a build process
- adds build to postinstall
- readds gunicorn web server
- resetting pip requirements
- adds serverside routing to single page app
- adds gunicorn to requirements.txt
- refines static.json and adds heroku CORS (maybe static.json is not needed after all)
- changes root package.json
- specifies node version
- adds heroku build config for webpack
- adds pip requirements

.gitignore

@@ -1 +1,2 @@
 __pycache__
+/node_modules

Procfile

@@ -1 +1 @@
-web: gunicorn --chdir server server:app
+web: gunicorn --chdir server -k eventlet -w 1 server:app

client/config/webpack.common.js

@@ -2,6 +2,7 @@ const paths = require('./paths')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const webpack = require('webpack')
 
 module.exports = {
   /**
@@ -60,6 +61,19 @@ module.exports = {
       template: paths.src + '/template.html', // template file
       filename: 'index.html', // output file
     }),
+
+    /**
+     * DefinePlugin PLugin
+     * 
+     * replaces variables in our code with other values or expressions at compile time.
+     */
+    new webpack.DefinePlugin({
+      'process.env': {
+        'SERVER_URL': process.env.NODE_ENV == 'development'?
+        JSON.stringify('http://127.0.0.1:5000/') :
+        JSON.stringify('https://escapeling-lobby.herokuapp.com/')
+      }
+    })
   ],
 
   /**

client/package.json

@@ -16,7 +16,11 @@
   ],
   "author": "Tania Rascia <tania@taniarascia.com>",
   "license": "MIT",
-  "devDependencies": {
+  "devDependencies": {    
+  },
+  "dependencies": {
+    "socket.io-client": "^4.3.2",
+    "xstate": "^4.25.0",
     "@babel/core": "^7.5.5",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
@@ -46,9 +50,5 @@
     "webpack-cli": "^3.3.7",
     "webpack-dev-server": "^3.8.0",
     "webpack-merge": "^4.2.2"
-  },
-  "dependencies": {
-    "socket.io-client": "^4.3.2",
-    "xstate": "^4.25.0"
   }
 }

client/src/ts/LobbyMachine.ts

@@ -131,8 +131,9 @@ export const createLobbyMachine = (usernameInpValue: string, roomSelValue: strin
                 // TODO instead of promise, rewrite with callback service
                 invoke: {
                     id: 'connecter',
-                    src: (ctx, event) => {
-                        const socket = io('http://127.0.0.1:5000/');
+                    src: (ctx, event) => {                        
+
+                        const socket = io(process.env.SERVER_URL);
 
                         return new Promise((resolve, reject) => {
                             socket.on('connect', function(){

package.json

@@ -0,0 +1,10 @@
+{
+    "name": "escapeling-lobby",
+    "version": "0.1.0",
+    "scripts": {
+        "postinstall": "npm install --prefix client && npm run build --prefix client"
+    },
+    "engines": {
+        "node": "14.17.6"
+    }
+}

server/server.py

@@ -1,5 +1,5 @@
 from typing import List
-from flask import Flask
+from flask import Flask, send_from_directory, render_template
 from flask_socketio import SocketIO, send, emit, join_room, leave_room
 from room import Room
 from datetime import datetime
@@ -16,11 +16,26 @@
 
 app = Flask(__name__)
 app.config['SECRET_KEY'] = SECRET_KEY
+
+@app.route('/', defaults={'path': 'index.html'})
+@app.route('/<path:path>')
+def catch_all(path):
+    file_path = os.path.dirname(os.path.realpath(__file__))
+    repo_root_path = os.path.abspath(os.path.join(file_path, ".."))
+    my_path = os.path.abspath(repo_root_path + "/client/dist")
+    print("path", path)
+    print(my_path)
+    print(os.path.dirname(app.instance_path))
+    return send_from_directory(my_path, path)
+
+
+@app.errorhandler(404)
+def page_not_found(e):
+    # note that we set the 404 status explicitly
+    return render_template('404.html'), 404 # TODO create 404.html
+
 socketio = SocketIO(app, 
-    cors_allowed_origins=[
-        "http://127.0.0.1:5500",
-        "http://localhost:5500",
-        "http://localhost:8080"],
+    cors_allowed_origins="*",
     logger=True,
     engineio_logger=True)
 

static.json

@@ -0,0 +1,12 @@
+{
+    "root": "client/dist/",
+    "clean_urls": true,
+    "error_page": "404",
+    "routes": {
+        "/fonts/*": "/fonts/",
+        "/images/*": "/images/",
+        "/*.js": "/",
+        "/styles/*.css": "/styles/",
+        "/**": "index.html"
+    }
+}