Extension asset upload

extension-section/webpack.config.js

@@ -97,7 +97,17 @@ module.exports = (env) => {
                       "less-loader",
                     ],
                     exclude: /\.global\.less$/,
+                },
+                {
+                  test: /\.(png|jpg|jpeg|ttf|otf|woff|woff2)$/i,
+                  type: "asset/resource",
+                  generator: {
+                    publicPath: isLocalBuild
+                      ? env.localAssetBasePath
+                      : env.assetCdnUrl,
+                    outputPath: "assets/",
                   },
+              },
             ],
         },
         plugins: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gofynd/fdk-cli",
-  "version": "6.2.1",
+  "version": "6.2.2",
   "main": "index.js",
   "license": "MIT",
   "bin": {

src/helper/extension.react.config.ts

@@ -36,6 +36,8 @@ type ExtensionBuildContext = {
     bundleName: string;
     port: number
     context: string;
+    assetCdnUrl?: string;
+    localAssetBasePath?: string,
 }
 
 const snippet = (port) => `
@@ -65,6 +67,7 @@ export function extensionWebpackConfig(env: ExtensionBuildContext, webpackConfig
 
     const extendedWebpackResolved = webpackConfigFromBinding(env);
 
+
     const baseConfig: Configuration = {
         externals: {
             react: 'React',

src/lib/ExtensionSection.ts

@@ -8,7 +8,7 @@ import { tunnel as startCloudflareTunnel, bin, install } from 'cloudflared';
 
 import Logger from './Logger';
 import Spinner from '../helper/spinner';
-import { installNpmPackages } from '../helper/utils';
+import { asyncForEach, installNpmPackages } from '../helper/utils';
 import { readFile } from '../helper/file.utils';
 import { extensionWebpackConfig } from '../helper/extension.react.config';
 import { webpack } from 'webpack';
@@ -37,6 +37,7 @@ const readDirectories = promisify(fs.readdir);
 type BindingInterface = 'Web Theme' | 'Platform';
 
 export type SupportedFrameworks = 'react' | 'vue2';
+import glob from 'glob';
 
 type AppliedThemeData = {
     applicationId: string;
@@ -291,6 +292,59 @@ export default class ExtensionSection {
         }
     }
 
+    private  static assetsUploader = async (destinationPath) => {
+        try {
+            const cwd = path.resolve(
+                destinationPath,
+                'dist',
+                'assets',
+            );
+            const images = glob.sync(path.join('**', '**.**'), { cwd });
+            await asyncForEach(images, async (img) => {
+                const assetPath = path.join(
+                    cwd,
+                    img,
+                );
+                await uploadService.uploadFile(
+                    assetPath,
+                    'application-theme-images',
+                );
+            });
+        } catch (err) {
+            throw new CommandError(
+                err.message || `Failed to upload assets/images`,
+                err.code,
+            );
+        }
+    };
+
+    private static getAssetCdnUrl = async () => {
+        try {
+            const dummyFile = path.join(
+                __dirname,
+                '..',
+                '..',
+                'sample-upload.jpeg'
+            );
+
+            const response = await uploadService.uploadFile(
+                dummyFile,
+                'application-theme-assets',
+                null,
+                'application/javascript'
+            );
+
+
+            return path.dirname(response.complete.cdn.url);
+        } catch (err) {
+            Logger.error(err);
+            throw new CommandError(
+                `Failed in getting image CDN base url`,
+                err.code,
+            );
+        }
+    }
+
     public static clearContext() {
         Configstore.set('extensionSections', {});
     }
@@ -441,14 +495,18 @@ export default class ExtensionSection {
             options,
             'publish',
         );
+
         const { interface: bindingInterface, framework, name } = context;
 
         if (bindingInterface === 'Web Theme') {
             if (framework === 'react' || framework === 'vue2') {
                 Logger.info(`Publishing Extension Bindings`);
 
+                const assetCdnUrl = await ExtensionSection.getAssetCdnUrl();
+
                 const sectionData = await ExtensionSection.buildAndExtractSections(
                     context,
+                    assetCdnUrl
                 );
                 sectionData.status = 'published';
 
@@ -537,6 +595,7 @@ export default class ExtensionSection {
 
     static async buildAndExtractSections(
         context: SyncExtensionBindingsOptions,
+        assetCdnUrl:string
     ): Promise<any> {
         const { name: bundleName, framework } = context;
         const isReact = framework === 'react';
@@ -547,11 +606,12 @@ export default class ExtensionSection {
             isReact ? ExtensionSection.BINDINGS_DIR_REACT : ExtensionSection.BINDINGS_DIR_VUE,
             bundleName,
         )
-
+        Logger.info('Uploading extension assets');
+        await ExtensionSection.assetsUploader(destinationPath);
         process.chdir(destinationPath);
-
+        
         if (isReact) {
-            await ExtensionSection.buildExtensionCode({ bundleName }).catch(
+            await ExtensionSection.buildExtensionCode({ bundleName,assetCdnUrl }).catch(
                 console.error,
             );
         } else {
@@ -611,6 +671,7 @@ export default class ExtensionSection {
 
     static async buildExtensionCode({
         bundleName,
+        assetCdnUrl='',
         isLocal = false,
         port = 5502,
     }): Promise<{ jsFile: string; cssFile: string }> {
@@ -623,7 +684,7 @@ export default class ExtensionSection {
                 context,
                 'webpack.config.js'
             );
-
+            
             if (fs.existsSync(webpackExtendedPath)) {
                 ({ default: webpackConfigFromBinding } = await import(
                     webpackExtendedPath
@@ -634,6 +695,7 @@ export default class ExtensionSection {
                 isLocal,
                 bundleName,
                 port,
+                assetCdnUrl: assetCdnUrl + '/',
                 context,
             }, webpackConfigFromBinding);
 
@@ -667,9 +729,10 @@ export default class ExtensionSection {
         if (bindingInterface === 'Web Theme') {
             if (framework === 'react' || framework === 'vue2') {
                 Logger.info(`Creating drafts for Extension Bindings`);
-
+                const assetCdnUrl = await ExtensionSection.getAssetCdnUrl();
                 const sectionData = await ExtensionSection.buildAndExtractSections(
                     context,
+                    assetCdnUrl
                 );
                 sectionData.status = 'draft';
 
@@ -715,10 +778,13 @@ export default class ExtensionSection {
                 ));
             }
 
+            const localAssetBasePath = `http://127.0.0.1:${port}/assets/`;
+
             const webpackConfig = extensionWebpackConfig({
                 isLocal: true,
                 bundleName,
                 port,
+                localAssetBasePath,
                 context,
             }, webpackConfigFromBinding);
 

src/lib/Theme.ts

@@ -351,8 +351,9 @@ export default class Theme {
                     throw new CommandError(error.message, error.code);
                 }
             });
-        config['application_id'] = selectedApplication;
-        config['company_id'] = selectedCompany;
+            config['application_id'] = selectedApplication;
+            config['company_id'] = selectedCompany;
+
         return config;
     }
 
@@ -1217,7 +1218,6 @@ export default class Theme {
 
             // start dev server
             Logger.info(chalk.bold.blueBright(`Starting server`));
-
             await startReactServer({
                 domain,
                 host,
@@ -1645,7 +1645,7 @@ export default class Theme {
         );
     }
 
-    private static assetsImageUploader = async () => {
+     private static assetsImageUploader = async () => {
         try {
             const cwd = path.resolve(
                 process.cwd(),
@@ -1675,7 +1675,7 @@ export default class Theme {
         }
     };
 
-    private static getImageCdnBaseUrl = async () => {
+    public static getImageCdnBaseUrl = async () => {
         try {
             const dummyFile = path.join(
                 __dirname,
@@ -1701,7 +1701,7 @@ export default class Theme {
         }
     };
 
-    private static getAssetCdnBaseUrl = async () => {
+    public static getAssetCdnBaseUrl = async () => {
         try {
             const dummyFile = path.join(
                 __dirname,