AWS Amplify React Vite

amplify.yml

version: 1
backend:
  phases:
    build:
      commands:
        - ln -fs /usr/local/bin/pip3.8 /usr/bin/pip3
        - ln -fs /usr/local/bin/python3.8 /usr/bin/python3
        - pip3 install --user pipenv
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

aws-exports.d.ts

/* eslint-disable @typescript-eslint/no-explicit-any */
declare module './aws-exports' {
	const awsExports: unknown | never
	export default awsExports
}

export = awsmobile
declare const awsmobile: any

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { Amplify } from 'aws-amplify'
import awsExports from './aws-exports'

Amplify.configure(awsExports)

ReactDOM.createRoot(document.getElementById('root')!).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
)

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()],
	resolve: {
		alias: [
			{
				find: './runtimeConfig',
				replacement: './runtimeConfig.browser',
			},
		],
	},
	//Add build if you are going to use a Git-based (Github or CodeCommit) deployement
	build: {
		outDir: 'build',
	},
})