feat(web): make PWA compatible with Vite (#793)
* removed react-app type instead use vite. * removed index.html from public since vite uses it from root: read more: https://vitejs.dev/guide/#index-html-and-project-root * yarn.lock update. * added vite config file. With commented rollUp option if we want the build to be called build but using default stuff for now. * updated tsconfig to use vite and include vite.config.ts * changed package json build commands to use vite. * for some reason there is an error in vite config when we put project as tsconfig.json. * build.go updated to use the new dist folder. * refactored as well updated to use dist and web.AssetHandler again. * Fixed issue forcing the frontend to be reloaded for all routes to work if logged in fresh without reloading it will always go back to dashboard. * updated it to use the new function; need to fix the Index for baseUrl I believe, if enabled it works except logs route will crash due to cors. * refactored and default port to 7474, don't think we need the rollUpOptions. * added tmp/ to ignore . * init air.toml, for dev hot reloading both app and backend. https://github.com/cosmtrek/air run it using air but make sure it's in PATH * updated the start command to build and watch for changes, works great with air. * revert * added proxy for vite config. To be used for dev. * fix: This fixes #117 Propagation bug. * refactor: I think this should fix it, when logs route etc getting accessed usually it throws error but by getting rid of the catch-all it should work as intended, since web.RegisterHandler(r) will catch the unmatched ones. * Moved outside static, keep it in public root folder. * refactor to support the changes * Added support for PWA, autoinject which auto updates when there is new "version" instead of prompting user. * fix colour and added the assets. * chore: yarn lock and remove logos. * chore: remove logos, don't think we need em. * chore:added dist folder. --------- Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
|
@ -2,15 +2,19 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="/static/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#141415" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="autobrr"
|
content="autobrr"
|
||||||
/>
|
/>
|
||||||
<link rel="apple-touch-icon" href="/static/logo192.png" />
|
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||||
<link crossorigin="use-credentials" rel="manifest" href="/static/manifest.json" />
|
<link rel="apple-touch-icon" href="/apple-touch-icon-iphone-60x60.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-ipad-76x76.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone-retina-120x120.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-ipad-retina-152x152.png">
|
||||||
|
<link crossorigin="use-credentials" rel="manifest" href="/manifest.json" />
|
||||||
<title>autobrr</title>
|
<title>autobrr</title>
|
||||||
<base href="{{.BaseUrl}}">
|
<base href="{{.BaseUrl}}">
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -29,7 +29,9 @@
|
||||||
"react-select": "^5.3.2",
|
"react-select": "^5.3.2",
|
||||||
"react-table": "^7.8.0",
|
"react-table": "^7.8.0",
|
||||||
"react-tooltip": "^5.5.2",
|
"react-tooltip": "^5.5.2",
|
||||||
"stacktracey": "^2.1.8"
|
"stacktracey": "^2.1.8",
|
||||||
|
"vite-plugin-pwa": "^0.14.6",
|
||||||
|
"workbox-window": "^6.5.4"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite",
|
"start": "vite",
|
||||||
|
|
BIN
web/public/apple-touch-icon-ipad-76x76.png
Normal file
After Width: | Height: | Size: 5.4 KiB |
BIN
web/public/apple-touch-icon-ipad-retina-152x152.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
web/public/apple-touch-icon-iphone-60x60.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
BIN
web/public/apple-touch-icon-iphone-retina-120x120.png
Normal file
After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
@ -1,6 +1,7 @@
|
||||||
import { fileURLToPath, URL } from "node:url";
|
import { fileURLToPath, URL } from "node:url";
|
||||||
|
|
||||||
import react from "@vitejs/plugin-react-swc";
|
import react from "@vitejs/plugin-react-swc";
|
||||||
|
import { VitePWA } from "vite-plugin-pwa";
|
||||||
import { defineConfig, loadEnv } from "vite";
|
import { defineConfig, loadEnv } from "vite";
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default ({ mode }: { mode: any }) => {
|
export default ({ mode }: { mode: any }) => {
|
||||||
|
@ -10,7 +11,51 @@ export default ({ mode }: { mode: any }) => {
|
||||||
|
|
||||||
return defineConfig({
|
return defineConfig({
|
||||||
base: "",
|
base: "",
|
||||||
plugins: [react()],
|
plugins: [react(), VitePWA({
|
||||||
|
registerType: "autoUpdate",
|
||||||
|
injectRegister: "auto",
|
||||||
|
includeAssets: [
|
||||||
|
"favicon.svg",
|
||||||
|
"favicon.ico",
|
||||||
|
"robots.txt",
|
||||||
|
"apple-touch-icon.png",
|
||||||
|
"manifest.webmanifest",
|
||||||
|
"assets/**/*"
|
||||||
|
],
|
||||||
|
manifest: {
|
||||||
|
name: "autobrr",
|
||||||
|
short_name: "autobrr",
|
||||||
|
description: "Automation for downloads.",
|
||||||
|
theme_color: "#141415",
|
||||||
|
background_color: "#141415",
|
||||||
|
icons: [
|
||||||
|
{
|
||||||
|
src: "logo192.png",
|
||||||
|
sizes: "192x192",
|
||||||
|
type: "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: "logo512.png",
|
||||||
|
sizes: "512x512",
|
||||||
|
type: "image/png"
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
src: "logo512.png",
|
||||||
|
sizes: "512x512",
|
||||||
|
type: "image/png",
|
||||||
|
purpose: "any maskable"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
start_url: "/",
|
||||||
|
display: "standalone"
|
||||||
|
|
||||||
|
},
|
||||||
|
workbox: {
|
||||||
|
globPatterns: ["**/*.{js,css,html,svg}"],
|
||||||
|
sourcemap: true
|
||||||
|
}
|
||||||
|
})],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: [
|
alias: [
|
||||||
{ find: "@", replacement: fileURLToPath(new URL("./src/", import.meta.url)) },
|
{ find: "@", replacement: fileURLToPath(new URL("./src/", import.meta.url)) },
|
||||||
|
@ -40,7 +85,7 @@ export default ({ mode }: { mode: any }) => {
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
manifest: true,
|
manifest: true,
|
||||||
sourcemap: true
|
sourcemap: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|