Enhancement/Adopt nuxt folder structure

.dockerignore

@@ -1,13 +1,19 @@
 *
 !app/
-app/staticfiles/
-app/db.sqlite3
-app/server/node_modules/
-app/server/static/bundle/
-app/server/webpack-stats.json
-!data/
 !tests/
 !tools/
 !.coveragerc
 !.flake8
 !requirements.txt
+
+app/**/bundle/
+app/**/node_modules/
+app/**/webpack-stats.json
+
+app/**/*.sqlite3
+app/**/.env
+app/**/junitxml/
+app/**/staticfiles/
+app/**/venv/
+app/**/__pycache__/
+tests/**/__pycache__/

.gitignore

@@ -83,6 +83,8 @@ junitxml/
 # Django stuff:
 *.log
 local_settings.py
+*.sqlite3
+staticfiles/
 
 # Flask stuff:
 instance/
@@ -192,14 +194,7 @@ fabric.properties
 pyvenv.cfg
 pip-selfcheck.json
 
-/data/raw/*
-/data/sparql/*
-
-# ignore db to avoid merge conflicts
-*.sqlite3
-
-# ignore django/node generated static files
+# ignore webpack state
 node_modules/
-app/staticfiles/
-app/server/static/bundle/
-app/server/webpack-stats.json
+bundle/
+webpack-stats.json

Dockerfile

@@ -3,37 +3,30 @@ FROM python:${PYTHON_VERSION} AS builder
 
 ARG NODE_VERSION="8.x"
 RUN curl -sL "https://deb.nodesource.com/setup_${NODE_VERSION}" | bash - \
- && apt-get install nodejs \
- && rm -rf /var/lib/apt/lists/*
+ && apt-get install nodejs
 
-COPY app/server/package*.json /doccano/app/server/
-RUN cd /doccano/app/server \
+COPY app/server/static/package*.json /doccano/app/server/static/
+RUN cd /doccano/app/server/static \
  && npm ci
 
 COPY requirements.txt /
 RUN pip install -r /requirements.txt \
  && pip wheel -r /requirements.txt -w /deps
 
-COPY app/server/static /doccano/app/server/static/
-COPY app/server/webpack.config.js /doccano/app/server/
-RUN cd /doccano/app/server \
- && DEBUG=False npm run build
-
 COPY . /doccano
 
 RUN cd /doccano \
  && tools/ci.sh
 
 FROM builder AS cleaner
 
+RUN cd /doccano/app/server/static \
+ && SOURCE_MAP=False DEBUG=False npm run build \
+ && rm -rf components pages node_modules .*rc package*.json webpack.config.js
+
 RUN cd /doccano \
  && python app/manage.py collectstatic --noinput
 
-RUN rm -rf /doccano/app/server/node_modules/ \
- && rm -rf /doccano/app/server/static/ \
- && rm -rf /doccano/app/staticfiles/js/ \
- && find /doccano/app/staticfiles -type f -name '*.map*' -delete
-
 FROM python:${PYTHON_VERSION}-slim AS runtime
 
 COPY --from=builder /deps /deps

README.md

@@ -102,10 +102,11 @@ Next we need to start the webpack server so that the frontend gets compiled cont
 Run the following commands in a new shell:
 
 ```bash
-cd server
+cd server/static
 npm install
 npm run build
 # npm start  # for developers
+cd ..
 ```
 
 **Option3: Pull the development Docker-Compose images**

app/app/settings.py

@@ -93,12 +93,17 @@
     },
 ]
 
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/2.0/howto/static-files/
+
+STATIC_URL = '/static/'
+STATIC_ROOT = path.join(BASE_DIR, 'staticfiles')
+
 STATICFILES_DIRS = [
     static_path
     for static_path in (
-        path.join(BASE_DIR, 'server', 'static', 'bundle'),
-        path.join(BASE_DIR, 'server', 'static', 'css'),
-        path.join(BASE_DIR, 'server', 'static', 'images'),
+        path.join(BASE_DIR, 'server', 'static', 'assets'),
+        path.join(BASE_DIR, 'server', 'static', 'static'),
     )
     if path.isdir(static_path)
 ]
@@ -109,7 +114,7 @@
     'DEFAULT': {
         'CACHE': not DEBUG,
         'BUNDLE_DIR_NAME': 'bundle/',
-        'STATS_FILE': path.join(BASE_DIR, 'server', 'webpack-stats.json'),
+        'STATS_FILE': path.join(BASE_DIR, 'server', 'static', 'webpack-stats.json'),
         'POLL_INTERVAL': 0.1,
         'TIMEOUT': None,
         'IGNORE': [r'.*\.hot-update.js', r'.+\.map']
@@ -194,11 +199,6 @@
 TEST_RUNNER = 'xmlrunner.extra.djangotestrunner.XMLTestRunner'
 TEST_OUTPUT_DIR = path.join(BASE_DIR, 'junitxml')
 
-# Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/2.0/howto/static-files/
-
-STATIC_URL = '/static/'
-
 LOGIN_URL = '/login/'
 LOGIN_REDIRECT_URL = '/projects/'
 LOGOUT_REDIRECT_URL = '/'

app/server/models.py

@@ -59,7 +59,7 @@ class TextClassificationProject(Project):
 
     @property
     def image(self):
-        return staticfiles_storage.url('images/cats/text_classification.jpg')
+        return staticfiles_storage.url('assets/images/cats/text_classification.jpg')
 
     def get_bundle_name(self):
         return 'document_classification'
@@ -86,7 +86,7 @@ class SequenceLabelingProject(Project):
 
     @property
     def image(self):
-        return staticfiles_storage.url('images/cats/sequence_labeling.jpg')
+        return staticfiles_storage.url('assets/images/cats/sequence_labeling.jpg')
 
     def get_bundle_name(self):
         return 'sequence_labeling'
@@ -113,7 +113,7 @@ class Seq2seqProject(Project):
 
     @property
     def image(self):
-        return staticfiles_storage.url('images/cats/seq2seq.jpg')
+        return staticfiles_storage.url('assets/images/cats/seq2seq.jpg')
 
     def get_bundle_name(self):
         return 'seq2seq'

app/server/static/.eslintrc

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parserOptions": {
+    "parser": "babel-eslint"
+  },
+  "extends": [
+    "airbnb-base",
+    "plugin:vue/recommended"
+  ],
+  "rules": {
+    "no-new": "off",
+    "no-param-reassign": "off",
+    "no-plusplus": "off",
+    "object-shorthand": "off",
+    "prefer-destructuring": "off",
+    "prefer-template": "off",
+    "vue/max-attributes-per-line": 3
+  }
+}

app/server/static/css/forum.css → app/server/static/assets/css/forum.css

@@ -115,7 +115,7 @@ p {
 }
 
 .project-image {
-  background-image: url('/static/images/cat.png');
+  background-image: url('/static/assets/images/cat.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;

app/server/package.json → app/server/static/package.json

@@ -5,9 +5,9 @@
   "scripts": {
     "start": "cross-env HOT_RELOAD=1 DEBUG=1 webpack-dev-server",
     "build": "webpack",
-    "lint.js": "eslint --max-warnings=0 'static/js/**/*.{js,vue}'",
-    "lint.pug": "pug-lint static/js -c static/js/.pug-lintrc",
-    "lint.pug.vue": "pug-lint-vue static/js -c static/js/.pug-lintrc",
+    "lint.js": "eslint --max-warnings=0 '{components,pages}/**/*.{js,vue}'",
+    "lint.pug": "pug-lint components/",
+    "lint.pug.vue": "pug-lint-vue components/",
     "lint": "run-s lint.js lint.pug lint.pug.vue",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

app/server/static/js/dataset.js → app/server/static/pages/dataset.js

@@ -1,4 +1,4 @@
-import HTTP from './http';
+import HTTP from '../components/http';
 
 document.querySelectorAll('.delete-document-button').forEach((deleteButton) => {
   deleteButton.addEventListener('click', () => {

app/server/static/js/demo/demo_named_entity.js → app/server/static/pages/demo_named_entity.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import DemoNamedEntity from './demo_named_entity.vue';
+import DemoNamedEntity from '../components/demo/demo_named_entity.vue';
 
 Vue.use(require('vue-shortkey'), {
   prevent: ['input', 'textarea'],

app/server/static/js/demo/demo_text_classification.js → app/server/static/pages/demo_text_classification.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import DemoTextClassification from './demo_text_classification.vue';
+import DemoTextClassification from '../components/demo/demo_text_classification.vue';
 
 Vue.use(require('vue-shortkey'), {
   prevent: ['input', 'textarea'],

app/server/static/js/demo/demo_translation.js → app/server/static/pages/demo_translation.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import DemoTranslation from './demo_translation.vue';
+import DemoTranslation from '../components/demo/demo_translation.vue';
 
 Vue.use(require('vue-shortkey'));
 

app/server/static/js/document_classification.js → app/server/static/pages/document_classification.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import DocumentClassification from './document_classification.vue';
+import DocumentClassification from '../components/document_classification.vue';
 
 Vue.use(require('vue-shortkey'), {
   prevent: ['input', 'textarea'],

app/server/static/js/download_seq2seq.js → app/server/static/pages/download_seq2seq.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import DownloadSeq2Seq from './download_seq2seq.vue';
+import DownloadSeq2Seq from '../components/download_seq2seq.vue';
 
 new Vue({
   el: '#mail-app',

app/server/static/js/download_sequence_labeling.js → app/server/static/pages/download_sequence_labeling.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import DownloadSequenceLabeling from './download_sequence_labeling.vue';
+import DownloadSequenceLabeling from '../components/download_sequence_labeling.vue';
 
 new Vue({
   el: '#mail-app',

app/server/static/js/download_text_classification.js → app/server/static/pages/download_text_classification.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import DownloadTextClassification from './download_text_classification.vue';
+import DownloadTextClassification from '../components/download_text_classification.vue';
 
 new Vue({
   el: '#mail-app',

app/server/static/js/guideline.js → app/server/static/pages/guideline.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import vueDebounce from 'vue-debounce';
-import Guideline from './guideline.vue';
+import Guideline from '../components/guideline.vue';
 
 Vue.use(vueDebounce);
 

app/server/static/js/label.js → app/server/static/pages/label.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Labels from './label.vue';
+import Labels from '../components/label.vue';
 
 new Vue({
   el: '#mail-app',

app/server/static/js/projects.js → app/server/static/pages/projects.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Projects from './projects.vue';
+import Projects from '../components/projects.vue';
 
 new Vue({
   el: '#projects_root',

app/server/static/js/seq2seq.js → app/server/static/pages/seq2seq.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Seq2Seq from './seq2seq.vue';
+import Seq2Seq from '../components/seq2seq.vue';
 
 Vue.use(require('vue-shortkey'));
 

app/server/static/js/sequence_labeling.js → app/server/static/pages/sequence_labeling.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import SequenceLabeling from './sequence_labeling.vue';
+import SequenceLabeling from '../components/sequence_labeling.vue';
 
 Vue.use(require('vue-shortkey'), {
   prevent: ['input', 'textarea'],

app/server/static/js/stats.js → app/server/static/pages/stats.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Stats from './stats.vue';
+import Stats from '../components/stats.vue';
 
 new Vue({
   el: '#mail-app',

app/server/static/js/upload_seq2seq.js → app/server/static/pages/upload_seq2seq.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import UploadSeq2Seq from './upload_seq2seq.vue';
+import UploadSeq2Seq from '../components/upload_seq2seq.vue';
 
 new Vue({
   el: '#mail-app',

app/server/static/js/upload_sequence_labeling.js → app/server/static/pages/upload_sequence_labeling.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import UploadSequenceLabeling from './upload_sequence_labeling.vue';
+import UploadSequenceLabeling from '../components/upload_sequence_labeling.vue';
 
 new Vue({
   el: '#mail-app',

app/server/static/js/upload_text_classification.js → app/server/static/pages/upload_text_classification.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import UploadTextClassification from './upload_text_classification.vue';
+import UploadTextClassification from '../components/upload_text_classification.vue';
 
 new Vue({
   el: '#mail-app',