React TypeScript Template

A versatile React + TypeScript template that supports both traditional React applications and Web Components. Pre-configured with modern tooling and libraries for rapid development.

🎯 Usage short desc

This template can be used in two modes:

• Normal React App
• Web Components

If this is a normal application, then

• Make sure IS_WEB_COMPONENT in config.ts is false
• We can delete the entire folder web_components_entry
• Remove custom tag in index.html
• In main.tsx we can just keep the else part which contains createRoot(document.getElementById('my-ele-root')!)

Although for normal application the above steps were not nessasary, since IS_WEB_COMPONENT in config.ts is false, so that wont import register_web_component.ts which inturns wont invoke other two files initialize_component.ts & web_component_wrapper.tsx, so these files related to web components won't be in the final build

If this is a web component application, then

• Make sure IS_WEB_COMPONENT in config.ts is true
• Can change the webcomponent name in register_web_component.ts
• Can change the final build webcomponent name in vite.config.ts
• Can have the mock JS API, caller events in wc_mock.js
• And in main.tsx we have imported wc_mock.js only when IS_WEB_COMPONENT is true & If it is a dev mode
• so wc_mock.json wont be part in the prod build
• can use wc_check.html for testing purpose

Configuration has been made in vite.config.ts, by consuming IS_WEB_COMPONENT in config, So npm run build command will work for both webcomponent & normal application, Hence with a single boolean change we can toggle the application between webcomponents & normal application But there are few cons, such as routing wont work in webcomponents, and we need to get input for web components where as in normal app we dont need it

🚀 Features

• ⚛️ React 18 with TypeScript
• 🎨 Tailwind CSS for styling
• 🔄 Redux Toolkit for state management
• 🧩 Web Components support
• ⚡ Vite for blazing fast development
• 📱 React Router (Hash Router) for routing

📦 What's Included

• React 18 with TypeScript
• Tailwind CSS (pre-configured)
• Redux Toolkit with store setup
• React Router DOM (HashRouter)
• Web Components infrastructure
• ESLint configuration
• Vite build tooling

🎯 Usage detailed desc

This template can be used in two modes:

• Normal React App
• Web Components

1️⃣ Normal React Application Mode (Default)

Use this mode for building standard React applications.

Setup Steps:

1. Configure the mode in config.ts:

   const IS_WEB_COMPONENT = false  // Set to false

2. Start development server:

   npm run dev

3. Build for production:

   npm run build

4. Project structure:

   • Your app renders in <div id="my-ele-root"></div>
   • Full access to React Router, Redux, and all features
   • Standard React development workflow

What you get:

• Complete React application with routing
• Redux store for state management
• Tailwind CSS for styling
• Hot module replacement in development

---

2️⃣ Web Component Mode

Use this mode for building reusable web components that can be embedded in any application.

Setup Steps:

1. Configure the mode in config:

   const IS_WEB_COMPONENT = true  // Set to true

2. Implement your web component in src/web_components_entry/register_web_component.tsx: Modify your custom tag

     customElements.define('custom-tag', MyCustomElement);

3. Create a development mock (optional) in src/web_components_entry/wc_mock.js:

   // This file only loads in development mode
   // Use it to test your web component
   console.log('Testing web component in dev mode');

What you get:

• Reusable web component built with React
• Can be imported and used in any web application
• Development mock for testing (dev only)
• Clean production build without dev dependencies