How feasible is it to migrate from AEM + Webpack to AEM + Vite ? | Community
Skip to main content
Abhishekty
Abhishekty
Level 4
March 26, 2024
Solved

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

  • March 26, 2024
  • 1 reply
  • 1260 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by TarunKumar

    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

    1 reply

    TarunKumar
    Community Advisor
    TarunKumarCommunity AdvisorAccepted solution
    Community Advisor
    March 27, 2024

    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

      Terms & ConditionsAccessibility statement

      Loading footer...