diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 000000000..a4587f3ab --- /dev/null +++ b/.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 diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..a7d0fc7b7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "esbonio.sphinx.confDir": "" +} \ No newline at end of file diff --git a/CONTRIBUTING.rst b/CONTRIBUTING.rst index d4c62b93e..b2f68bb64 100644 --- a/CONTRIBUTING.rst +++ b/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 `_. + +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 `_. + +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. diff --git a/changes/changelog.d/1831.feature b/changes/changelog.d/1831.feature new file mode 100644 index 000000000..ed6dd552c --- /dev/null +++ b/changes/changelog.d/1831.feature @@ -0,0 +1 @@ +Add Gitpod configuration and guide \ No newline at end of file diff --git a/docker/nginx/conf.dev b/docker/nginx/conf.dev index 11c0b1307..6d27ed4a1 100644 --- a/docker/nginx/conf.dev +++ b/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; diff --git a/docs/_static/images/select-gitpod-in-gitlab.png b/docs/_static/images/select-gitpod-in-gitlab.png new file mode 100644 index 000000000..6f52e3c3c Binary files /dev/null and b/docs/_static/images/select-gitpod-in-gitlab.png differ diff --git a/front/vite.config.js b/front/vite.config.js index 59fa8f7a6..5fc11249a 100644 --- a/front/vite.config.js +++ b/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: {