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

Primary LanguageTypeScriptMIT LicenseMIT

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.

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:

Optional:

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

Tools

CSS

Plugins

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)

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