diff --git a/apps/files_sharing/.babelrc.js b/apps/files_sharing/.babelrc.js
new file mode 100644
index 0000000000..137b266162
--- /dev/null
+++ b/apps/files_sharing/.babelrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          browsers: ['last 2 versions', 'ie >= 11']
+        }
+      }
+    ]
+  ],
+  plugins: ['@babel/plugin-syntax-dynamic-import']
+}
diff --git a/apps/files_sharing/list.php b/apps/files_sharing/list.php
index 9eed10f8d2..1866c73b68 100644
--- a/apps/files_sharing/list.php
+++ b/apps/files_sharing/list.php
@@ -32,7 +32,6 @@ $tmpl = new OCP\Template('files_sharing', 'list', '');
 // gridview not available for ie
 $tmpl->assign('showgridview', $showgridview && !$isIE);
 
-OCP\Util::addScript('files_sharing', 'app');
-OCP\Util::addScript('files_sharing', 'sharedfilelist');
+OCP\Util::addScript('files_sharing', 'dist/files_sharing');
 
 $tmpl->printPage();
diff --git a/apps/files_sharing/package.json b/apps/files_sharing/package.json
new file mode 100644
index 0000000000..9aa194cbae
--- /dev/null
+++ b/apps/files_sharing/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "files_sharing",
+  "version": "1.0.0",
+  "description": "File sharing in Nextcloud",
+  "main": "files_sharing.js",
+  "directories": {
+    "lib": "lib",
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "webpack --progress --hide-modules --config webpack.prod.js",
+    "dev": "webpack --progress --watch --config webpack.dev.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "AGPL-3.0-or-later",
+  "dependencies": {
+    "nextcloud-axios": "^0.1.3",
+    "nextcloud-vue": "^0.5.0",
+    "vue": "^2.5.17"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "babel-loader": "^8.0.2",
+    "css-loader": "^2.1.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "vue-loader": "^15.4.2",
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^4.20.0",
+    "webpack-cli": "^3.1.1",
+    "webpack-merge": "^4.1.4"
+  }
+}
diff --git a/apps/files_sharing/src/files_sharing.js b/apps/files_sharing/src/files_sharing.js
new file mode 100644
index 0000000000..c31c8c6e20
--- /dev/null
+++ b/apps/files_sharing/src/files_sharing.js
@@ -0,0 +1,16 @@
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken)
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('files_sharing', 'js/dist/')
+
+import '../js/app'
+import '../js/sharedfilelist'
+import '../js/sharetabview'
+import '../js/share'
+import '../js/sharebreadcrumbview'
+
+window.OCA.Sharing = OCA.Sharing
diff --git a/apps/files_sharing/src/sharetabview.js b/apps/files_sharing/src/sharetabview.js
index 9b1176dbb9..4ac09ff9f7 100644
--- a/apps/files_sharing/src/sharetabview.js
+++ b/apps/files_sharing/src/sharetabview.js
@@ -14,6 +14,7 @@
 	var TEMPLATE =
 		'<div>' +
 		'<div class="dialogContainer"></div>' +
+		'<div id="collaborationResources"></div>' +
 		'</div>';
 
 	/**
@@ -81,6 +82,7 @@
 				this._dialog.model.on('change', function() {
 					self.trigger('sharesChanged', shareModel);
 				});
+
 			} else {
 				this.$el.empty();
 				// TODO: render placeholder text?
diff --git a/apps/files_sharing/webpack.common.js b/apps/files_sharing/webpack.common.js
new file mode 100644
index 0000000000..9479459286
--- /dev/null
+++ b/apps/files_sharing/webpack.common.js
@@ -0,0 +1,47 @@
+const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
+
+module.exports = {
+	entry: path.join(__dirname, 'src', 'files_sharing.js'),
+	output: {
+		path: path.resolve(__dirname, 'js/dist'),
+		publicPath: '/js/dist/',
+		filename: 'files_sharing.js',
+		chunkFilename: 'files_sharing.[name].js'
+},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['vue-style-loader', 'css-loader']
+			},
+			{
+				test: /\.scss$/,
+				use: ['vue-style-loader', 'css-loader', 'sass-loader']
+			},
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader'
+			},
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.(png|jpg|gif|svg)$/,
+				loader: 'file-loader',
+				options: {
+					name: '[name].[ext]?[hash]'
+				}
+			}
+		]
+	},
+	plugins: [new VueLoaderPlugin()],
+	resolve: {
+		alias: {
+			vue$: 'vue/dist/vue.runtime.esm.js',
+		},
+		extensions: ['*', '.js', '.vue', '.json']
+	}
+};
diff --git a/apps/files_sharing/webpack.dev.js b/apps/files_sharing/webpack.dev.js
new file mode 100644
index 0000000000..0c569e7f61
--- /dev/null
+++ b/apps/files_sharing/webpack.dev.js
@@ -0,0 +1,12 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true
+  },
+  devtool: '#source-map',
+})
diff --git a/apps/files_sharing/webpack.prod.js b/apps/files_sharing/webpack.prod.js
new file mode 100644
index 0000000000..f081567bd6
--- /dev/null
+++ b/apps/files_sharing/webpack.prod.js
@@ -0,0 +1,7 @@
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: '#source-map'
+})