refactor: build plugin successfully

.vscode/settings.json

@@ -19,8 +19,8 @@
         "mac/dist": true,
         "mac/temp": true,
         "focalboard*.db": true,
-        "webapp/dist/**": true,
-        "webapp/pack": true
+        "webapp/dist/**": false,
+        "webapp/pack": false 
     },
     "search.exclude": {
         "**/__snapshots__": true,

Makefile

@@ -111,31 +111,35 @@ else
 endif
 endif
 
-# ## Ensures NPM dependencies are installed without having to run this all the time.
-# webapp/node_modules: $(wildcard webapp/package.json)
-# ifneq ($(HAS_WEBAPP),)
-# 	cd webapp && $(NPM) install
-# 	touch $@
-# endif
+## Ensures NPM dependencies are installed without having to run this all the time.
+webapp/node_modules: $(wildcard webapp/package.json)
+ifneq ($(HAS_WEBAPP),)
+	cd webapp && $(NPM) install
+	touch $@
+endif
 
-# ## Builds the webapp, if it exists.
-# .PHONY: webapp
-# webapp: webapp/node_modules
-# ifneq ($(HAS_WEBAPP),)
-# ifeq ($(MM_DEBUG),)
-# 	cd webapp && $(NPM) run build;
-# else
-# 	cd webapp && $(NPM) run debug;
-# endif
-# endif
+## Builds the webapp, if it exists.
+.PHONY: webapp-plugin
+webapp-plugin: webapp/node_modules
+ifneq ($(HAS_WEBAPP),)
+ifeq ($(MM_DEBUG),)
+	cd webapp && $(NPM) run build;
+else
+	cd webapp && $(NPM) run debug;
+endif
+endif
 
 ## Generates a tar bundle of the plugin for install.
+
+webapp: ## Build webapp.
+	cd webapp; npm run pack
+
 .PHONY: bundle
 bundle:
 	rm -rf dist/
 	mkdir -p dist/$(PLUGIN_ID)
 	cp $(MANIFEST_FILE) dist/$(PLUGIN_ID)/
-	cp -r ../webapp/pack dist/$(PLUGIN_ID)/
+	cp -r webapp/pack dist/$(PLUGIN_ID)/
 ifneq ($(wildcard $(ASSETS_DIR)/.),)
 	cp -r $(ASSETS_DIR) dist/$(PLUGIN_ID)/
 endif
@@ -321,7 +325,7 @@ deploy-to-mattermost-directory:
 	./build/bin/pluginctl disable $(PLUGIN_ID)
 	mkdir -p $(FOCALBOARD_PLUGIN_PATH)
 	cp $(MANIFEST_FILE) $(FOCALBOARD_PLUGIN_PATH)/
-	cp -r ../webapp/pack $(FOCALBOARD_PLUGIN_PATH)/
+	cp -r webapp/pack $(FOCALBOARD_PLUGIN_PATH)/
 	cp -r $(ASSETS_DIR) $(FOCALBOARD_PLUGIN_PATH)/
 	cp -r public $(FOCALBOARD_PLUGIN_PATH)/
 	mkdir -p $(FOCALBOARD_PLUGIN_PATH)/server
@@ -491,9 +495,6 @@ server-test-postgres: ## Run server tests using postgres
 	cd mattermost-plugin/server; go tool cover -func plugin-postgres-profile.coverage
 	docker-compose -f ./docker-testing/docker-compose-postgres.yml down -v --remove-orphans
 
-webapp: ## Build webapp.
-	cd webapp; npm run pack
-
 webapp-ci: ## Webapp CI: linting & testing.
 	cd webapp; npm run check
 	cd mattermost-plugin/webapp; npm run lint

webapp/package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"description": "",
 	"scripts": {
+		"build": "webpack --mode=production",
 		"pack": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
 		"packdev": "cross-env NODE_ENV=dev webpack --config webpack.dev.js",
 		"watchdev": "cross-env NODE_ENV=dev webpack --watch --progress --config webpack.dev.js",
@@ -48,7 +49,7 @@
 		"imagemin-svgo": "^10.0.1",
 		"imagemin-webp": "^7.0.0",
 		"immutable": "3.7.6",
-    "mattermost-redux": "5.33.1",
+    	"mattermost-redux": "5.33.1",
 		"lodash": "^4.17.21",
 		"marked": "^4.0.12",
 		"mini-create-react-context": "^0.4.1",

webapp/src/components/rhsChannelBoardsHeader.tsx

@@ -9,7 +9,7 @@ import {getCurrentChannel} from '../store/channels'
 import {useAppSelector} from '../store/hooks'
 import {Utils} from '../utils'
 
-import appBarIcon from '../../../../webapp/static/app-bar-icon.png'
+import appBarIcon from '../../static/app-bar-icon.png'
 
 const RHSChannelBoardsHeader = () => {
     const currentChannel = useAppSelector(getCurrentChannel)

webapp/src/index.tsx

@@ -9,6 +9,8 @@ import {rudderAnalytics, RudderTelemetryHandler} from 'mattermost-redux/client/r
 import {GlobalState} from 'mattermost-redux/types/store'
 import {selectTeam} from 'mattermost-redux/actions/teams'
 
+import appBarIcon from '../static/app-bar-icon.png'
+
 import TelemetryClient, {TelemetryCategory, TelemetryActions} from './telemetry/telemetryClient'
 import {setMattermostTheme} from './theme'
 import FocalboardIcon from './widgets/icons/logo'
@@ -20,12 +22,11 @@ import WithWebSockets from './components/withWebSockets'
 import {setChannel} from './store/channels'
 import {initialLoad} from './store/initialLoad'
 import {Utils} from './utils'
-import '../../../webapp/src/styles/focalboard-variables.scss'
-import '../../../webapp/src/styles/main.scss'
-import '../../../webapp/src/styles/labels.scss'
+import './styles/focalboard-variables.scss'
+import './styles/main.scss'
+import './styles/labels.scss'
 import octoClient from './octoClient'
 import {Board} from './blocks/board'
-import appBarIcon from './static/app-bar-icon.png'
 import {getMessages, getCurrentLanguage} from './i18n'
 import {UserSettings} from './userSettings'
 import {SuiteWindow} from './types/index'

webapp/tsconfig.json

@@ -13,7 +13,7 @@
         "resolveJsonModule": true,
         "incremental": false,
         "baseUrl": "src",
-        "outDir": "../dist",
+        "outDir": "./dist",
         "moduleResolution": "node"
     },
     "include": [

webapp/webpack.config.js

@@ -61,7 +61,7 @@ const config = {
             path.resolve(__dirname),
         ],
         alias: {
-            moment: path.resolve(__dirname, '../../webapp/node_modules/moment/'),
+            moment: path.resolve(__dirname, './node_modules/moment/'),
         },
         extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
     },
@@ -190,7 +190,7 @@ if (TARGET_IS_PRODUCT) {
         chunkFilename: '[name].[contenthash].js',
     };
 } else {
-    config.resolve.alias['react-intl'] = path.resolve(__dirname, '../../webapp/node_modules/react-intl/');
+    config.resolve.alias['react-intl'] = path.resolve(__dirname, './node_modules/react-intl/');
 
     config.externals = {
         react: 'React',
@@ -236,7 +236,7 @@ if (NPM_TARGET === 'start:product') {
             writeToDisk: false,
         },
         static: {
-            directory: path.join(__dirname, '../../webapp/static'),
+            directory: path.join(__dirname, './static'),
             publicPath: '/static',
         },
     };