kr4chinin advanced Vite React SPA template ⚛️

Pre-configured template for React SPA apps with the most popular libraries and tools. Perfect option to bootstrap your next project.

kr4chinin advanced Vite React SPA template ⚛️

Quick start

In existing project directory:

# clone repo
git clone https://github.com/kr4chinin/kr4chinin-advanced-vite-react-spa-template .

# install dependencies
npm install

# initialize git
rm -rf .git
git init
git add .
git commit -m "chore: getting started"

# initialize husky hooks
npm run prepare

# start development server
npm start

Do not forget to change author and other specific information in package.json, remove LICENSE.txt and README.md files and add your own before publishing your app.

If you're not using VSCode IDE you also need to delete .vscode directory.

Scripts

Scripts featured in package.json file:

npm start - start development server;
npm run ts - run TypeScript compiler;
npm run build - build production version;
npm run lint:ts - run TypeScript linter;
npm run format - run Prettier formatter;
npm run preview - start preview server;
npm run prepare - initialize Husky hooks;

Vercel Deployment

When deploying to the Vercel platform note that default build dir there is dist and in this template it is configured to be named build. So you will most likely need to change "Output directory" in Vercel settings to build.

More information here.

Recommended VSCode extensions

Essential:

ESLint – eslint support;
Prettier – prettier support;
GitLens - to make work with git more comfortable;
CSpell - to make less spelling mistakes;
Error Lens - show errors near problematic lines;
Pretty TypeScript Errors - to make TypeScript errors readable;
Path Intellisense - file path autocompletion;
vscode-styled-components - styled-components syntax highlighting, autocompletion.

Optional:

Auto Rename Tag - to make work with HTML tags more comfortable;
SVG – SVG preview, minification;
indent-rainbow - to make indentation more visually noticeable;
vscode-icons - prettier icons;
htmltagwrap - easier work with HTML tags wrapping.

Tools and libraries

Libraries

React – UI framework;
TypeScript – static type checker;
Vite – build tool;
styled-components – CSS-in-JS library;
@tanstack/react-query – data fetching library;
react-router-dom – routing library;
axios – HTTP client;
react-error-boundary – error boundary component, handle runtime errors in a safe way;

Tools

ESLint – linter;
Prettier – code formatter;
Husky – git hooks manager;
lint-staged – linter for staged files;
Babel – transpiler.

Plugins

prettier-plugin-organize-imports – automatically organize imports;
@stylistic/eslint-plugin – eslint plugin for stylistic rules (padding, indentation, etc.);
@babel/plugin-transform-typescript – transpile TypeScript to JavaScript;
@babel/plugin-transform-class-properties – transpile class properties to JavaScript;
@vitejs/plugin-react - React plugin for Vite;
@tanstack/eslint-plugin-query – eslint plugin for @tanstack/react-query;
eslint-plugin-react-hooks – eslint plugin for React hooks;
eslint-plugin-regexp – eslint plugin for regular expressions;
vite-plugin-eslint – eslint plugin for Vite;
vite-plugin-svgr – SVGR plugin for Vite, import SVGs as React components.

tsconfig.json

tsconfig.json is a configuration file for TypeScript compiler. Pre-configured with strict rules, useful options and paths aliases.

{
  "compilerOptions": {
    /* Base options */
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "target": "ESNext",
    "verbatimModuleSyntax": false,
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "useDefineForClassFields": true,

    /* Strictness */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "strictPropertyInitialization": false,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,

    /* TypeScript transpilation */
    "noEmit": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "module": "esnext",

    /* Code runs in DOM */
    "lib": ["dom", "dom.iterable", "esnext"],

    /* Types */
    "types": ["vite/client"],

    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts

vite.config.ts is a configuration file for Vite build tool. Pre-configured with useful build options and plugins.

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

// @ts-ignore
// Waiting for the patch to resolve type issue
// https://github.com/gxmari007/vite-plugin-eslint/issues/79
import eslint from 'vite-plugin-eslint';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        presets: ['@babel/preset-typescript'],
        plugins: [
          '@babel/plugin-transform-typescript',
          '@babel/plugin-transform-class-properties',
          [
            // For styled components transform to readable classnames
            // https://github.com/styled-components/babel-plugin-styled-components
            'babel-plugin-styled-components',
            {
              ssr: false,
              pure: true,
              fileName: true,
              displayName: true,
            },
          ],
        ],
      },
    }),
    // https://github.com/gxmari007/vite-plugin-eslint
    eslint({
      exclude: ['/virtual:/**', 'node_modules/**'],
    }),
    // https://github.com/pd4d10/vite-plugin-svgr#readme
    // Imports should look like this – "import ReactLogo from './assets/react.svg?react';""
    svgr(),
  ],
  // Will run on http://localhost:3000
  server: {
    port: 3000,
    host: '0.0.0.0',
  },

  build: {
    // Enable minification of the output files
    minify: true,

    // Directory to output the built files
    outDir: 'build',

    // Generate source maps for debugging purposes
    sourcemap: true,

    // Enable CSS code splitting, which creates separate CSS files instead of inline styles
    cssCodeSplit: true,

    // Directory for placing built assets (like images, fonts, etc.)
    assetsDir: 'assets',

    // Rollup options for more granular control over the build process
    rollupOptions: {
      output: {
        // Naming convention for chunk files
        chunkFileNames: 'assets/[name].[hash].js',

        // Naming convention for entry files
        entryFileNames: 'assets/[name].[hash].js',

        // Naming convention for asset files (like images, fonts, etc.)
        assetFileNames: 'assets/[name].[hash][extname]',
      },
    },
  },
});

Author

Ilya Kruchinin (https://github.com/kr4chinin)

johnberkley12/fork