Vite Minimal React TypeScript SCSS Template

A minimal and lightweight starter template for React with TypeScript and SCSS using Vite. This template provides a clean setup without unnecessary boilerplate, so you can start your project quickly.

🚀 Features

• ⚡ Fast development with Vite
• 🛠️ Type safety with TypeScript
• ⚛️ React with modern JSX
• ✅ ESLint for code quality
• 🎨 SCSS support with sass-embedded
• 🖼️ SVG import support using vite-plugin-svgr
• 🔥 Aliases (@/ → /src) for cleaner imports
• 🌍 Default development server runs on localhost:3000

📦 Installation

First, clone this repository:

git clone https://github.com/miftawidaya/vite-minimal-react-ts-scss

Then, install the dependencies:

npm install

🔧 Usage

Start the development server:

npm run dev

Build for production:

npm run build

Preview the production build:

npm run preview

Run ESLint to check code quality:

npm run lint

Clean and reinstall dependencies:

npm run clean  # Removes node_modules & dist, then reinstalls dependencies

🔄 Dependency Management

Check for outdated dependencies:

npm outdated

Update dependencies to the latest compatible versions:

npm update

Upgrade all dependencies to their latest versions (including breaking changes):

npx npm-check-updates -u
npm install

⚙️ Configuration

🔌 Vite Plugins

• @vitejs/plugin-react: Enables React fast refresh and optimizations.
• vite-plugin-svgr: Allows importing .svg files as React components.

Using SVGR to Import SVG as React Components

With vite-plugin-svgr, you can import .svg files like this:

import LogoIcon from '@/assets/logo.svg';

function App() {
  return <LogoIcon width={12} height={12} />;
}
export default App;

🏷️ Aliases

Use @/ instead of long relative paths, e.g.:

import Component from '@/components/Component';

Defined in vite.config.ts:

resolve: {
  alias: {
    '@': '/src',
  },
},

🎨 SCSS Support

Global SCSS variables and mixins are available from @/scss/_shared.scss.
You can use them directly in .scss files.

🌍 Development Server

The dev server runs on http://localhost:3000 by default.
You can change the port in vite.config.ts:

server: {
  port: 3000,
},

🛠️ ESLint Configuration

This project includes a fully configured ESLint setup with the following features:

Plugins:

• react: Linting rules for React.
• react-hooks: Ensures proper usage of React Hooks.
• react-refresh: Supports React Fast Refresh.
• import: Validates module imports.

Key Rules:

• ✅ react/react-in-jsx-scope is disabled (not needed with Vite).
• ✅ react-refresh/only-export-components warns when exporting non-component values.
• ✅ import/no-unresolved ensures all imports exist.
• ✅ react/prop-types is disabled since TypeScript handles prop validation.

🔍 Expanding ESLint Configuration (Optional)

For larger projects, enable type-aware linting:

1. Update eslint.config.ts:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

2. Use stricter linting:

   • Replace tseslint.configs.recommended with tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked.
   • Optionally add ...tseslint.configs.stylisticTypeChecked.

3. Install & configure eslint-plugin-react:

npm install eslint-plugin-react --save-dev

Update eslint.config.ts:

// eslint.config.js
import react from 'eslint-plugin-react';

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
});