Added "Content-Type" to files that are sent to S3.

helpers.js

@@ -11,6 +11,7 @@ import {buildHubspotEmail} from "./platforms/hubspot/hubspot-email-adapter.js";
 import {buildHubspotPage} from "./platforms/hubspot/hubspot-page-adapter.js";
 import fs from "fs/promises";
 import fetch from "node-fetch";
+import mime from "mime-types";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -180,7 +181,14 @@ export function removeCommentsFromJs(content) {
 }
 
 export async function uploadFile(filePath, uploadUrl, validator) {
-  let body = await fs.readFile(filePath, {encoding: 'utf8'});
+  const options = {};
+
+  const contentType = mime.lookup(filePath);
+  if (['text/css', 'application/javascript'].includes(contentType)) {
+    options.encoding = 'utf8';
+  }
+
+  let body = await fs.readFile(filePath, options);
 
   if (validator) {
     body = validator(body);
@@ -190,11 +198,12 @@ export async function uploadFile(filePath, uploadUrl, validator) {
     const response = await fetch(uploadUrl, {
       method: 'PUT',
       body: body,
-      headers: {'Content-Type': 'application/javascript'}
+      headers: {'Content-Type': contentType}
     });
 
     return response.status !== 200;
   } catch (err) {
+    console.log(err)
     const fileName = filePath.split('/').pop();
     throw new Error(`Can't upload "${fileName}" file. Server permission error.`);
   }
@@ -235,3 +244,11 @@ export async function isFileEmpty(filePath, ignoreComments = false) {
 
   return true;
 }
+
+export function replaceNames(content, images, uploadedImages) {
+  images.forEach((image, index) => {
+    content = content.replace(image, uploadedImages[index].fileName);
+  });
+
+  return content;
+}

package.json

@@ -7,9 +7,9 @@
 		"url": "https://axe-web.com/"
 	},
 	"scripts": {
-		"info": "NODE_ENV=development BLOCK_NAME=content MODULE_PATH= node debug.js",
-		"dev": "NODE_ENV=development BLOCK_NAME=content MODULE_PATH= node server.js",
-		"build-platform": "NODE_ENV=development BLOCK_NAME=content MODULE_PATH= node ./build.js",
+		"info": "NODE_ENV=development BLOCK_NAME=buttons MODULE_PATH= node debug.js",
+		"dev": "NODE_ENV=development BLOCK_NAME=buttons MODULE_PATH= node server.js",
+		"build-platform": "NODE_ENV=development BLOCK_NAME=buttons MODULE_PATH= node ./build.js",
 		"dev-dev-tool": "NODE_ENV=development rollup --config rollup.config.js --watch",
 		"build-dev-tool": "rollup --config rollup.config.js"
 	},
@@ -37,6 +37,7 @@
 		"lodash-es": "^4.17.21",
 		"mem-fs": "^2.2.1",
 		"mem-fs-editor": "^9.5.0",
+		"mime-types": "^2.1.35",
 		"ngrok": "^5.0.0-beta.2",
 		"node-fetch": "^3.2.10",
 		"open": "^8.4.0",

server.js

@@ -29,6 +29,7 @@ import {
   readJSONFile,
   removeCommentsFromCss,
   removeCommentsFromJs,
+  replaceNames,
   uploadFile,
   zipProject
 } from "./helpers.js";
@@ -139,6 +140,11 @@ app.get('/view/:baseView', (req, res) => {
 app.get('/publish', async (req, res) => {
   const data = await readJSONFile(path.join(projectPath, `block.json`));
 
+  // Trigger build on the registry server only if the type of the unit is `foundation` or `component`.
+  const uploadStaticFiles = ['foundation', 'component'].includes(data.type);
+
+  // Prepare list of static files for the registry server.
+  if (uploadStaticFiles) {
     data.static_files = {
       css: getBlockName(data.name).name + '.min.css',
       js: getBlockName(data.name).name + '.min.js',
@@ -152,6 +158,7 @@ app.get('/publish', async (req, res) => {
     if (!data.static_files.images.length) {
       delete data.static_files.images;
     }
+  }
 
   let responseData = {
     uploadBundleUrl: undefined,
@@ -183,25 +190,36 @@ app.get('/publish', async (req, res) => {
       await uploadFile(path.join(projectPath, 'dist.zip'), responseData.uploadBundleUrl); // Bundle
     }
 
-    // TODO: Upload CSS/JS/Images files only if the type of the unit is `foundation` or `component`.
+    if (uploadStaticFiles) {
       if (responseData.staticFilesUrls.css) {
         await uploadFile(
           path.join(projectPath, 'src/styles', data.static_files.css),
           responseData.staticFilesUrls.css.uploadUrl,
-        (data) => removeCommentsFromCss(data)); // CSS
+          (content) => {
+            if (responseData.staticFilesUrls.images) {
+              content = replaceNames(content, data.static_files.images, responseData.staticFilesUrls.images);
+            }
+
+            removeCommentsFromCss(content)
+            return content;
+          }); // CSS
       }
 
       if (responseData.staticFilesUrls.js) {
         await uploadFile(
           path.join(projectPath, 'src/scripts', data.static_files.js),
           responseData.staticFilesUrls.js.uploadUrl,
-        (data) => removeCommentsFromJs(data)); // JS
+          (data) => removeCommentsFromJs(data)
+        ); // JS
       }
 
       if (responseData.staticFilesUrls.images) {
         for (let i = 0; i < data.static_files.images.length; i++) {
-        await uploadFile(path.join(projectPath, 'src/images', data.static_files.images[i]),
-          responseData.staticFilesUrls.images[i].uploadUrl); // Images
+          await uploadFile(
+            path.join(projectPath, 'src/images', data.static_files.images[i]),
+            responseData.staticFilesUrls.images[i].uploadUrl,
+          ); // Images
+        }
       }
     }
   } catch (err) {
@@ -214,13 +232,15 @@ app.get('/publish', async (req, res) => {
 
   await fs.unlink(path.join(projectPath, 'dist.zip')); // Remove local bundle
 
-  // TODO: Trigger build on the registry server only if the type of the unit is `foundation` or `component`.
+  // Trigger project's global files build on the registry server.
+  if (uploadStaticFiles) {
     try {
       await triggerGlobalProjectFilesBuild(getBlockName(data.name).project);
     } catch (err) {
       res.json({success: false, message: 'Something wrong with Project Builder.'});
       return;
     }
+  }
 
   res.json({success: true});
 });