Pre-configured with typescript, styling, global state handling, formatting, building & testing.
- โก๏ธ Fast dev server powered by
vite
- โก๏ธ Fast testing powered by
vitest
- ๐ Typescript ready
- ๐
Styling and theme intellisense autocompletion with
styled-components
- ๐ฆ Pre-configured global state handling with
redux-toolkit
- ๐ Discover inconsistencies and fix formatting through linting scripts with
Eslint
- ๐ Testing scripts with
React Testing Library
- ๐ก Path aliases do avoid pesky
../../
paths in your code
Clone source
git clone https://github.com/ihaback/vite-frontend-starter
Scaffold a new project using this template
npx degit https://github.com/ihaback/vite-frontend-starter.git your-project-name
cd your-project-name
npm install
Folder aliases for development, testing and building
vite.config.ts
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import path from 'path';
export default defineConfig({
plugins: [reactRefresh()],
resolve: {
alias: {
'@styles': path.resolve('./src/styles'),
'@features': path.resolve('./src/features'),
'@store': path.resolve('./src/store/index.ts'),
'@utils': path.resolve('./src/utils.tsx'),
},
},
server: {
open: 'http://localhost:3000',
port: 3000
},
preview: {
open: 'http://localhost:3000',
port: 3000
}
});
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@styles": [
"./src/styles/index.ts"
],
"@features/*": [
"./src/features/*"
],
"@store": [
"./src/store/index.ts"
],
"@utils": [
"src/utils.tsx"
],
}
},
}
vitest.config.ts
{
"resolve": {
"alias": {
"@styles": path.resolve("./src/styles"),
"@features": path.resolve("./src/features"),
"@store": path.resolve("./src/store/index.ts"),
"@utils": path.resolve("./src/utils.tsx"),
},
},
}
Install
npm install
Develop
npm run dev
Preview built dist folder
npm run serve
Scripts
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
"test": "vitest",
"test:coverage": "vitest --coverage",
"lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix && tsc --noEmit"
},
Support for older browsers
npm i @vitejs/plugin-legacy -D
// vite.config.ts
import legacy from '@vitejs/plugin-legacy'
export default {
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
})
]
}
Automatic dependabot merge if all tests pass
name: Test on PR
on: pull_request
permissions:
pull-requests: write
contents: write
jobs:
build:
runs-on: ubuntu-latest
if: ${{ github.actor == 'dependabot[bot]' }}
steps:
- uses: actions/checkout@v2
- name: Set up node
uses: actions/setup-node@v1
with:
node-version: 16.x
- name: Install packages
run: npm install
- name: Run a security audit
run: npm audit --audit-level=critical
- name: Build application
run: npm run build
- name: Test application
run: npm run test
- name: Lint application
run: npm run lint
- name: Enable auto-merge for Dependabot PRs
run: gh pr merge --auto --merge "$PR_URL"
env:
PR_URL: ${{github.event.pull_request.html_url}}
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Top comments (0)