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">
|
||||
<head>
|
||||
<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="theme-color" content="#000000" />
|
||||
<meta name="theme-color" content="#141415" />
|
||||
<meta
|
||||
name="description"
|
||||
content="autobrr"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="/static/logo192.png" />
|
||||
<link crossorigin="use-credentials" rel="manifest" href="/static/manifest.json" />
|
||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||
<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>
|
||||
<base href="{{.BaseUrl}}">
|
||||
<script>
|
||||
|
|
|
@ -29,7 +29,9 @@
|
|||
"react-select": "^5.3.2",
|
||||
"react-table": "^7.8.0",
|
||||
"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": {
|
||||
"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 react from "@vitejs/plugin-react-swc";
|
||||
import { VitePWA } from "vite-plugin-pwa";
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
// https://vitejs.dev/config/
|
||||
export default ({ mode }: { mode: any }) => {
|
||||
|
@ -10,7 +11,51 @@ export default ({ mode }: { mode: any }) => {
|
|||
|
||||
return defineConfig({
|
||||
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: {
|
||||
alias: [
|
||||
{ find: "@", replacement: fileURLToPath(new URL("./src/", import.meta.url)) },
|
||||
|
@ -40,7 +85,7 @@ export default ({ mode }: { mode: any }) => {
|
|||
},
|
||||
build: {
|
||||
manifest: true,
|
||||
sourcemap: true
|
||||
sourcemap: true
|
||||
}
|
||||
});
|
||||
};
|