gabrielcrackpro/react-vite-ts-starter

Start your next React TS project easily

React + Vite + TS Template

Start your next project easily

Features

Import aliases support

Default aliases:

• @ -> src/
• @components -> src/components - Custom components
• @assets -> src/assets - App assests
• @routes -> src/routes - App routes

Packages

The following packages / files are included

• Vite
• TypeScript
• EsLint
• typescript-eslint
• react-router v6
• A preconfigured .eslintrc file

Install

Clone this repository

npx degit GabrielCrackPro/react-vite-ts-starter <app_name>

Run this command in the root directory

• Install with npm

mpm install

• Install with yarn

yarn

Available commands

• Start your project: yarn dev or npm run dev
• Show all eslint problems yarn lint or npm run lint

For other commands see the package.json file

Add more import aliases

1. Go to the tsconfig.json file and add this

"paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@assets/*": ["./src/assets/*"],
      "@routes/*": ["./src/routes/*"],
      // "@example/*": ["./src/example/*"] Alias example
    }

2. Go to the vite.config.ts file and add this

plugins: [
react(),
alias({
  entries: [
    { find: "@", replacement: path.resolve(__dirname, "src") },
    { find: "@assets", replacement: path.resolve(__dirname, "src/assets") },
    { find: "@components", replacement: path.resolve(__dirname, "src/components") },
    { find: "@routes", replacement: path.resolve(__dirname, "src/routes") },
    /*
    Alias example:
    { find: "@example", replacement: path.resolve(__dirname, "src/example") },
    */
  ],
});
]

If the components folder or the interfaces folder are not empty remove the .gitkeep file