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
    • Unix-like systems (MacOS, Linux, etc.)
    • Windows
    • Scripts
    • Vercel Deployment
    • Recommended VSCode extensions
      • VSCode settings
  • Tools and libraries
    • Libraries
    • Tools
    • CSS
    • Plugins
    • tsconfig.json
    • vite.config.ts
  • Author

Quick start

Unix-like systems (MacOS, Linux, etc.)

• 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
rm -rf LICENSE.txt README.md
git init
git add .
git commit -m "chore: getting started"

# initialize husky hooks
npm run prepare

# start development server
npm start

• Same, but without git manipulations:

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

# install dependencies
npm install

# initialize husky hooks
npm run prepare

# start development server
npm start

Windows

• In existing project directory:

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

# install dependencies
npm install

# initialize git
rmdir /s /q .git
rmdir /s /q LICENSE.txt
rmdir /s /q README.md
git init
git add .
git commit -m "chore: getting started"

# initialize husky hooks
npm run prepare

# start development server
npm start

• Same, but without git manipulations:

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

# install dependencies
npm install

# 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.

VSCode settings

settings.json:

{
	"explorer.fileNesting.enabled": true,
	"explorer.fileNesting.patterns": {
		"package.json": ".eslintignore, .eslintrc.cjs, .gitattributes, .gitignore, .lintstagedrc.json, .npmrc, .prettierignore, .prettierrc.json",
		"README.md": "LICENSE.txt"
	},
	"editor.lightbulb.enabled": "off",
	"workbench.tree.indent": 12,
	"workbench.tree.renderIndentGuides": "always",
	"svg.preview.background": "dark-transparent",
	"eslint.validate": ["typescript", "typescriptreact"],
	"typescript.tsdk": "node_modules/typescript/lib"
}

• fileNesting.enabled – enable file nesting;
• fileNesting.patterns – file nesting patterns, will ensure that files with specific names will be nested in the same directory as package.json file or README.md file, this is useful because listed files are not frequently changed ;
• editor.lightbulb.enabled – disable lightbulb (this is opinionated, but it is often more annoying than helpful);
• workbench.tree.indent – indentation for file tree;
• workbench.tree.renderIndentGuides – render indent guides for file tree;
• svg.preview.background – background color for SVG preview;
• eslint.validate – enable ESLint extension validation for TypeScript and TypeScript React files;
• typescript.tsdk – path to TypeScript compiler.

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;
• ts-reset – reset some of TypeScript compiler options.

Tools

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

CSS

• reset.css – with custom styles, and styles from https://meyerweb.com/ and https://github.com/elad2412/the-new-css-reset configs;
• normalize.css – normalize styles;
• variables.css – for css variables;
• main.css – for global styles.

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)