Integrate React and webpack

Owned by Gaurav
Last updated: Aug 07, 2024
5 min read

Overview:  

This document provides a comprehensive guide for developers to configure Webpack for bundling CSS and JavaScript files, integrate React Js into the system. It includes step-by-step instructions, code snippets, and explanations to facilitate smooth implementation. 

 

New Features Added: 

  1. Webpack: A module bundler for JavaScript applications. It is used to bundle CSS and JavaScript files efficiently. 

  2. React Js: A JavaScript library for building user interfaces, widely used for its component-based architecture. 

 

Configuring Webpack in Our System:

 

Step 1: Installing Node.js 

Node.js is required to create static content package on demand. Follow these steps to install Node.js: 

  • Download and install Node.js from the official website. 

  • Once installed, verify the installation by running node -v and npm -v commands in the terminal (Discuss in step 3) to ensure Node.js and npm (Node Package Manager) are installed correctly. 

  • Navigate to your main project directory (e.g., ViennaAdvantage). 

 

Step 2: Setting Up Files 

Place the following files in your main project (e.g., ViennaAdvantage) directory: 

  • webpack.config.js: Configuration file for Webpack. 

  • package.json: File containing metadata and dependencies for the project. 

  • babel.config.json: Configuration file for Babel, a JavaScript compiler. In this file replace name with module name and version with package version. Shown in below image 

 

  1. image-20240805-094116.png

  2. File structure image. 

 

  1. image-20240805-094152.png

 

Step 3: Opening Terminal in Visual Studio 

  1. Visual Studio provides multiple methods to open the terminal: 

  2. Menu Option: Select View > Terminal to open the terminal as a tab. 

  3. Keyboard Shortcut: Use Ctrl + ` to quickly launch the terminal. 

  4. Context Menu: Right-click on a folder in the Solution Explorer and select Open in Terminal to open the terminal at a specific file path.

 

Step 4: Installing Dependencies 

Run the following command in the terminal to install the required dependencies specified in the package.json file: 

npm install 

 

Step 5: Configuring Bundling for JavaScript and CSS 

  1. Create a folder named src inside the Script folder. 

  2. Inside the src folder, create separate JavaScript file for bundling. 

  3. In the JavaScript file (e.g., VISjs.js), import all script files using the ‘import’ statement. 

  1. Create a folder name src inside the Content folder 

  2. Inside the src folder, create separate css file for bundling. 

  3.  In the CSS file (e.g. css-style.css), import all CSS files using the ‘@import’ directive. 

7.Create a folder name dist inside the Script folder. This folder contains the all js minify files. 

 

Step 6: Configuring webpack.config.js 

  1. Open the webpack.config.js file. 

  2. Update the following sections according to your project requirements: 

    1. Version: Define the versions of different components.(e.g 1.2.3.0) four digit. 

    2. Mode: This option in webpack configures the environment for bundling, optimizing for either development or production. 

  3. Entry Point: Specify the entry points for the webpack bundler. 

  4. Delete Previous Version css Files: Modify regular expression patterns to match the filenames of the files you want to delete. 

Note: Naming convention of static file should be same as we are using earlier to create module 

 

Step 7: Changes in Area Registration 

  1.  In the Arearegistration.cs file, uncomment the minify files permanently. 

  2. add ‘dist’ after the Scripts as shown in below image. 

  3. In the last add {version} as shown in below image 

Step 8: Building Files 

Run the following command in the terminal: npm run Build. This will generate bundled files in the Script and Content folders. 

 

Step 9:  Change in Post-buid 

  1. In Solution Explorer, Select the ViennaAdvantage project 

  2. Press ALT+ENTER 

  3. Select Build Event 

  4. Add below code in post-build events command Line on the top as shown in image 

rmdir /s /q "$(SolutionDir)\ViennaAdvantageWeb\Areas\$(TargetName)" 

 

If you prefer not to use the terminal for bundling JS and CSS files, you can write the command npm run build in Pre-build events command line as show below: 

 

Configuring React.Js in Our System:

 

Step 1: Create React Folder 

  1. Navigate to the Script folder in your system. 

  2. Create a new folder named react. 

Step 2: Create Index.jsx File 

  1. Inside the react folder, create a file named index.jsx. 

  2. Add the following code to index.jsx: 

Note: In above code Replace ViennaAdvantage with module prefix.

 

Step 3:  Create pages Folder 

  1. Inside the react folder, create a new folder named pages. 

  2. This folder contains the main page which you list in AD.

 

Step 4: Create Component Folder 

  1. Inside the react folder, create a new folder named component. 

  2. This folder will contain all React components. 

  3. You can use these component in React pages. 

 

Step 5: Implement React page 

  • Create your React page inside the pages folder. 

  • For example, if you create a pages named TestComponent.jsx, shown as below.

 

Step 6: Define react pages Class Name 

  1. Ensure you are logged in as a Super user. 

  2. Open the Page (Form) window from the menu. 

  3. Fill in the mandatory fields. 

  4. Add the class name with the following format: <prefix>.React.<component>. 

  5. For example, if you created a component named TestComponent.jsx, the class name will be VIS.React.TestComponent.