From cc070fee1e840fd7a9973a042f1c01a5f3d45a72 Mon Sep 17 00:00:00 2001 From: Rajat Dabade Date: Wed, 19 Jun 2024 16:39:25 +0530 Subject: [PATCH] refactor: build plugin successfully --- .vscode/settings.json | 4 +- Makefile | 43 ++++++++++--------- webapp/package.json | 3 +- .../src/components/rhsChannelBoardsHeader.tsx | 2 +- webapp/src/index.tsx | 9 ++-- webapp/tsconfig.json | 2 +- webapp/webpack.config.js | 6 +-- 7 files changed, 36 insertions(+), 33 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 5a2fd3b3c..a4ba327d0 100644 --- a/.vscode/settings.json +++ b/.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, diff --git a/Makefile b/Makefile index 6c0a0c64f..b6506bb91 100644 --- a/Makefile +++ b/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 diff --git a/webapp/package.json b/webapp/package.json index 9cd7c456c..2e59f0e83 100644 --- a/webapp/package.json +++ b/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", diff --git a/webapp/src/components/rhsChannelBoardsHeader.tsx b/webapp/src/components/rhsChannelBoardsHeader.tsx index ee112da20..a19facdef 100644 --- a/webapp/src/components/rhsChannelBoardsHeader.tsx +++ b/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) diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx index 64506131d..ea76da787 100644 --- a/webapp/src/index.tsx +++ b/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' diff --git a/webapp/tsconfig.json b/webapp/tsconfig.json index 191e4a5c1..92341f9c6 100644 --- a/webapp/tsconfig.json +++ b/webapp/tsconfig.json @@ -13,7 +13,7 @@ "resolveJsonModule": true, "incremental": false, "baseUrl": "src", - "outDir": "../dist", + "outDir": "./dist", "moduleResolution": "node" }, "include": [ diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js index 51a66d168..a8d3814fa 100644 --- a/webapp/webpack.config.js +++ b/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', }, };