Fix #1

README-deploy.md

@@ -1,15 +1,15 @@
 ### Steps to Deploy
-- move contents of static/ to /srv/www-csc-links/
-- create a `.env` file in server/ with following contents:
+- move contents of frontend/ to /srv/www-csc-links/
+- create a `.env` file in backend/ with following contents:
 ```
 PASSWORD=...
 PORT=...
 ```
-- Install the pip dependencies. One possible way to do so is to run the following in server/:
+- run the following in backend/:
 ```
 python3 -m venv venv
 source venv/bin/activate
 pip install -r requirements.txt
 ```
-- run server.py in server/ (with the pip dependencies installed)
+- run python app in backend/ (with the virtual env activated)
 - edit the `.htaccess` file in /srv/www-csc-links/ to point to the running python application

backend/requirements.txt

@@ -18,6 +18,5 @@ types-Jinja2==0.1.0
 types-MarkupSafe==0.1.3
 types-typing-extensions==3.7.2
 types-Werkzeug==0.1.1
-waitress==2.0.0
 Werkzeug==1.0.1
 wrapt==1.12.1

backend/server.py

@@ -1,13 +0,0 @@
-from waitress import serve
-from main import app, DB_PATH, regen_html, out_path
-from setup_db import migrate_0
-import os
-
-if not os.path.exists(DB_PATH):
-    migrate_0()
-
-with app.app_context():
-    regen_html(out_path)
-
-port = int(os.environ.get("PORT") or 3000)
-serve(app, host='0.0.0.0', port=port)

backend/setup_db.py

@@ -1,28 +1,27 @@
 import sqlite3
 import os
 
-def migrate_0():
-    DB_PATH = os.path.join(os.path.dirname(__file__), 'links.db')
+DB_PATH = os.path.join(os.path.dirname(__file__), 'links.db')
 
-    con = sqlite3.connect(DB_PATH)
+con = sqlite3.connect(DB_PATH)
 
-    # array of links to store
-    links = [
+# array of links to store
+links = [
   ('http://csclub.uwaterloo.ca/','CS Club Website',0,0,1),
   ('https://www.instagram.com/uwcsclub/','Instagram',0,1,1),
   ('https://www.facebook.com/uw.computerscienceclub','Facebook',0,2,1),
   ('http://twitch.tv/uwcsclub','Twitch',0,3,1),
   ('http://bit.ly/uwcsclub-yt','YouTube',0,4,1),
-    ]
+]
 
-    # SQLite setup
-    cur = con.cursor()
+# SQLite setup
+cur = con.cursor()
 
-    # test if table already exists
-    cur.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='links'")
-    if cur.fetchone():
+# test if table already exists
+cur.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='links'")
+if cur.fetchone():
   raise Exception('Links table already exists.')
-    else:
+else:
   cur.execute('''CREATE TABLE links (
     url text NOT NULL,
     name text NOT NULL,
@@ -34,7 +33,4 @@ def migrate_0():
   cur.executemany('INSERT INTO links VALUES (?,?,?,?,?)', links)
   con.commit()
 
-    con.close()
-
-if __name__ == "__main__":
-    migrate_0()
+con.close()

build.bash

@@ -8,11 +8,15 @@ NODE_ENV=production npx tailwindcss-cli@latest build index.in.css -o index.out.c
 cd ..
 npm run build && npm run export
 cd ..
-mv frontend/out build/static
+mv frontend/out build/frontend
 
 # Backend
-rsync -ax --exclude venv --exclude links.db --exclude .env backend/ build/server
+cd backend
+source venv/bin/activate
+if [ ! -f links.db ]; then
+  python3 setup_db.py
+fi
+cd ..
+rsync -ax --exclude venv backend/ build/backend
 
-cp README-deploy.md build/README.md
-
-tar -cf linklist.tar build
+cp README-deploy.md build

frontend/components/Editor/index.tsx

@@ -67,8 +67,8 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
   };
 
   return (
-    <div className="flex flex-col bg-gray-100 md:h-full md:flex-row">
-      <div className="space-y-4 md:w-3/5 md:border-r md:border-gray-300 md:overflow-y-scroll">
+    <div className="flex flex-col bg-gray-100 md:flex-row">
+      <div className="space-y-4 md:w-3/5 md:border-r md:border-gray-300">
         <div className="m-8">
           <button
             className="block flex py-2 items-center justify-center rounded-lg bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full"
@@ -133,7 +133,7 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
         </div>
       </div>
       <div className="mb-8 md:none" />
-      <div className="flex items-center justify-center md:w-2/5">
+      <div className="flex m-14 justify-center md:w-2/5">
         <Preview links={editableLinks.filter((link) => link.active)} />
       </div>
     </div>