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 Explore 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.
- 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<UserConfigExport> => {
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
- 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
- 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"
}
},
- Create a folder lib and components like the below image, and create the HelloWorld.tsx file in the Components folder.
- Export the HelloWorld.tsx file in an index.ts file like the below image.
- By running the below command, the dist folder will update.
npx vite build
- Create a git repository for your common_module_web.
- Now commit your code.
- 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"
},
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",
- 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'
- Use the ‘HelloWorld’ component from ‘common_module_web’ in the below way:
- Deploy subject_web module.
npm run deploy
- Drag and Drop the subject_web module.
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
