Release v0.4.7 + Improve separation frontend/backend + Update Dockerfile

.dockerignore

@@ -1 +1,3 @@
-*.tar
+*.tar
+node_modules
+frontend/node_modules

Dockerfile

@@ -2,26 +2,21 @@ FROM ubuntu:18.04
 
 # Install Node.js
 RUN apt update && apt install -y --reinstall ca-certificates curl build-essential
-RUN curl --silent --location https://deb.nodesource.com/setup_10.x | bash -
+RUN curl --silent --location https://deb.nodesource.com/setup_12.x | bash -
 RUN apt install -y nodejs && apt install -y python-requests
+RUN npm install -g [email protected]
 
-COPY package.json package.json
-
-COPY webpack.config.js webpack.config.js
-
-COPY src src
-
-COPY images images
+# Copy files for the frontend
+COPY frontend frontend
 
+# Copy files for the backend
+COPY package.json package.json
 COPY server server
-
 COPY .logo-ascii .logo-ascii
 
-RUN npm install -g [email protected] && npm i \
-    && npm run build \
-    && rm -rf src node_modules images \
-    && npm i -D \
-    && rm -rf package-lock.json webpack.config.js
+# Build frontend and install backend dependencies
+RUN npm run installApp && npm run buildApp && npm install \
+    && rm -rf src frontend
 
 EXPOSE 3000
 

Dockerfile-local

@@ -1,26 +1,21 @@
 # Build Docker image 
-
 FROM ubuntu:18.04
 
 # Install Node.js
 RUN apt-get update && apt-get install -y --reinstall ca-certificates curl build-essential
 RUN curl --silent --location https://deb.nodesource.com/setup_10.x | bash -
 RUN apt install -y nodejs && apt install -y python-requests
 
-COPY package.json package.json
-
-COPY webpack.config.js webpack.config.js
-
+# Copy bundled frontend
 COPY build build
 
-COPY images images
-
+# Copy files for the backend
+COPY package.json package.json
 COPY server server
-
 COPY .logo-ascii .logo-ascii
 
-RUN npm install -g [email protected] && npm i -D
-
+# Install backend dependencies
+RUN npm install
 EXPOSE 3000
 
 # ENTRYPOINT ["node", "server/server.js"]

README.md

@@ -75,37 +75,35 @@ You can fill the task configuration as follows, which will create as many annota
 
 #### Global dependencies
 
-- NodeJS (>=10)
+- NodeJS (>=12)
   To install on ubuntu:
   ```bash
   # Make sure you have curl installed
   sudo apt install curl
   # Then download and execute the Node.js 10.x installer
-  curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+  curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
   # Once the installer is done doing its thing, you will need to install (or upgrade) Node.js
   sudo apt install nodejs
   # Make sure the version is now correct
   nodejs --version
+  npm install -g [email protected]
   ```
   You can read this nice [introduction](https://codeburst.io/the-only-nodejs-introduction-youll-ever-need-d969a47ef219) to NodeJS in case you're curious on how it works:
 
 #### Application dependencies
 
 ```bash
-# Install application dependencies
+# Install application backend and frontend dependencies
 npm i
+npm run installApp
 ```
 
 ##### Using a local pixano-element
 If you want to use custom `pixano-element` modules from local path instead of the NPM registry, link them as explained below:
 
 ```bash
-npm run cleanPixanoElements
 # Install application dependencies and local pixano-elements
-npm run installLocalPixanoElement --pixano-elements-address=../pixano-elements --element=core
-npm run installLocalPixanoElement --pixano-elements-address=../pixano-elements --element=ai
-npm run installLocalPixanoElement --pixano-elements-address=../pixano-elements --element=graphics-2d
-npm run installLocalPixanoElement --pixano-elements-address=../pixano-elements --element=graphics-3d
+cd frontend/ && npm run installLocalElements --path=../../pixano-elements && cd ../
 ```
 *NB: Make sure you have the git repository of pixano-elements next to the pixano-app folder and that you have followed the pixano-elements build instructions before running the above commands.*
 
@@ -114,7 +112,7 @@ npm run installLocalPixanoElement --pixano-elements-address=../pixano-elements -
 ```bash
 # Bundle the application using Webpack
 # This will create a build folder containing all the sources to be served
-npm run build
+npm run buildApp
 ```
 
 #### Run the application

frontend/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "pixano-app-frontend",
+  "version": "0.4.7",
+  "description": "This is a Pixano app.",
+  "scripts": {
+    "copyindex": "shx cp src/index.html build",
+    "copyimage": "shx cp -r images build/",
+    "copywc": "shx cp node_modules/@webcomponents/webcomponentsjs/webcomponents-* build/",
+    "build": "shx rm -rf build && shx mkdir build && npm run copyindex && npm run copyimage && npm run copywc && webpack --config webpack.config.js",
+    "clean": "shx rm -rf node_modules",
+    "installLocalElements": "shx rm -rf node_modules/@pixano ; shx rm -rf package-lock.json ; npm i ${npm_config_path}/packages/core ; npm i ${npm_config_path}/packages/ai ; npm i ${npm_config_path}/packages/graphics-2d; npm i ${npm_config_path}/packages/graphics-3d"
+  },
+  "keywords": [],
+  "license": "CECILL-C",
+  "engines": {
+    "node": ">=10.0.0",
+    "npm": ">=6.0.0"
+  },
+  "bin": "./server/serve.js",
+  "devDependencies": {
+    "shx": "^0.3.3",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
+  },
+  "dependencies": {
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-transform-runtime": "^7.7.6",
+    "@babel/polyfill": "^7.7.0",
+    "@babel/preset-env": "^7.7.7",
+    "@babel/runtime": "^7.7.7",
+    "@material/mwc-button": "0.19.1",
+    "@material/mwc-checkbox": "0.19.1",
+    "@material/mwc-circular-progress-four-color": "0.19.1",
+    "@material/mwc-dialog": "0.19.1",
+    "@material/mwc-fab": "0.19.1",
+    "@material/mwc-formfield": "0.19.1",
+    "@material/mwc-icon": "0.19.1",
+    "@material/mwc-icon-button": "0.19.1",
+    "@material/mwc-icon-button-toggle": "0.19.1",
+    "@material/mwc-linear-progress": "0.19.1",
+    "@material/mwc-list": "0.19.1",
+    "@material/mwc-menu": "0.19.1",
+    "@material/mwc-radio": "0.19.1",
+    "@material/mwc-select": "0.19.1",
+    "@material/mwc-slider": "0.19.1",
+    "@material/mwc-snackbar": "0.19.1",
+    "@material/mwc-switch": "0.19.1",
+    "@material/mwc-tab": "0.19.1",
+    "@material/mwc-tab-bar": "0.19.1",
+    "@material/mwc-textarea": "0.19.1",
+    "@material/mwc-textfield": "0.19.1",
+    "@pixano/ai": "0.5.16",
+    "@pixano/core": "0.5.16",
+    "@pixano/graphics-2d": "0.5.16",
+    "@pixano/graphics-3d": "0.5.16",
+    "@trystan2k/fleshy-jsoneditor": "3.0.0",
+    "@webcomponents/webcomponentsjs": "^2.4.0",
+    "babel-loader": "^8.0.6",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.0",
+    "file-loader": "^5.0.2",
+    "html-webpack-plugin": "^3.2.0",
+    "lit-element": "2.4.0",
+    "lit-redux-router": "^0.10.0",
+    "material-design-icons": "^3.0.1",
+    "node-sass": "^4.13.0",
+    "pwa-helpers": "^0.9.1",
+    "redux": "^4.0.4",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-thunk": "^2.3.0",
+    "redux-undo": "^1.0.0",
+    "sass-loader": "^8.0.0",
+    "source-map-loader": "^0.2.4",
+    "string-replace-loader": "^2.2.0",
+    "style-loader": "^1.0.2",
+    "typeface-roboto": "0.0.75",
+    "url-loader": "^3.0.0",
+    "web-animations-js": "^2.3.2"
+  }
+}