Frontend Boilerplate with Rspack, Lit.js, Babel, TypeScript, and TailwindCSS

This is a frontend boilerplate project set up using Rspack, Lit.js, TypeScript, TailwindCSS, Preact Signals, and Babel, designed to help you quickly start your development process while maintaining modern build optimizations.

Table of Contents

• Features
• Getting Started
  • Prerequisites
• Scripts
• Project Structure
• Development
• Production Build
• License

Features

• Modern JavaScript and TypeScript support with Babel
• Reactive state management using Preact Signals
• Hot Module Replacement (HMR) for efficient development
• CSS processing with TailwindCSS and PostCSS
• Optimized asset handling using Rspack
• Compression of assets for production
• Source maps for easier debugging in development

Getting Started

To get started with this boilerplate, clone the repository and install the dependencies:

git clone <repository-url>
cd <repository-name>
npm install

Prerequisites

Make sure you have Node.js installed on your machine.

Scripts

This project comes with several scripts to help you with your development and build processes:

• Clean the build directory:

  npm run clean

• Build for production:

  npm run build

• Start the development server:

  npm run start

Project Structure

<repository-name>
├── dist/                   # Compiled and built files
├── src/                    # Source files
│   ├── app.ts              # Main entry point
│   └── index.html          # HTML template
├── package.json            # Project configuration
└── rspack.config.js        # Rspack configuration

Development

To start a development server with Hot Module Replacement, run:

npm run start

The development server will be available at http://localhost:9000, and changes to your files will automatically reflect in the browser.

Production Build

To create a production build with optimizations, run:

npm run build

This will generate optimized files in the dist directory, ready for deployment.

License

This project is licensed under the MIT License. See the LICENSE file for details.