Frontend

.github/workflows/deploy.yml

@@ -23,16 +23,26 @@ jobs:
         target_url: https://survey.r-anime.moe
         environment: production
 
-    - name: Pull latest changes to server
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Setup Node
+      uses: actions/setup-node@v3
+
+    - name: Apply frontend updates
+      run: |
+        cd frontend
+        npm ci
+        NODE_ENV=production npm run build
+        rsync -e "ssh -o StrictHostKeyChecking=no" -avz dist [email protected]:/home/surveysite/surveysite/frontend
+
+    - name: Apply backend updates
       run: |
         ssh -o StrictHostKeyChecking=no [email protected] /bin/bash << 'EOF'
           # Causes this script to exit early and report a failure if any command errors
           set -e
-
-          # Checkout latest changes from our repo, overwriting any local changes
-          cd "$HOME/surveysite"
-          git fetch --all
-          git reset --hard origin/main
+
+          cd /home/surveysite/surveysite
 
           # Use our virtualenv
           source .venv/bin/activate
@@ -43,9 +53,6 @@ jobs:
           # Run migrations, pulling environment variables from the .env file
           eval $(cat .env) python manage.py migrate
 
-          # Compile static Sass files
-          eval $(cat .env) python manage.py sass survey/static/survey/scss/ survey/static/survey/css/
-
           # Collect all static files into STATIC_ROOT
           eval $(cat .env) python manage.py collectstatic --noinput
 

.gitignore

@@ -121,4 +121,4 @@ GitHub.sublime-settings
 
 # Visual Studio Code # 
 .vscode/* 
-.history
+.history

README.md

@@ -1,27 +1,46 @@
 # [/r/anime Seasonal Surveys Website](https://survey.r-anime.moe/) [![deploy status](https://img.shields.io/github/deployments/r-anime/surveysite/production?label=deploy)](https://github.com/r-anime/surveysite/deployments/activity_log?environment=production)
 
-Website for carrying out seasonal surveys for [/r/anime](https://www.reddit.com/r/anime/). Built with [Django](https://www.djangoproject.com/) as the backend and [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap and embedded Vue.js) on the frontend.
-
-## Features
-
-* Survey form and auto-generated results pages.
-* Takes into account anime removed or added during an ongoing survey.
-* Reddit authentication.
-* Admin page for editing the database.
+Website for carrying out seasonal surveys for [/r/anime](https://www.reddit.com/r/anime/). Built with [Django](https://www.djangoproject.com/) as the backend and [Vue.js](https://vuejs.org/) & [Bootstrap](https://getbootstrap.com/) on the frontend.
 
 ## Requirements
 
-Python 3.6+, and all dependencies in `requirements.txt`.
+* Python 3.9+.
+* Node.js v14+.
+  * For development, a global install of [Vue CLI (`@vue/cli`)](https://cli.vuejs.org/) v5 may be useful.
 
 ## Setup
 
-* Add the following environment variables:
-  * `WEBSITE_SECRET` should be a strong, secure [secret key](https://docs.djangoproject.com/en/3.1/ref/settings/#secret-key) for Django.
-  * `WEBSITE_REDDIT_OAUTH_CLIENT_ID` should be the client ID of the Reddit OAuth app.
-  * `WEBSITE_REDDIT_OAUTH_SECRET` should be the secret of the Reddit OAuth app.
-  * `WEBSITE_DEBUG` should be set to something to enable debug mode.
-  * `WEBSITE_ALLOWED_HOSTS` should be [a list of host/domain names](https://docs.djangoproject.com/en/3.1/ref/settings/#std:setting-ALLOWED_HOSTS) Django should serve, seperated by semicolons (`;`). This list is optional if debug mode is enabled.
-  * `WEBSITE_USE_HTTPS` should be set to something if the application is hosted via HTTPS. This will enable an additional session security option, and OAuth redirect URIs will use HTTPS as well.
-* Create the website's database: `python manage.py migrate`.
-* Add your host/domain name(s) to the `django_site` table of the generated database.
-* Create a superuser for the website: `python manage.py createsuperuser`.
+This project consists of a Django back-end in the root folder, and a static Vue.js front-end in `./frontend/` - the front-end will be built and served as static files by Django.
+
+### Environment Variables
+* `WEBSITE_SECRET`: a strong, secure [secret key](https://docs.djangoproject.com/en/3.2/ref/settings/#secret-key) for Django.
+* `WEBSITE_REDDIT_OAUTH_CLIENT_ID`: the client ID of the Reddit OAuth app.
+* `WEBSITE_REDDIT_OAUTH_SECRET`: the secret of the Reddit OAuth app.
+* `WEBSITE_DEBUG`: presence of this variable enables debug mode.
+* `WEBSITE_ALLOWED_HOSTS`: [a list of host/domain names](https://docs.djangoproject.com/en/3.2/ref/settings/#std:setting-ALLOWED_HOSTS) Django should serve, seperated by semicolons (`;`). This list is optional if debug mode is enabled.
+* `WEBSITE_USE_HTTPS`: presence of this indicates whether the application is hosted via HTTPS.
+
+### Running the Project
+
+Before either debugging or deploying the project:
+
+* Create Django's database: `python manage.py migrate`.
+* Add host/domain name(s) to the `django_site` table of the generated database. This includes `localhost:8000`/`127.0.0.1:8000`!
+* Create a superuser for Django: `python manage.py createsuperuser`.
+
+#### Debugging
+
+* Set the environment variables.
+* In `./frontend/`, run `npm run debug`. This will build the front-end to `./frontend/dist/` and watch the source code for changes.
+* In the root folder, run `python manage.py runserver` to start up the Django server.
+* By default, Django will serve everything at `localhost:8000`.
+
+#### Deploying
+
+Install all packages, and:
+
+* Build `./frontend`: `npm run build`
+* Run Django migrations: `python manage.py migrate`
+* Let Django collect all static files (including the frontend): `python manage.py collectstatic --noinput`
+
+Use your favorite server to [deploy the Django application](https://docs.djangoproject.com/en/3.2/howto/deployment/).

frontend/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

frontend/.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    parser: '@typescript-eslint/parser'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/no-multiple-template-root': 'off'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
+}

frontend/.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+
+
+/tests/e2e/logs/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.nvmrc

@@ -0,0 +1 @@
+v16.14.2

frontend/README.md

@@ -0,0 +1,34 @@
+# surveysite-frontend
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your unit tests
+```
+npm run test:unit
+```
+
+### Run your end-to-end tests
+```
+npm run test:e2e
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}