feat: vite boilerplate v1

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+	"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": []
+}

.eslintrc.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+	root: true,
+	env: { browser: true, es2020: true },
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:react/recommended',
+		'plugin:react/jsx-runtime',
+		'plugin:react-hooks/recommended',
+		'plugin:@tanstack/eslint-plugin-query/recommended',
+	],
+	ignorePatterns: [
+		'dist',
+		'.eslintrc.cjs',
+		'postcss.config.js',
+		'tailwind.config.js',
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaFeatures: { jsx: true },
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		project: ['./tsconfig.json', './tsconfig.browser.json'],
+		tsconfigRootDir: __dirname,
+	},
+	overrides: [
+		{
+			files: ['**/*.cjs'],
+			env: {
+				node: true,
+			},
+		},
+	],
+	plugins: ['@tanstack/query', 'react-refresh', 'simple-import-sort'],
+	rules: {
+		'react-refresh/only-export-components': [
+			'warn',
+			{ allowConstantExport: true },
+		],
+		'simple-import-sort/exports': 2,
+		'simple-import-sort/imports': 2,
+	},
+}

.github/workflows/deploy.yml

@@ -0,0 +1,65 @@
+name: Deploy to AWS
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: production
+      url: ${{ steps.cloudfront.outputs.cloudfront_url }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm install -g yarn && yarn install
+
+      - name: Build
+        run: yarn build
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_KEY }}
+          aws-region: eu-west-1
+
+      - name: Setup Terraform
+        uses: hashicorp/setup-terraform@v2
+        with:
+          cli_config_credentials_token: ${{ secrets.TF_API_TOKEN }}
+
+      - name: Replace Tokens with Environment Variables
+        uses: cschleiden/replace-tokens@v1
+        with:
+          files: '["**/*.tfvars.tmpl"]'
+        env:
+          AWS_ACCESS_KEY: ${{ secrets.AWS_ACCESS_KEY }}
+          AWS_SECRET_KEY: ${{ secrets.AWS_SECRET_KEY }}
+          FE_BUCKET_NAME: ${{vars.FE_BUCKET_NAME}}
+          CLOUDFRONT_PRICE_CLASS: ${{vars.CLOUDFRONT_PRICE_CLASS}}
+          CLOUDFRONT_CACHE_POLICY_ID: ${{vars.CLOUDFRONT_CACHE_POLICY_ID}}
+          TF_ORGANISATION: ${{secrets.TF_ORGANISATION}}
+          TF_WORKSPACE: ${{secrets.TF_WORKSPACE}}
+
+      - name: Rename .tfvars.tmpl to .tfvars
+        run: |
+          find . -name "*.tfvars.tmpl" -exec sh -c 'mv "$1" "${1%.tmpl}"' _ {} \;
+
+      - name: Terraform Init
+        shell: bash
+        run: terraform -chdir=terraform init
+
+      - name: Terraform Apply
+        run: terraform -chdir=terraform apply -auto-approve
+
+      - name: Cloudfront URL
+        id: cloudfront
+        run: |
+          echo cloudfront_url=$(terraform -chdir=terraform --nowrap output -raw cloudfront_website) >> $GITHUB_OUTPUT

.github/workflows/destroy.yml

@@ -0,0 +1,61 @@
+name: Destroy Infrastructure
+on:
+  workflow_dispatch:
+    inputs:
+      confirm:
+        description: 'Are you sure you want to destroy the infrastructure?'
+        required: true
+        type: boolean
+
+jobs:
+  destroy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Destroy Infrastructure
+        run: |
+          if [ ${{ github.event.inputs.confirm }} = true ]; then
+              echo "Destroying infrastructure..."
+              # Run your infrastructure destroy command here
+          else
+              echo "Infrastructure destruction cancelled."
+              exit 1
+          fi
+        shell: bash
+
+      - uses: actions/checkout@v3
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_KEY }}
+          aws-region: eu-west-1
+
+      - name: Setup Terraform
+        uses: hashicorp/setup-terraform@v2
+        with:
+          cli_config_credentials_token: ${{ secrets.TF_API_TOKEN }}
+
+      - name: Replace Tokens with Environment Variables
+        uses: cschleiden/replace-tokens@v1
+        with:
+          files: '["**/*.tfvars.tmpl"]'
+        env:
+          AWS_ACCESS_KEY: ${{ secrets.AWS_ACCESS_KEY }}
+          AWS_SECRET_KEY: ${{ secrets.AWS_SECRET_KEY }}
+          FE_BUCKET_NAME: ${{vars.FE_BUCKET_NAME}}
+          CLOUDFRONT_PRICE_CLASS: ${{vars.CLOUDFRONT_PRICE_CLASS}}
+          CLOUDFRONT_CACHE_POLICY_ID: ${{vars.CLOUDFRONT_CACHE_POLICY_ID}}
+          TF_ORGANISATION: ${{secrets.TF_ORGANISATION}}
+          TF_WORKSPACE: ${{secrets.TF_WORKSPACE}}
+
+      - name: Rename .tfvars.tmpl to .tfvars
+        run: |
+          mv $(find . -name "*.tfvars.tmpl") $(find . -name "*.tfvars")
+
+      - name: Terraform Init
+        shell: bash
+        run: terraform -chdir=terraform init
+
+      - name: Terraform Destroy
+        run: terraform -chdir=terraform destroy -auto-approve

.github/workflows/pre-merge.yml

@@ -0,0 +1,37 @@
+name: Pre-merge checks
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+
+      - name: Run Lint
+        run: yarn lint
+
+      - name: Run Unit Tests
+        run: yarn test:unit
+
+      - name: Run E2E Tests
+        run: yarn test:e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -0,0 +1,50 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+.env.local
+.env
+
+yarn-error.log
+
+
+# Local .terraform directories
+**/.terraform/*
+
+# .tfstate files
+*.tfstate
+*.tfstate.*
+
+# Crash log files
+crash.log
+crash.*.log
+*.zip
+
+
+# Exclude all .tfvars files, which are likely to contain sensitive data, such as
+# password, private keys, and other secrets. These should not be part of version 
+# control as they are data points which are potentially sensitive and subject 
+# to change depending on the environment.
+*.tfvars
+*.tfvars.json
+
+# Ignore override files as they are usually used to override resources locally and so
+# are not checked in
+override.tf
+override.tf.json
+*_override.tf
+*_override.tf.json
+
+# Ignore CLI configuration files
+.terraformrc
+terraform.rc
+
+.terraform.lock.hcl

.husky/commit-msg

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"

.husky/prepare-commit-msg

@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"

.prettierignore

@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
+/coverage

CHANGELOG.md

@@ -0,0 +1,7 @@
+# @jasonpraful/vite-boilerplate
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial Commit

LICENSE

@@ -0,0 +1,18 @@
+Copyright 2024 Jason Praful
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,22 @@
+# Vite Boilerplate
+
+All in one front-end Vite.js + React boilerplate + AWS Infrastructure via Terraform
+
+## Features
+
+- Vite.js
+- React
+- TypeScript
+- Tailwind CSS
+- Vitest + React Testing Library
+- Playwright
+- All bolts Terraform infrastructure for AWS
+  - S3
+  - CloudFront (CDN)
+
+Boilerplate also consists of eslint, prettier, typescript, and tailwindcss
+configurations.
+
+## License
+
+MIT

commitlint.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: ['@commitlint/config-conventional'],
+    rules: {
+        'subject-case': [0, 'always'],
+    },
+}

e2e/example.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test'
+
+test('has Hello World', async ({ page }) => {
+	await page.goto('http://localhost:4173')
+	const text = await page.textContent('h1')
+	expect(text).toBe('Hello, world!👋')
+})

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite Boilerplate</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>