Switch from CRA to Vite

2 years ago · d158259f30
9 changed files with 1739 additions and 8233 deletions
--- a/.env
+++ b/.env
@ -1,5 +0,0 @@
				@@ -1,5 +0,0 @@
-# this is to prevent warnings in webpack builds
-GENERATE_SOURCEMAP=false
-
-# uncomment and add the following line to `.env.local` if you are running behind a proxy or on a subdirectory
-# PUBLIC_URL=https://your-domain.com/directory-here
--- a/index.html
+++ b/index.html
@ -0,0 +1,49 @@
				@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-44YVXRL61C"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-44YVXRL61C");
+    </script>
+
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Because watching movies legally is boring"
+    />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#E880C5" />
+    <meta name="msapplication-TileColor" content="#E880C5" />
+    <meta name="theme-color" content="#E880C5" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>movie-web</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -13,13 +13,13 @@
				@@ -13,13 +13,13 @@
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
-    "react-scripts": "5.0.1",
    "srt-webvtt": "^2.0.0",
    "unpacker": "^1.0.1"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
    "lint": "eslint --ext .tsx,.ts src",
    "lint:strict": "eslint --ext .tsx,.ts --max-warnings 0 src"
  },
@ -44,7 +44,8 @@
				@@ -44,7 +44,8 @@
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.13.0",
    "@typescript-eslint/parser": "^5.13.0",
-    "autoprefixer": "^10.4.2",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "autoprefixer": "^10.4.13",
    "eslint": "^8.10.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "^8.5.0",
@ -53,11 +54,12 @@
				@@ -53,11 +54,12 @@
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.3.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.20",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.7",
-    "tailwind-scrollbar": "^1.3.1",
-    "tailwindcss": "^3.0.20",
-    "typescript": "^4.6.4"
+    "tailwind-scrollbar": "^2.0.1",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.6.4",
+    "vite": "^4.0.1"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
				@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/index.html
+++ b/public/index.html
@ -1,40 +0,0 @@
				@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-44YVXRL61C"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-44YVXRL61C');
-    </script>
-    
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Because watching movies legally is boring"
-    />
-
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
-    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#E880C5">
-    <meta name="msapplication-TileColor" content="#E880C5">
-    <meta name="theme-color" content="#E880C5">
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> 
-
-    <title>movie-web</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@ -1 +0,0 @@
				@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,5 +1,6 @@
				@@ -1,5 +1,6 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      /* colors */
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,18 @@
				@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      components: path.resolve(__dirname, "./src/components"),
+      hooks: path.resolve(__dirname, "./src/hooks"),
+      state: path.resolve(__dirname, "./src/state"),
+      providers: path.resolve(__dirname, "./src/providers"),
+      views: path.resolve(__dirname, "./src/views"),
+      utils: path.resolve(__dirname, "./src/utils"),
+      mw_constants: path.resolve(__dirname, "./src/mw_constants"),
+    },
+  },
+});
--- a/yarn.lock
+++ b/yarn.lock
				`@ -1 +0,0 @@` @@ -1 +0,0 @@
				`/// <reference types="react-scripts" />`