DEV Community

ihaback
ihaback

Posted on • Updated on

Vite/Vitest Frontend Starter

Vite logo

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
Enter fullscreen mode Exit fullscreen mode

Scaffold a new project using this template

npx degit https://github.com/ihaback/vite-frontend-starter.git your-project-name
Enter fullscreen mode Exit fullscreen mode
cd your-project-name
Enter fullscreen mode Exit fullscreen mode
npm install
Enter fullscreen mode Exit fullscreen mode

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
  }
});


Enter fullscreen mode Exit fullscreen mode

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@styles": [
        "./src/styles/index.ts"
      ],
      "@features/*": [
        "./src/features/*"
      ],
      "@store": [
        "./src/store/index.ts"
      ],
      "@utils": [
        "src/utils.tsx"
      ],
    }
  },
}
Enter fullscreen mode Exit fullscreen mode

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"),
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

Install

npm install
Enter fullscreen mode Exit fullscreen mode

Develop

npm run dev
Enter fullscreen mode Exit fullscreen mode

Preview built dist folder

npm run serve
Enter fullscreen mode Exit fullscreen mode

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"
},
Enter fullscreen mode Exit fullscreen mode

Support for older browsers

npm i @vitejs/plugin-legacy -D
Enter fullscreen mode Exit fullscreen mode
// vite.config.ts
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}
Enter fullscreen mode Exit fullscreen mode

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}}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)