Apostrophe Marketing + cusom-code-editor-a3 causes 404 in production build

[karthick-rs-webdev]

I've been working with the ApostropheCMS marketing starter kit and added the custom-code-editor-a3 package to meet the specific requirements of my project. Everything functions correctly in the development build. However, when i run to the production build, I'm getting 404 errors in the browser console.

Understanding the Build Process in ApostropheCMS
In ApostropheCMS, executing the npm run build command initiates the creation of a new folder within public/apos-frontend/releases. This folder is named with a randomly generated alphanumeric string (often referred to as the release ID), and it is where all assets for the production environment are directed. Reference

However, when running the production build with this package, it triggers a 404 error in the console. Removing this package from app.js and rebuilding for production resolves the issue

My app.js

require('dotenv').config();
require('apostrophe')({
  shortName: 'starter-kit-marketing',
  baseUrl: process.env.APOS_BASE_URL,
  nestedModuleSubdirs: true,
  modules: {
    '@apostrophecms/rich-text-widget': {
      options: {}
    },
    '@apostrophecms/image-widget': {
      options: {
        className: 'img-fluid'
      }
    },
    '@apostrophecms/video-widget': {
      options: {}
    },
    '@apostrophecms/columns-widget': {
      options: {}
    },
    '@apostrophecms/form': {
      options: {
        shortcut: 'a,f'
      }
    },
    '@apostrophecms/form-widget': {},
    '@apostrophecms/form-text-field-widget': {},
    '@apostrophecms/form-textarea-field-widget': {},
    '@apostrophecms/form-select-field-widget': {},
    '@apostrophecms/form-radio-field-widget': {},
    '@apostrophecms/form-file-field-widget': {},
    '@apostrophecms/form-checkboxes-field-widget': {},
    '@apostrophecms/form-boolean-field-widget': {},
    '@apostrophecms/form-conditional-widget': {},
    '@apostrophecms/sitemap': {
      options: {
        excludeTypes: [ 'team-member', 'product' ]
      }
    },
    '@apostrophecms/seo': {},
    '@apostrophecms/open-graph': {},
    helper: {},
    asset: {},
    settings: {},
    'default-page': {},
    'content-widget-modules': {
      options: {
        ignoreNoCodeWarning: true
      }
    },
    'pieces-modules': {
      options: {
        ignoreNoCodeWarning: true
      }
    },
    'custom-code-editor-a3': {} // here
  }
});

---

modules/custom-code-editor-a3/index.js

module.exports = {
  options: {
    ace: {
      theme: "tomorrow_night",
      options: {
        enableEmmet: true,
        tabSize: 2,
      },
      config: {
        optionsCustomizer: {
          enable: false,
        },
      },
    },
  }
};

I tried to tweak the webpack as mentioned below
clean
cleanRelease

clean does nothing and cleanRelease throws below error when running the build command

TypeError: patterns must be a string or an array of strings
    at assertPatternsInput (/apostrophe-ks/node_modules/globby/index.js:20:9)
    at generateGlobTasks (/apostrophe-ks/node_modules/globby/index.js:26:2)
    at module.exports.sync (/apostrophe-ks/node_modules/globby/index.js:75:18)
    at module.exports.sync (/apostrophe-ks/node_modules/del/index.js:57:16)
    at CleanWebpackPlugin.removeFiles (/apostrophe-ks/node_modules/clean-webpack-plugin/dist/clean-webpack-plugin.js:179:37)
    at CleanWebpackPlugin.handleInitial (/apostrophe-ks/node_modules/clean-webpack-plugin/dist/clean-webpack-plugin.js:119:10)
    at /apostrophe-ks/node_modules/clean-webpack-plugin/dist/clean-webpack-plugin.js:84:14
    at Hook.eval [as callAsync] (eval at create (/apostrophe-ks/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/apostrophe-ks/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.emitAssets (/apostrophe-ks/node_modules/webpack/lib/Compiler.js:904:19)
    at /apostrophe-ks/node_modules/webpack/lib/Compiler.js:479:10
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

Thank you in advance, and any assistance would be greatly appreciated.

[karthick-rs-webdev]

Guys any update on above one

[ammein]

Hi @karthick-rs-webdev , sorry for the late response. As I was go through your process, I found a problem that may be similar to yours. I found the difference between setting NODE_ENV=production in bash script npm run build and without NODE_ENV.

Try put NODE_ENV=production before npm run build. It will be like this:

NODE_ENV=production npm run build

Let me know if it works...

P/s: If it works, I should update my README to include NODE_ENV=production before running the build command.

[karthick-rs-webdev]

@ammein Thanks for getting back to me. I tried to build the project in two different ways, but unfortunately, the problem still exists.

1. NODE_ENV=production npm run build triggers the following bash script for the build process:

export APOS_RELEASE_ID=`cat /dev/urandom |env LC_CTYPE=C tr -dc 'a-zA-Z0-9' | fold -w 32 | head -n 1`

echo $APOS_RELEASE_ID > ./release-id

node app @apostrophecms/asset:build || exit 1

2. I also tried running the build command directly with a specific release ID like this:
   APOS_RELEASE_ID='HDyXTi85udwdBqtGLk4lsIojFq5G4DXs' NODE_ENV=production node app @apostrophecms/asset:build

However, the issue persists.

[ammein]

Could you remove the apos-build folder and run:

NODE_ENV=production npm run build

[karthick-rs-webdev]

I removed apos-frontend, then I ran NODE_ENV=production npm run build, but the issue persists.

To gain more clarity:

1. rm -rf public/apos-frontend/
2. NODE_ENV=production node app @apostrophecms/asset:clear-cache to clear the cache for the production build
3. NODE_ENV=production npm run build

Still getting 404 error.

[ammein]

Hmmm, weird. Could you share your project here?

[karthick-rs-webdev]

@ammein i can't share my project here, since it's under development. but you can spin up a simple apostrophecms-marketing site with cusom-code-editor-a3. On production build you can get this error.