Source Maps Generated in Production & Public Folder Handling Issue

[ThisIsMrAli]

I’ve encountered two issues while configuring Webpack for developing an Adobe Express add-on:

1. Source Maps Generated in Production:
   Despite setting mode: "production", Webpack continues to generate .js.map files. This unnecessarily increases bundle size and may expose source code.

2. Manual Public Folder Specification:
   When using CopyWebpackPlugin, I had to manually specify the public folder. Ideally, Webpack should handle this dynamically and not throw an error if the folder is missing.

   Why the Public Folder Matters for Adobe Express Add-ons:
   Adobe Express add-ons often require storing static assets such as JSON configuration files, icons, and other resources. The public folder serves as a place for these assets, ensuring they are included in the final build without being processed by Webpack. Having a reliable and error-free way to include these files is essential for seamless integration with Adobe Express.

Steps to Reproduce:

1. Configure Webpack with mode: "production".
2. Run webpack --mode production.
3. Observe that .js.map files are still generated in the output directory.
4. There is no Public folder in src folder

Expected Behavior:

• .js.map files should not be generated in production unless explicitly enabled.
• CopyWebpackPlugin Public folder should be added by default into src folder and webpack should copy files and folders inside public into dist

Suggested Solutions:

• Update devtool to:

  devtool: isEnvProduction ? false : "source-map"

  This ensures source maps are only generated in development mode.
• Modify CopyWebpackPlugin to:

  new CopyWebpackPlugin({
    patterns: [
      { from: path.resolve(__dirname, "src/public"), to: "", noErrorOnMissing: true },
    ],
  })

  This prevents errors when the public folder is missing.

Would appreciate any insights on whether this is intended behavior or if improvements can be made. Thank you! 🚀

[xerxovksi]

Hello @ThisIsMrAli,

First of all, thanks for trying out add-ons in Adobe Express, and taking the time to suggest these changes to help make our product better. However, these settings are a result of some of the decisions we took to be as generic as possible.

• For the source-map setting, this is a standard practice that we follow across our products. However, please feel free to make the change in your webpack.config.cjs file as you feel fit for your add-on.

• All add-ons might not necessarily put their static assets under the public directory - some might even have them inside assets, and so on. And we do not want to be too restrictive to just define a rule for the public folder. But again, there is no restriction on how you customize your webpack.config.cjs - besides having the static manifest.json file in the root of your dist - at the same level as your panel entrypoint index.html.

Hope this helps! Thanks again!!

[ThisIsMrAli]

Hi @xerxovksi

Thank you for your response and the clarification! I appreciate the flexibility provided in customizing the Webpack configuration for Adobe Express add-ons.

For the source maps, I completely understand the decision to maintain a standard approach across products. I'll continue applying the devtool adjustment in my webpack.config.cjs as necessary for my add-on.

Regarding the public folder, I appreciate the insight that different add-ons may organize static assets in various ways. I'll keep this in mind when developing my configuration and may adapt it to my needs while ensuring the required manifest.json file is properly placed.

One suggestion I’d like to share is the possibility of including some basic use cases or examples for users who need to serve assets from the public folder (similar to how React handles static assets). This could help new developers understand the benefits of a dedicated folder for such resources and improve their workflow when integrating with Adobe Express.

Thanks again for your help and the opportunity to contribute suggestions! Looking forward to further enhancing the Adobe Express add-on experience.

[xerxovksi]

Hi @xerxovksi

Thank you for your response and the clarification! I appreciate the flexibility provided in customizing the Webpack configuration for Adobe Express add-ons.

For the source maps, I completely understand the decision to maintain a standard approach across products. I'll continue applying the devtool adjustment in my webpack.config.cjs as necessary for my add-on.

Regarding the public folder, I appreciate the insight that different add-ons may organize static assets in various ways. I'll keep this in mind when developing my configuration and may adapt it to my needs while ensuring the required manifest.json file is properly placed.

One suggestion I’d like to share is the possibility of including some basic use cases or examples for users who need to serve assets from the public folder (similar to how React handles static assets). This could help new developers understand the benefits of a dedicated folder for such resources and improve their workflow when integrating with Adobe Express.

Thanks again for your help and the opportunity to contribute suggestions! Looking forward to further enhancing the Adobe Express add-on experience.

Here is a basic example of using local assets in an add-on. Although this is a simple example built using vanilla javascript - it gives an idea. We can add a similar example add-on which uses react to serve static assets if that helps! Thanks!!