Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How feasible is it to migrate from AEM + Webpack to AEM + Vite ?

Avatar

Level 4

Hi All,

 

I'm seeking your suggestions for migrating from AEM as a Cloud Service with Webpack and React to AEM as a Cloud Service with Vite and React.

Has anyone attempted this migration? How complex is it, and what kind of challenges can we expect?

I am considering this migration primarily for performance [react pages and it's not SPA] reasons.

 

Thank you for your input.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Abhishekty ,

One approach I could suggest is to create a new AEM project in your local using Vite and then understand what deliverables are to be produced and also the source code.
You can figure out the differences between webpack and vite.
One sample vite config file would look something like below:

import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig(({ mode }) => ({
  plugins: [eslintPlugin({ failOnError: true })],
  build: {
    rollupOptions: {
      input: mode === 'development' ? 'src/main/webpack/static/index.html' : 'src/main/webpack/site/main.ts',
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: '[name].[ext]',
      },
    },
    sourcemap: 'inline',
    minify: true,
    cssMinify: true,
    outDir: 'dist/clientlib-site',
    assetsDir: '',
    cssCodeSplit: false,
  },
  publicDir: 'src/main/webpack/resources',
  server: {
    proxy: {
      '/content': {
        target: 'http://localhost:4502',
        changeOrigin: true,
        secure: false,
      },
      '/etc.clientlibs': {
        target: 'http://localhost:4502',
        changeOrigin: true,
        secure: false,
      },
    },
    open: 'src/main/webpack/static/',
  },
}));

 

Further you can remove webpack config:

@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread
css-loader
css-minimizer-webpack-plugin
cssnano
eslint-webpack-plugin
glob-import-loader
html-webpack-plugin
mini-css-extract-plugin
postcss
postcss-loader
sass-loader
source-map-loader
style-loader
terser-webpack-plugin
ts-loader
tsconfig-paths-webpack-plugin
webpack
webpack-cli
webpack-dev-server
webpack-merge



Thanks
Tarun

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @Abhishekty ,

One approach I could suggest is to create a new AEM project in your local using Vite and then understand what deliverables are to be produced and also the source code.
You can figure out the differences between webpack and vite.
One sample vite config file would look something like below:

import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig(({ mode }) => ({
  plugins: [eslintPlugin({ failOnError: true })],
  build: {
    rollupOptions: {
      input: mode === 'development' ? 'src/main/webpack/static/index.html' : 'src/main/webpack/site/main.ts',
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: '[name].[ext]',
      },
    },
    sourcemap: 'inline',
    minify: true,
    cssMinify: true,
    outDir: 'dist/clientlib-site',
    assetsDir: '',
    cssCodeSplit: false,
  },
  publicDir: 'src/main/webpack/resources',
  server: {
    proxy: {
      '/content': {
        target: 'http://localhost:4502',
        changeOrigin: true,
        secure: false,
      },
      '/etc.clientlibs': {
        target: 'http://localhost:4502',
        changeOrigin: true,
        secure: false,
      },
    },
    open: 'src/main/webpack/static/',
  },
}));

 

Further you can remove webpack config:

@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread
css-loader
css-minimizer-webpack-plugin
cssnano
eslint-webpack-plugin
glob-import-loader
html-webpack-plugin
mini-css-extract-plugin
postcss
postcss-loader
sass-loader
source-map-loader
style-loader
terser-webpack-plugin
ts-loader
tsconfig-paths-webpack-plugin
webpack
webpack-cli
webpack-dev-server
webpack-merge



Thanks
Tarun