DEV Community

Cover image for Bundling many frontends with a single rspack config
Sibelius Seraphini for Woovi

Posted on

2

Bundling many frontends with a single rspack config

Introduction

Woovi provides instant payment solutions for merchants.
To make this possible we are building a lot of products to meet their requirements.
Right now, Woovi has 7 different frontends:

  • woovi - the dashboard for merchants
  • shopper - the dashboard for shoppers
  • register - responsible for auto onboarding of new merchants
  • login - responsible for handling login workflow
  • link - it is our SSR payment link
  • console - our console/back office to let us operate

We use rspack a successor of webpack with a compatible API, but much faster.

DX for localhost

Woovi developers usually work on 3 of these frontends: woovi, login, and console.
They would need to start 3 different terminals and run 3 different commands to be started.
We combined these 3 commands in a single command that will run all these 3 rspack processes.
The processes would consume a lot of CPU and memory.

Running many frontends in a single rspack config

To solve these problems and simplify our workflow.
We improved the config to run these 3 frontends at the same time using the same rspack, reducing CPU and memory usage.
Here is the final config:

module.exports = {
  entry: {
    main: './src/index.tsx',
    login: '../login/src/index.tsx',
    console: '../console/src/index.tsx',
  },
  devServer: {
    historyApiFallback: {
      disableDotRule: true,
      rewrites: [
        { from: /^\/home\/.*$/, to: '/home/index.html' },
        { from: /^\/login\/.*$/, to: '/login/index.html' },
        { from: /^\/console\/.*$/, to: '/console/index.html' },
      ],
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'home',
      template: './src/index.html',
      filename: 'home/index.html',
      chunks: ['main'],
    }),
    new HtmlWebpackPlugin({
      title: 'login',
      template: '../login/src/index.html',
      filename: 'login/index.html',
      chunks: ['login'],
    }),
    new HtmlWebpackPlugin({
      title: 'console',
      template: '../console/src/index.html',
      filename: 'console/index.html',
      chunks: ['console'],
    }),
  ],
}
Enter fullscreen mode Exit fullscreen mode

The entry field defines entry points for rspack.
For each entrypoint it will generate one or more chunks based on code splitting.
devServer.historyApiFallback.rewrites will teach devServer to redirect any request to the correct index.html as our app is a SPA without a server
We also need one HtmlWebpackPlugin for each frontend, each generated HTML has only its specific chunk

We could generalize this config to accept N frontends if needed.

To conclude

As your product and codebase grows you need to rethink your approaches to keep productivity high.
Webpack/Rspack are a very versatile tool that can scale as you grow.


Woovi
Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are hiring!


Image By freepik

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay