Introduction
In the fast-paced world of web development, efficiency is key. Building web applications often involves creating reusable UI components to maintain consistency and save development time. In this guide, we’ll explore the process of leveraging common components in React TypeScript projects with Liferay, a robust platform for web application development.
We’ll be building two modules, each serving a specific purpose.
- common_module_web
- subject_web
Let’s create the modules following the steps outlined in the provided reference link:
Setting Up the Foundation: common_module_web:
- Install React Vite.
npm install vite
- Install @vitejs/plugin-react
npm install @vitejs/plugin-react
- Create a ‘vite.config.ts’ file.
![Vite Configuration | Leveraging Common Components in React TypeScript Projects with Liferay Vite Configuration](https://www.ignek.com/wp-content/uploads/2024/02/Vite-Configuration.webp)
- Write down the following code in the ‘vite.config.ts’ file for building the ‘dist’ folder configuration.
// vite.config.ts
import { UserConfigExport, defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "node:path";
import { name } from "./package.json";
const App = async (): Promise => {
return defineConfig({
server: {
port: 8080, // Your localhost port number
host: "localhost",
},
plugins: [react()],
publicDir: false,
build: {
lib: {
entry: path.resolve(__dirname, "src/lib/index.ts"),
name,
formats: ["es", "umd"],
fileName: (format) => `${name}.${format}.js`,
},
rollupOptions: {
external: [
"react",
"react-dom",
"@mui/material",
"@mui/x-data-grid-pro",
],
output: {
globals: {
react: "React",
"react-dom": "ReactDOM",
"@mui/material": "@mui/material",
"@mui/x-data-grid-pro": "@mui/x-data-grid-pro",
},
},
},
},
});
};
export default App;
- Create a tsconfig.node.json file in your root folder
![Node.js TypeScript Configuration | Leveraging Common Components in React TypeScript Projects with Liferay Node.js TypeScript Configuration](https://www.ignek.com/wp-content/uploads/2024/02/Node.js-TypeScript-Configuration.webp)
- Write down the following code in the ‘tsconfig.node.json’ file
// tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts", "package.json"]
}
- Generate the dist build folder:
npx vite build
![Building the dist Folder | Leveraging Common Components in React TypeScript Projects with Liferay Building the dist Folder](https://www.ignek.com/wp-content/uploads/2024/02/Building-the-dist-Folder.webp)
- Update ‘package.json’ to include the dist folder configuration:
// package.json
"files": [
"/dist"
],
"main": "./dist/common_module_web.umd.js",
"module": "./dist/common_module_web.es.js",
"exports": {
".": {
"import": "./dist/common_module_web.es.js",
"require": "./dist/common_module_web.umd.js"
}
},
![Configuring package.json for dist Folder | Leveraging Common Components in React TypeScript Projects with Liferay Configuring package.json for dist Folder](https://www.ignek.com/wp-content/uploads/2024/02/Configuring-package.json-for-dist-Folder-1024x611.webp)
- Create a folder lib and components like the below image, and create the HelloWorld.tsx file in the Components folder.
![Setting Up Components in lib Folder | Leveraging Common Components in React TypeScript Projects with Liferay Setting Up Components in lib Folder](https://www.ignek.com/wp-content/uploads/2024/02/Setting-Up-Components-in-lib-Folder-1024x569.webp)
- Export the HelloWorld.tsx file in an index.ts file like the below image.
![Exporting Components in index.ts | Leveraging Common Components in React TypeScript Projects with Liferay Exporting Components in index.ts](https://www.ignek.com/wp-content/uploads/2024/02/Exporting-Components-in-index.ts_-1024x326.webp)
- By running the below command, the dist folder will update.
npx vite build
- Create a git repository for your common_module_web.
![Common Module Web Git Repository | Leveraging Common Components in React TypeScript Projects with Liferay Common Module Web Git Repository](https://www.ignek.com/wp-content/uploads/2024/02/Common-Module-Web-Git-Repository.webp)
- Now commit your code.
![Initial Commit Project Setup | Leveraging Common Components in React TypeScript Projects with Liferay Initial Commit Project Setup](https://www.ignek.com/wp-content/uploads/2024/02/Initial-Commit-Project-Setup.webp)
- Add a repository link. Write down the below code package.json file:
// package.json
"repository": {
"type": "git",
"url": "https://github.com/rajdip112/vite-module.git"
},
![Configuring Repository Link in package.json | Leveraging Common Components in React TypeScript Projects with Liferay Configuring Repository Link in package.json](https://www.ignek.com/wp-content/uploads/2024/02/Configuring-Repository-Link-in-package.json_.webp)
Setting Up the Foundation: subject_web:
- In package.json file, add git link for common_module_web.
"common_module_web": "git+https://github.com/rajdip112/common-module.git",
![Adding Git Link for common module web | Leveraging Common Components in React TypeScript Projects with Liferay Adding Git Link for common_module_web](https://www.ignek.com/wp-content/uploads/2024/02/Adding-Git-Link-for-common_module_web-1024x376.webp)
- Install common_module_web in subject_web.
npm install common_module_web
- Declare common_module_web in react-app-env.d.ts file.
declare module 'common_module_web'
![Declaring common module web | Leveraging Common Components in React TypeScript Projects with Liferay Declaring common_module_web](https://www.ignek.com/wp-content/uploads/2024/02/Declaring-common_module_web-1024x645.webp)
- Use the ‘HelloWorld’ component from ‘common_module_web’ in the below way:
![Utilizing HelloWorld Component from common module web | Leveraging Common Components in React TypeScript Projects with Liferay Utilizing HelloWorld Component from common_module_web](https://www.ignek.com/wp-content/uploads/2024/02/Utilizing-HelloWorld-Component-from-common_module_web-1024x508.webp)
- Deploy subject_web module.
npm run deploy
- Drag and Drop the subject_web module.
![Implementing Drag and Drop for subject web Module | Leveraging Common Components in React TypeScript Projects with Liferay Implementing Drag and Drop for subject_web Module](https://www.ignek.com/wp-content/uploads/2024/02/Implementing-Drag-and-Drop-for-subject_web-Module.webp)
Note : Whenever a change is made in the common_module_web module, follow the below steps:
- In common_module_web module’s terminal.
1. npx vite build
2. Commit the code to the respective repository.
- In subject_web module’s terminal.
1. npm update common_module_web
2. npm run deploy
Discover the power of ReactJS Application Architecture. Streamline development with scalable, efficient structures. Master component-based design and state management for robust, flexible apps. Elevate your coding game with ReactJS architecture! Check out our “Hire Us” services to get started.