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>
This commit is contained in:
KaiserBh 2023-05-01 07:43:13 +10:00 committed by GitHub
parent 32af2d756b
commit 91e4f5b435
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 2308 additions and 28 deletions

View file

@ -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>

View file

@ -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",

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

View file

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Before After
Before After

View file

@ -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
}
});
};

File diff suppressed because it is too large Load diff