Module bundler

Supported features

Hot reloading

We support hot reloading in development mode with the Hot Module Replacement plugin and the React Fast-Refresh plugin.

With these plugins, the application is reloaded when any change in your code occurs.

Import images

We support importing image files with the following file extensions: .svg, .png.

SVG

import ImageSvg from './image.svg';

const Component = () => <img alt="An image" src={ImageSvg} />;

Furthermore, we also support importing SVG files as React components. To do this, rename your SVG files with the extension .react.svg.

import Image from './image.react.svg';

const Component = () => <Image title="An image" />;

PNG

import ImagePng from './image.png';

const Component = () => <img alt="An image" src={ImagePng} />;

Import styles

We support importing CSS files with the following file extensions: .css, .module.css.

Global styles

Global styles can be imported into any application file as follows:

import './style.css';

CSS Modules

We recommend that you define styles using CSS Modules. This allows styles to be locally scoped to each module with a unique class name, thereby avoiding naming collisions.

import * as styles from './style.module.css';

const Component = () => <div className={styles.container}></div>;

.container {
  width: 100%;
}

CSS Pre-processors

We use PostCSS to support CSS transformations and future-standards-compliant CSS.

By default, we support the following PostCSS plugins:

• autoprefixer: plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
• postcss-custom-media: plugin to enable Custom Media Queries in CSS, following the CSS Media Queries specification.
• postcss-custom-properties: plugin to enable Custom Properties in CSS, following the CSS Custom Properties specification.
• postcss-import: plugin to transform @import rules by inlining content.

JavaScript

We support importing JavaScript-related files with the following file extensions: .js, .mjs, .cjs, .jsx, .ts, .tsx.

All these files are processed with Babel with our custom preset @commercetools-frontend/babel-preset-mc-app.

GraphQL

We support importing GraphQL files with the file extension: .graphql.

See Using GraphQL documents.

Custom Webpack config

At times your application might require some extra functionality. For example, loading a particular file extension, using a specific Webpack plugin, or including other source files in your repository.

To extend the functionalities of Webpack, you can define specific files in the root of your customization project for both development and production.

Development

For development mode, create a webpack.config.dev.{js,cjs} file and use the function createWebpackConfigForDevelopment to create and enhance the Webpack configuration.

The customization CLI will then use the configuration exported from this file instead of the default one.

const {
  createWebpackConfigForDevelopment,
} = require('@commercetools-frontend/mc-scripts/webpack');

// Create the default config
const config = createWebpackConfigForDevelopment();

// Customize the config
config.module.rules = config.module.rules.concat({
  test: /\.scss$/,
  use: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    require.resolve('sass-loader'),
  ],
});

// Export the config
module.exports = config;

Production

For production mode, create a webpack.config.prod.{js,cjs} file and use the function createWebpackConfigForProduction to create and enhance the Webpack configuration.

The customization CLI will then use the configuration exported from this file instead of the default one.

const {
  createWebpackConfigForProduction,
} = require('@commercetools-frontend/mc-scripts/webpack');

// Create the default config
const config = createWebpackConfigForProduction();

// Customize the config
config.module.rules = config.module.rules.concat({
  test: /\.scss$/,
  use: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    require.resolve('sass-loader'),
  ],
});

// Export the config
module.exports = config;

Options

Use custom source folders

You can provide a list of folders path to be included when Webpack scans your project for source files by making use of the sourceFolders option.

const path = require('path');

const sourceFolders = [
  path.resolve(__dirname, 'src'),
  path.resolve(__dirname, '../shared'),
];

const config = createWebpackConfigForDevelopment({ sourceFolders });

module.exports = config;