Add Gitpod support and guide

.gitpod.yml

@@ -0,0 +1,52 @@
+tasks:
+  - name: Funkwhale
+    env:
+      COMPOSE_FILE: dev.yml
+    init: |
+      cd front
+      yarn install
+      cd ..
+      echo "# Gitpod Environment Variables" > .env
+      echo "MEDIA_URL=http://localhost:8000/media/" >> .env
+      echo "STATIC_URL=http://localhost:8000/staticfiles/" >> .env
+      echo "GITPOD_WORKSPACE_URL=$GITPOD_WORKSPACE_URL" >> .env
+      echo "HMR_PORT=8000" >> .env
+      docker network create federation
+      docker-compose pull
+      docker-compose build
+      docker-compose up -d postgres redis
+      sleep 10 # allow postgres and redis to initialize
+      docker-compose run --rm api python manage.py migrate
+      docker-compose run --rm api python manage.py createsuperuser --no-input --username gitpod --email gitpod@example.com
+      echo "from django.contrib.auth import get_user_model;u=get_user_model().objects.get(username='gitpod');u.set_password('gitpod');u.save()" | docker-compose run --rm -T api python manage.py shell -i python
+      echo "from funkwhale_api.music import fake_data; fake_data.create_data(25)" | docker-compose run --rm -T api python manage.py shell -i python
+      docker-compose run --rm front yarn run i18n-compile
+    command: docker-compose up nginx
+
+  - name: Welcome to Funkwhale development!
+    command: |
+      clear
+      echo "You can now start developing Funkwhale with gitpod!"
+      echo ""
+      echo "To sign in to the superuser account, please this credentials:"
+      echo "gitpod:gitpod"
+
+ports:
+  - port: 8000
+    visibility: public
+    onOpen: notify
+
+  - port: 4000
+    visibility: public
+    onOpen: open-preview
+
+vscode:
+  extensions:
+    - antfu.vite
+    - lukashass.volar
+    - lextudio.restructuredtext
+    - trond-snekvik.simple-rst
+    - ms-python.python
+    - ms-toolsai.jupyter
+    - ms-toolsai.jupyter-keymap
+    - ms-toolsai.jupyter-renderers

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "esbonio.sphinx.confDir": ""
+}

CONTRIBUTING.rst

@@ -12,6 +12,64 @@ This document will guide you through common operations such as:
 - Writing unit tests to validate your work
 - Submit your work
 
+The quickest way to contribute to the project is through Gitpod!
+----------------------------------------------------------------
+
+.. image:: https://gitpod.io/button/open-in-gitpod.svg
+  :alt: Open in Gitpod
+  :target: https://gitpod.io/#https://dev.funkwhale.audio/funkwhale/funkwhale
+
+When you click the button above, you will be redirected to the gitpod.io site. Here you
+can sign in with your Gitlab or GitHub account and a new workspace will be automatically 
+created for you. 
+
+The workspace will checkout current ``development`` branch and run a Funkwhale instance 
+with both frontend and backend started so you can jump straight into development. 
+
+The provided backend instance has a default admin user ``gitpod`` authenticated with 
+password ``gitpod``.
+
+In case you want to develop only frontend, you can go to ``File > Open Folder`` and navigate to 
+``/workspace/funkwhale/front``. This will start a new vite server on port 4000. This server 
+integrates well with the extension provided by Gitpod but is disconnected from any instance by default.
+
+Usage with Gitlab
+^^^^^^^^^^^^^^^^^
+
+We understand that having to go to the contribution guide and clicking the ``Open in Gitpod`` 
+is not an optimal way to create new branches or test existing ones. That's why we've enabled the 
+Gitpod integration on our Gitlab server. 
+
+You can now simply choose to use Gitpod instead of Gitlab Web IDE on any of branch, commit or merge request:
+
+.. image:: ./docs/_static/images/select-gitpod-in-gitlab.png
+  :alt: Select Gitpod as the default Web IDE.
+
+Gitlab Workflow extension
+^^^^^^^^^^^^^^^^^^^^^^^^^
+
+Gitpod offers a `Gitlab Workflow` extension that can help with managing Gitlab issues, 
+merge requests and pipelines. To use it you need to create a personal access token with 
+``api`` and ``read_user`` scopes. You can create it by visiting `your Gitlab profile settings <https://dev.funkwhale.audio/-/profile/personal_access_tokens>`_.
+
+Setting the token through the extension is not an optimal approach as you'd need to do this
+every single time you start a new workspace. However you can work around this by creating 
+user environment variables in `your Gitpod settings <https://gitpod.io/variables>`_.
+
+When you configure your environment variables as follows, you will be signed in to the extension
+automatically in old and new workspaces.
+
++----------------------------------+---------------------------------+-----------------+
+| Name                             | Value                           | Scope           |
++==================================+=================================+=================+
+| ``GITLAB_WORKFLOW_INSTANCE_URL`` | ``https://dev.funkwhale.audio`` | ``funkwhale/*`` |
++----------------------------------+---------------------------------+-----------------+
+| ``GITLAB_WORKFLOW_TOKEN``        | ``TOKEN``                       | ``funkwhale/*`` |
++----------------------------------+---------------------------------+-----------------+
+
+The scope ``funkwhale/*`` will ensure that you will be signed into our instance on every
+project that we're hosting, not only Funkwhale itself.
+
 A quick path to contribute on the front-end
 -------------------------------------------
 
@@ -185,7 +243,7 @@ Injecting fake data is done by running the following script::
 
     artists=25
     command="from funkwhale_api.music import fake_data; fake_data.create_data($artists)"
-    echo $command | docker-compose -f dev.yml run --rm api python manage.py shell -i python
+    echo $command | docker-compose -f dev.yml run --rm -T api python manage.py shell -i python
 
 The previous command will create 25 artists with random albums, tracks
 and metadata.

changes/changelog.d/1831.feature

@@ -0,0 +1 @@
+Add Gitpod configuration and guide

docker/nginx/conf.dev

@@ -88,12 +88,6 @@ http {
             add_header X-Frame-Options "" always;
             proxy_pass   http://funkwhale-front/front/embed.html;
         }
-        location /front-server/ {
-            proxy_pass   http://funkwhale-front/;
-        }
-        location /sockjs-node/ {
-            proxy_pass   http://funkwhale-front/sockjs-node/;
-        }
 
         location / {
             include /etc/nginx/funkwhale_proxy.conf;

front/vite.config.js

@@ -1,10 +1,24 @@
 // vite.config.js
 
 import { defineConfig } from 'vite'
-import { createVuePlugin as vue } from "vite-plugin-vue2";
+import { createVuePlugin as vue } from 'vite-plugin-vue2'
 
 import path from 'path'
 
+const port = process.env.VUE_PORT ?? 8080
+
+const hmr = {
+  port: process.env.HMR_PORT || (process.env.FUNKWHALE_PROTOCOL === 'https' ? 443 : port),
+  protocol: process.env.HMR_PROTOCOL || (process.env.FUNKWHALE_PROTOCOL === 'https' ? 'wss' : 'ws')
+}
+
+if (process.env.GITPOD_WORKSPACE_URL) {
+  hmr.host = process.env.GITPOD_WORKSPACE_URL.replace('https://', `${process.env.HMR_PORT ?? process.env.VUE_PORT ?? 4000}-`)
+  hmr.clientPort = 443
+  hmr.protocol = 'wss'
+  delete hmr.port
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -16,19 +30,13 @@ export default defineConfig({
           return `import jQuery from 'jquery';${src}`
         }
       }
-    },
-  ],
-  server: {
-    port: process.env.VUE_PORT || '8080',
-    hmr: {
-      port: process.env.FUNKWHALE_PROTOCOL === 'https' ? 443 : 8000,
-      protocol: process.env.FUNKWHALE_PROTOCOL === 'https' ? 'wss' : 'ws',
     }
-  },
+  ],
+  server: { port, hmr },
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
+      '@': path.resolve(__dirname, './src')
+    }
   },
   build: {
     rollupOptions: {