React - Creating Application Using Rollup Bundler

Quiz

Rollup is one of the small and fast JavaScript bundlers. Let us learn how to use rollup bundler in this chapter.

Following are the steps to creating an application using Rollup bundler −

Step 1 − Open a terminal and go to your workspace.

cd /go/to/your/workspace

Step 2 − Next, create a folder, expense-manager-rollup and move to newly created folder. Also, open the folder in your favorite editor or IDE.

mkdir expense-manager-rollup 
cd expense-manager-rollup

Then, create and initialize the project.

npm init -y
Wrote to D:\Projects\expense-manager-rollup\package.json:

{
  "name": "expense-manager-rollup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

Step 3 − To install React libraries (react and react-dom), follow the command below.

npm install react react-dom --save

added 3 packages, and audited 4 packages in 2s

Then install babel and its preset libraries as development dependency using the following commands.

npm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-properties -D
added 140 packages, and audited 144 packages in 4s

Next, install rollup and its plugin libraries as development dependency.

npm i -D rollup postcss @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-livereload rollup-plugin-postcss rollup-plugin-serve postcss postcss-modules rollup-plugin-postcss
added 164 packages, and audited 308 packages in 8s

Next, install corejs and regenerator runtime for async programming.

npm i regenerator-runtime core-js
added 2 packages, and audited 310 packages in 3s

Step 4 − Later, create a babel configuration file, .babelrc under the root folder to configure the babel compiler.

{
   "presets": [
      [
         "@babel/preset-env",
         {
            "useBuiltIns": "usage",
            "corejs": 3,
            "targets": "> 0.25%, not dead"
         }
      ],
      "@babel/preset-react"
   ],
   "plugins": [
      "@babel/plugin-proposal-class-properties"
   ]
}

rollup.config.mjs:

Next, create a rollup.config.mjs file in the root folder to configure the rollup bundler.

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss'

export default {
   input: 'src/index.js',
   output: {
      file: 'public/index.js',
      format: 'iife',
   },
   plugins: [
      commonjs({
         include: [
            'node_modules/**',
         ],
         exclude: [
            'node_modules/process-es6/**',
         ],
      }),
      resolve(),
      babel({
         exclude: 'node_modules/**'
      }),
      replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      postcss({
         autoModules: true
      }),
      livereload('public'),
      serve({
         contentBase: 'public',
         port: 3000,
         open: true,
      }), // index.html should be in root of project
   ]
}

package.json

Next, update the package.json and include our entry point (public/index.js and public/styles.css) and command to build and run the application.

...
"main": "public/index.js",
"style": "public/styles.css",
"files": [
   "public"
],
"scripts": {
   "start": "rollup -c -w",
   "build": "rollup"
},
...

Step 5 − Next, create a src folder in the root directory of the application, which will hold all the source code of the application.

Next, create a folder, components under src to include our React components. The idea is to create two files, <component>.js to write the component logic and <component.css> to include the component specific styles.

The final structure of the application will be as follows −

|-- package-lock.json
|-- package.json
|-- rollup.config.js
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

Now, let us create a new component, HelloWorld to confirm our setup is working fine.

HelloWorld.js

Create a file, HelloWorld.js under components folder and write a simple component to emit Hello World message.

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

index.js

Next, create our main file, index.js under src folder and call our newly created component.

import React from 'react';
import { createRoot } from 'react-dom/client';
import HelloWorld from './components/HelloWorld';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(<HelloWorld />);

Create a public folder in the root directory.

index.html

Next, create a html file, index.html (under public folder*), which will be our entry point of the application.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager :: Rollup version</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="./index.js"></script>
   </body>
</html>

Lastly, build and run the application.

npm start

The npm build command will execute the rollup and bundle our application into a single file, dist/index.js file and start serving the application. The dev command will recompile the code whenever the source code is changed and also reload the changes in the browser.

rollup v4.52.5
bundles src/index.js → public/index.js...
created public/index.js in 1.4s

[2025-11-07 12:50:21] waiting for changes...

Open the browser and enter http://localhost:3000 in the address bar and press enter. serve application will serve our webpage as shown below.

Print Page