Rewrite frontend in React

.dockerignore

@@ -0,0 +1,12 @@
+.cache
+.direnv
+.env*
+.envrc
+.floo*
+.pytest_cache
+build
+node_modules
+pip-cache
+site-packages
+venv
+webpack-stats-actions.json

.gitignore

@@ -1 +1,20 @@
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 .vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Dockerfile

@@ -4,16 +4,29 @@ WORKDIR /app/
 RUN groupadd --gid 10001 app && useradd -g app --uid 10001 --shell /usr/sbin/nologin app
 
 RUN apt-get update && \
-    apt-get install -y gcc apt-transport-https
+    apt-get install -y gcc apt-transport-https curl gnupg
+
+# Install Node and Yarn
+RUN curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add - && \
+    echo 'deb https://deb.nodesource.com/node_10.x stretch main' > /etc/apt/sources.list.d/nodesource.list && \
+    echo 'deb-src https://deb.nodesource.com/node_10.x stretch main' >> /etc/apt/sources.list.d/nodesource.list && \
+    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
+    echo 'deb https://dl.yarnpkg.com/debian/ stable main' > /etc/apt/sources.list.d/yarn.list && \
+    apt-get update && \
+    apt-get install -y nodejs yarn
 
 COPY ./requirements.txt /app/requirements.txt
 COPY ./requirements-constraints.txt /app/requirements-constraints.txt
+COPY ./package.json /app/package.json
+COPY ./yarn.lock /app/yarn.lock
 
 RUN pip install -U 'pip>=8' && \
-    pip install --no-cache-dir -r requirements.txt
+    pip install --no-cache-dir -r requirements.txt && \
+    yarn install --non-interactive --prod
 
 # Install the app
 COPY . /app/
+RUN yarn build --prod
 
 # Set Python-related environment variables to reduce annoying-ness
 ENV PYTHONUNBUFFERED 1

README.md

@@ -30,7 +30,7 @@ Development
 -----------
 
 You can either do development with Docker (recommended) or with a plain
-Python `virtualenv`.
+Python `virtualenv` and `Yarn`.
 
 **Docker**
 
@@ -44,20 +44,34 @@ If it doesn't close properly when you `Ctrl-C` and you get the
 docker-compose stop
 ```
 
-Remember, if you change your `docker-compose.yml` or `requirements.txt`
-you can rebuild with:
+Remember, if you change your `docker-compose.yml`, `requirements.txt`, or
+`package.json` you can rebuild with:
 ```
 docker-compose build web
 ```
 
-**Virtualenv**
+**Virtualenv and Yarn**
+
+To install dependencies:
 
 ```
 pip install -r requirements.txt
+yarn install
+```
+
+To run the app, first start the backend:
+
+```
 DEBUG=1 SQLALCHEMY_DATABASE_URI='postgres:///whatsdeployed' ./app.py
 ```
 
-Then, go to http://localhost:5000/
+and then in a separate terminal, start the frontend:
+
+```
+yarn start
+```
+
+This will automatically open your browser to http://localhost:3000/
 
 To avoid hitting rate limits on GitHub's API you can go to
 [Personal access tokens](https://github.com/settings/tokens) and generate

app.py

@@ -9,6 +9,7 @@
 from collections import defaultdict
 
 import requests
+import werkzeug
 from requests.exceptions import ReadTimeout
 from flask import (
     Flask,
@@ -18,6 +19,8 @@
     send_file,
     abort,
     redirect,
+    send_from_directory,
+    send_file,
 )
 from flask.views import MethodView
 from flask_sqlalchemy import SQLAlchemy
@@ -42,7 +45,8 @@
         "GITHUB_AUTH_TOKEN is NOT available. Worry about rate limits."
     )
 
-app = Flask(__name__)
+# Set static_folder=None to suppress the standard static server
+app = Flask(__name__, static_folder=None)
 app.config['SQLALCHEMY_DATABASE_URI'] = config(
     'SQLALCHEMY_DATABASE_URI',
     'postgres://localhost/whatsdeployed'
@@ -69,10 +73,6 @@ def __repr__(self):
         return '<Shortlink %r>' % self.link
 
 
-@app.route('/')
-def index_html():
-    return send_file('index.html')
-
 
 def extract_sha(content):
     content = content.strip()
@@ -328,7 +328,7 @@ def post(self):
 class ShortenView(MethodView):
 
     def post(self):
-        url = request.form['url']
+        url = request.json['url']
         qs = urlparse(url).query
         parsed = cgi.parse_qs(qs)
         owner = parsed['owner'][0]
@@ -467,6 +467,20 @@ def get(self, thing):
     '/s-<string:link>', view_func=ShortlinkRedirectView.as_view('shortlink')
 )
 
+@app.route('/', defaults={'path': 'index.html'})
+@app.route('/<path:path>')
+def index_html(path):
+    # try to serve static files out of ./build/
+    try:
+        return send_from_directory('build', path)
+    except werkzeug.exceptions.NotFound as e:
+        # try to serve index.html in the requested path
+        if path.endswith("/"):
+            return send_from_directory('build', path + 'index.html')
+        else:
+            # fall back to index.html
+            return send_file('build/index.html')
+
 
 if __name__ == '__main__':
     db.create_all()

docker-compose.yml

@@ -16,5 +16,10 @@ services:
       - GITHUB_AUTH_TOKEN=${GITHUB_AUTH_TOKEN}
     ports:
       - "5000:5000"
+      - "3000:3000"
     volumes:
-      - $PWD:/app
+      - $PWD/app.py:/app/app.py
+      - $PWD/public:/app/public
+      - $PWD/src:/app/src
+    command: bash -c 'python app.py & PORT=3000 yarn start'
+    stop_signal: kill