chore: start using vite for development and build

gloaysa · Mar 25, 2024 · afdcd69 · afdcd69
1 parent 1e99f50
commit afdcd69
Show file tree

Hide file tree

Showing 21 changed files with 7,513 additions and 22,419 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    "react-hooks/exhaustive-deps": "off",
+  },
+}
diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
@@ -34,7 +34,7 @@ jobs:
         uses: actions/upload-artifact@v3
         with:
           name: build
-          path: ./build
+          path: ./dist
 
       - name: semantic-release
         uses: cycjimmy/semantic-release-action@v4
@@ -56,7 +56,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./build
+          path: ./dist
 
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@v2

diff --git a/.gitignore b/.gitignore
@@ -12,15 +12,33 @@
 /build
 
 # misc
-.DS_Store
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
-/.idea
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Dockerfile b/Dockerfile
@@ -3,7 +3,7 @@ FROM node:20-alpine
 # Set the working directory in the container to /app
 WORKDIR /app
 
-COPY ./build ./dist
+COPY ./dist ./dist
 
 RUN npm install -g serve
 

diff --git a/README.md b/README.md
@@ -94,18 +94,9 @@ services:
 [x] - Allow configuration of Album library carousel time between slides.  
 [x] - Allow configuration to autostart Album library if nothing is playing for 5 seconds.  
 
-### Environment Variables
-
-To run this project, you need to set the following environment variables in your `.env` file:
-
-- `REACT_APP_PLEX_TOKEN`: Your Plex token. You can find it following this [guide](https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/).
-- `REACT_APP_HIDE_LIBRARY`: A comma-separated list of library sections you want to hide.
-
 ## Development Guide
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-It uses:
-
+- [vite](https://vitejs.dev/) for the build tool.
 - [zustand](https://github.com/pmndrs/zustand) for state management.
 - [wouter](https://github.com/molefrog/wouter) for routing.
 - [react-response-carousel](https://github.com/leandrowd/react-responsive-carousel) for the carousel component.
@@ -114,9 +105,9 @@ It uses:
 
 In the project directory, you can run:
 
-- `npm start`: Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-- `npm test`: Launches the test runner in the interactive watch mode.
-- `npm run build`: Builds the app for production to the `build` folder.
+- `npm run dev`: Runs the app in the development mode. Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+- `npm run build`: Builds the app for production to the `dist` folder.
+- `npm run preview`: after building the project, you can preview it with a local server.
 
 ### Serving with Nginx
 
@@ -128,7 +119,7 @@ server {
     server_name localhost;
 
     location / {
-        root /path/to/your/build/folder;
+        root /path/to/your/dist/folder;
         try_files $uri /index.html;
     }
 }

diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="/images/icons/icon-192x192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>What's Playing</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>