Merge branch 'webpack-experiments' into 'develop'

Switch to vue-cli to have a saner and lighter front-end configuration

See merge request funkwhale/funkwhale!375

.env.dev

@@ -7,7 +7,7 @@ C_FORCE_ROOT=true
 FUNKWHALE_HOSTNAME=localhost
 FUNKWHALE_PROTOCOL=http
 PYTHONDONTWRITEBYTECODE=true
-WEBPACK_DEVSERVER_PORT=8080
+VUE_PORT=8080
 MUSIC_DIRECTORY_PATH=/music
 BROWSABLE_API_ENABLED=True
 FORWARDED_PROTO=http

.gitignore

@@ -74,14 +74,15 @@ api/static
 api/.pytest_cache
 
 # Front
+oldfront/node_modules/
 front/static/translations
 front/node_modules/
 front/dist/
 front/npm-debug.log*
 front/yarn-debug.log*
 front/yarn-error.log*
-front/test/unit/coverage
-front/test/e2e/reports
+front/tests/unit/coverage
+front/tests/e2e/reports
 front/selenium-debug.log
 docs/_build
 

.gitlab-ci.yml

@@ -156,7 +156,6 @@ test_api:
   tags:
     - docker
 
-
 test_front:
   stage: test
   image: node:9
@@ -166,7 +165,7 @@ test_front:
     - branches
   script:
     - yarn install
-    - yarn run unit
+    - yarn test:unit
   cache:
     key: "funkwhale__front_dependencies"
     paths:
@@ -179,7 +178,6 @@ test_front:
   tags:
     - docker
 
-
 build_front:
   stage: build
   image: node:9
@@ -192,7 +190,7 @@ build_front:
     - yarn run i18n-compile
     # this is to ensure we don't have any errors in the output,
     # cf https://code.eliotberriot.com/funkwhale/funkwhale/issues/169
-    - yarn run build | tee /dev/stderr | (! grep -i 'ERROR in')
+    - yarn build | tee /dev/stderr | (! grep -i 'ERROR in')
     - chmod -R 750 dist
   cache:
     key: "funkwhale__front_dependencies"
@@ -210,7 +208,6 @@ build_front:
   tags:
     - docker
 
-
 pages:
   stage: test
   image: python:3.6

CONTRIBUTING.rst

@@ -43,7 +43,7 @@ Setup front-end only development environment
 4. Launch the development server::
 
     # this will serve the front-end on http://localhost:8000
-    WEBPACK_DEVSERVER_PORT=8000 yarn dev
+    VUE_PORT=8000 yarn serve
 
 5. Make the front-end talk with an existing server (like https://demo.funkwhale.audio),
    by clicking on the corresponding link in the footer
@@ -264,7 +264,7 @@ When working on federation with traefik, ensure you have this in your ``env``::
 
     # This will ensure we don't bind any port on the host, and thus enable
     # multiple instances of funkwhale to be spawned concurrently.
-    WEBPACK_DEVSERVER_PORT_BINDING=
+    VUE_PORT_BINDING=
     # This disable certificate verification
     EXTERNAL_REQUESTS_VERIFY_SSL=false
     # this ensure you don't have incorrect urls pointing to http resources
@@ -466,12 +466,12 @@ Running tests
 
 To run the front-end test suite, use the following command::
 
-    docker-compose -f dev.yml run --rm front yarn run unit
+    docker-compose -f dev.yml run --rm front yarn test:unit
 
 We also support a "watch and test" mode were we continually relaunch
 tests when changes are recorded on the file system::
 
-    docker-compose -f dev.yml run --rm front yarn run unit-watch
+    docker-compose -f dev.yml run --rm front yarn test:unit -w
 
 The latter is especially useful when you are debugging failing tests.
 

changes/changelog.d/webpack.enhancement

+Simpler configuration and toolchain for the front-end using vue-cli (!375)

dev.yml

-version: '3'
+version: "3"
 
 services:
   front:
@@ -8,22 +8,22 @@ services:
       - .env
     environment:
       - "HOST=0.0.0.0"
-      - "WEBPACK_DEVSERVER_PORT=${WEBPACK_DEVSERVER_PORT-8080}"
+      - "VUE_PORT=${VUE_PORT-8080}"
     ports:
-      - "${WEBPACK_DEVSERVER_PORT_BINDING-8080:}${WEBPACK_DEVSERVER_PORT-8080}"
+      - "${VUE_PORT_BINDING-8080:}${VUE_PORT-8080}"
     volumes:
-      - './front:/app'
-      - '/app/node_modules'
-      - './po:/po'
+      - "./front:/app"
+      - "/app/node_modules"
+      - "./po:/po"
     networks:
       - federation
       - internal
     labels:
       traefik.backend: "${COMPOSE_PROJECT_NAME-node1}"
       traefik.frontend.rule: "Host:${COMPOSE_PROJECT_NAME-node1}.funkwhale.test,${NODE_IP-127.0.0.1}"
-      traefik.enable: 'true'
-      traefik.federation.protocol: 'http'
-      traefik.federation.port: "${WEBPACK_DEVSERVER_PORT-8080}"
+      traefik.enable: "true"
+      traefik.federation.protocol: "http"
+      traefik.federation.port: "${VUE_PORT-8080}"
 
   postgres:
     env_file:
@@ -53,8 +53,8 @@ services:
       context: ./api
       dockerfile: docker/Dockerfile.test
     links:
-     - postgres
-     - redis
+      - postgres
+      - redis
     command: celery -A funkwhale_api.taskapp worker -l debug
     environment:
       - "FUNKWHALE_HOSTNAME=${FUNKWHALE_HOSTNAME-localhost}"
@@ -98,7 +98,7 @@ services:
       - .env
     image: nginx
     environment:
-      - "WEBPACK_DEVSERVER_PORT=${WEBPACK_DEVSERVER_PORT-8080}"
+      - "VUE_PORT=${VUE_PORT-8080}"
       - "COMPOSE_PROJECT_NAME=${COMPOSE_PROJECT_NAME- }"
       - "FUNKWHALE_HOSTNAME=${FUNKWHALE_HOSTNAME-localhost}"
     links:
@@ -120,20 +120,20 @@ services:
     volumes:
       - ".:/app/"
     ports:
-      - '35730:35730'
-      - '8001:8001'
+      - "35730:35730"
+      - "8001:8001"
 
   api-docs:
     image: swaggerapi/swagger-ui
     environment:
       - "API_URL=/swagger.yml"
     ports:
-      - '8002:8080'
+      - "8002:8080"
     volumes:
       - "./docs/swagger.yml:/usr/share/nginx/html/swagger.yml"
 
 networks:
-  internal:
+  ? internal
   federation:
     external:
       name: federation

docker/nginx/entrypoint.sh

 #!/bin/bash -eux
 
-FORWARDED_PORT="$WEBPACK_DEVSERVER_PORT"
+FORWARDED_PORT="$VUE_PORT"
 COMPOSE_PROJECT_NAME="${COMPOSE_PROJECT_NAME// /}"
 if [ -n "$COMPOSE_PROJECT_NAME" ]; then
   echo

front/.babelrc

-{
-  "presets": [
-    ["env", { "modules": false }],
-    "stage-2"
-  ],
-  "plugins": ["transform-runtime"],
-  "comments": false,
-  "env": {
-    "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": [ "istanbul" ]
-    }
-  }
-}

front/.eslintignore

-build/*.js
-config/*.js

front/.eslintrc.js

-// http://eslint.org/docs/user-guide/configuring
-
-module.exports = {
-  root: true,
-  parser: 'babel-eslint',
-  parserOptions: {
-    sourceType: 'module'
-  },
-  env: {
-    browser: true,
-  },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
-  // add your custom rules here
-  'rules': {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-  }
-}

front/.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

front/.postcssrc.js

-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  "plugins": {
-    // to edit target browsers: use "browserlist" field in package.json
-    "autoprefixer": {}
-  }
-}

front/Dockerfile

@@ -5,9 +5,9 @@ RUN curl -L -o /usr/local/bin/jq https://github.com/stedolan/jq/releases/downloa
 
 EXPOSE 8080
 WORKDIR /app/
-ADD package.json .
+ADD package.json yarn.lock ./
 RUN yarn install
 
 COPY . .
 
-CMD ["npm", "run", "dev"]
+CMD ["yarn", "serve"]

front/babel.config.js

+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

front/build/build.js

-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-var ora = require('ora')
-var rm = require('rimraf')
-var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackConfig = require('./webpack.prod.conf')
-
-var spinner = ora('building for production...')
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, function (err, stats) {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false,
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
-
-    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})

front/build/check-versions.js

-var chalk = require('chalk')
-var semver = require('semver')
-var packageConfig = require('../package.json')
-var shell = require('shelljs')
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
-}
-
-var versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  },
-]
-
-if (shell.which('npm')) {
-  versionRequirements.push({
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  })
-}
-
-module.exports = function () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
-      console.log('  ' + warning)
-    }
-    console.log()
-    process.exit(1)
-  }
-}

front/build/dev-client.js

-/* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})

front/build/dev-server.js

-require('./check-versions')()
-
-var config = require('../config')
-if (!process.env.NODE_ENV) {
-  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
-}
-
-var opn = require('opn')
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-var host = process.env.HOST || config.dev.host
-// automatically open browser, if not set will be false
-var autoOpenBrowser = !!config.dev.autoOpenBrowser
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  quiet: true
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler, {
-  log: () => {}
-})
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    hotMiddleware.publish({ action: 'reload' })
-    cb()
-  })
-})
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(options.filter || context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-var uri = 'http://' + host + ':' + port
-
-var _resolve
-var readyPromise = new Promise(resolve => {
-  _resolve = resolve
-})
-
-console.log('> Starting dev server...')
-devMiddleware.waitUntilValid(() => {
-  console.log('> Listening at ' + uri + '\n')
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-  _resolve()
-})
-
-var server = app.listen(port, host)
-
-module.exports = {
-  ready: readyPromise,
-  close: () => {
-    server.close()
-  }
-}

front/build/utils.js

-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  var cssLoader = {
-    loader: 'css-loader',
-    options: {
-      minimize: process.env.NODE_ENV === 'production',
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    var loaders = [cssLoader]
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
-  }
-
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-  return output
-}

front/build/vue-loader.conf.js

-var utils = require('./utils')
-var config = require('../config')
-var isProduction = process.env.NODE_ENV === 'production'
-
-module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: isProduction
-      ? config.build.productionSourceMap
-      : config.dev.cssSourceMap,
-    extract: isProduction
-  })
-}