Under the hood

Build process

Custom build process

You can use the custom build process to build your Addon. The Addon Repository anticipates that you have a build script in your repository. The build script should be invoked by the yarn build --env production command. The Addon Repository will run this command during the build process.

You can use various build tools like Webpack, Gulp, or Grunt to build your Addon. The Addon Repository will run the build script in the root directory of your repository.

The output of the build script should be in the dist folder. The Addon Repository will deploy the contents of the dist folder to the remote server. See the structure bellow on this page.

Provided build process

If you don't have a build script in your repository, you can use the provided build process. See Webpack file, that you can use in your project. Then you have to put a build script in your package.json file.

{
  [...]
  "scripts": {
    "build": "webpack --config webpack.config.js"
    [...]
  },
  [...]
}

Also, here is the list of the dependencies you need to install:

  'webpack-cli': '^5.1.4',
  'babel-loader': '^9.1.3',
  'css-loader': '^6.10.0',
  'css-minimizer-webpack-plugin': '^6.0.0',
  'extract-loader': '^5.1.0',
  'file-loader': '^6.2.0',
  glob: '^10.3.10',
  'html-loader': '^5.0.0',
  'javascript-obfuscator': '^4.1.0',
  less: '^4.2.0',
  'less-loader': '^12.2.0',
  'mini-css-extract-plugin': '^2.8.0',
  path: '^0.12.7',
  sass: '^1.70.0',
  'sass-loader': '^14.1.0',
  'style-loader': '^3.3.4',
  webpack: '^5.90.1',
  'webpack-obfuscator': '^3.5.1',
  'webpack-remove-empty-scripts': '^1.0.4',

1. Minification:

   • CSS and JS files are minified.
   • HTML files are also minified.

2. Asset Copying:

   • The assets folder is copied to the remote assets folder as-is.

3. Minified Files:

   • The minified files follow the naming convention:
     • scripts.header.min.js for minified JavaScript in the header folder.
     • styles.header.min.css for minified CSS in the header folder.
     • markup.header.min.html for minified HTML in the header folder.

4. Markup Replacement:

   • The markup field serves as a placeholder for any HTML you place in the textarea.

5. Directory Structure:

   • The src folder can contain subfolders like header, footer, and orderFinale corresponding to three fields in the administration.
   • All .js, .css, and .html files in these subfolders will be minified and deployed in alphabetical order.

6. Ignored Files:

   • Any other files outside the src and assets folders are ignored during deployment.

These processes ensure that your Addon Repository builds and deploys the necessary files while optimizing them for performance.

Example of the build process. The following folder structure:

my-addon/
├── src/
│   ├── footer/
│   │   ├── script1.js
│   │   └── script2.js
│   ├── header/
│   │   ├── markup.html
│   │   └── style.css
│   └── orderFinale/
│       └── remarketing.js
└── assets/
    ├── font.ttf
    └── picture.png

will be deployed as:

my-addon/
├── src/
│   ├── footer/
│   │   ├── script1.js
│   │   └── script2.js
│   ├── header/
│   │   ├── markup.html
│   │   └── style.css
│   └── orderFinale/
│       └── remarketing.js
├── assets/
│   ├── font.ttf
│   └── picture.png
└── dist/
    ├── assets/
    │   ├── font.ttf
    │   └── picture.png
    ├── markups.header.html
    ├── scripts.footer.min.js
    ├── scripts.orderFinale.min.js
    └── styles.header.min.css