Fijxu/justlog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #190 from Leppunen/web-upgrade

Browse source 
Migrate react-scripts to vite in webui and update dependencies
This commit is contained in:
gempir 2023-03-07 20:03:13 +01:00 committed by GitHub
commit b51ce07fc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 1479 additions and 12408 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
Dockerfile
View file

@ -1,24 +1,24 @@
FROM quay.io/goswagger/swagger:latest
FROM quay.io/goswagger/swagger:latest as build-docs
WORKDIR /app
COPY . .
RUN make docs
FROM node:16-alpine
WORKDIR /app
COPY --from=0 /app .
WORKDIR /app/web
RUN yarn install
FROM node:18-alpine as build-web
WORKDIR /web
COPY web .
COPY --from=build-docs /app/web/public/swagger.json /web/public
RUN yarn install --ignore-optional
RUN yarn build
FROM golang:latest
FROM golang:alpine as build-app
WORKDIR /app
COPY --from=1 /app .
RUN go get ./...
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o app .
COPY . .
COPY --from=build-web /web/dist /app/web/dist
RUN go build -o app .
FROM alpine:latest
FROM alpine:latest
RUN apk --no-cache add ca-certificates
COPY --from=2 /app/app .
COPY --from=build-app /app/app .
USER 1000:1000
CMD ["./app", "--config=/etc/justlog.json"]
EXPOSE 8025

2
Makefile
View file

@ -13,7 +13,7 @@ web: init_web
cd web && yarn build
init_web:
cd web && yarn install
cd web && yarn install --ignore-optional
container:
docker build -t gempir/justlog .

2
api/server.go
View file

@ -35,7 +35,7 @@ type Server struct {
// NewServer create api Server
func NewServer(cfg *config.Config, bot *bot.Bot, fileLogger filelog.Logger, helixClient helix.TwitchApiClient, assets fs.FS) Server {
build, err := fs.Sub(assets, "web/build")
build, err := fs.Sub(assets, "web/dist")
if err != nil {
log.Fatal("failed to read public assets")
}

3
main.go
View file

@ -13,7 +13,8 @@ import (
)
// content holds our static web server content.
//go:embed web/build/*
//
//go:embed web/dist/*
var assets embed.FS
func main() {

2
web/.env.development
View file

@ -1 +1 @@
REACT_APP_API_BASE_URL=http://localhost:8025
VITE_API_BASE_URL=http://localhost:8025

4
web/.gitignore vendored
View file

@ -2,8 +2,8 @@
# dependencies
node_modules
build/*
!build/.gitkeep
dist/*
!dist/.gitkeep
public/swagger.json

0
web/build/.gitkeep → web/dist/.gitkeep vendored
View file

3
web/public/index.html → web/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#090A0B" />
<title>justlog</title>
@ -42,6 +42,7 @@
<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>

63
web/package.json
View file

@ -3,58 +3,35 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.61",
"btoa": "^1.2.1",
"dayjs": "^1.11.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.12",
"dayjs": "^1.11.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-linkify": "^1.0.0-alpha",
"react-query": "^3.39.2",
"react-scripts": "^4.0.3",
"react-window": "^1.8.7",
"react-query": "^3.39.3",
"react-window": "^1.8.8",
"runes": "^0.4.3",
"swagger-ui-react": "^4.14.2",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
"swagger-ui-react": "^4.17.1",
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
">0.2%",
"not dead",
"not op_mini all"
]
"start": "vite",
"build": "vite build"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/react": "^17.0.50",
"@types/react-dom": "^17.0.17",
"@mui/types": "^7.2.3",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-linkify": "^1.0.1",
"@types/react-window": "^1.8.5",
"@types/runes": "^0.4.1",
"@types/styled-components": "^5.1.26",
"@types/swagger-ui-react": "^3.35.3",
"styled-components": "^5.3.6"
"@types/swagger-ui-react": "^4.11.0",
"@vitejs/plugin-react": "^3.1.0",
"styled-components": "^5.3.8",
"vite": "^4.1.4"
}
}

4
web/src/components/ContentLog.tsx
View file

@ -1,5 +1,5 @@
import { InputAdornment, TextField } from "@material-ui/core";
import { Search } from "@material-ui/icons";
import { InputAdornment, TextField } from "@mui/material";
import { Search } from "@mui/icons-material";
import React, { useContext, useState, CSSProperties, useRef, useEffect } from "react";
import styled from "styled-components";
import { useLog } from "../hooks/useLog";

4
web/src/components/Docs.tsx
View file

@ -1,7 +1,7 @@
import React, { useContext } from "react";
import styled from "styled-components";
import DescriptionIcon from '@material-ui/icons/Description';
import { IconButton } from "@material-ui/core";
import DescriptionIcon from '@mui/icons-material/Description';
import { IconButton } from "@mui/material";
import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"
import ReactDOM from "react-dom";

4
web/src/components/Filters.tsx
View file

@ -1,5 +1,5 @@
import { Button, TextField } from "@material-ui/core";
import { Autocomplete } from '@material-ui/lab';
import { Button, TextField } from "@mui/material";
import { Autocomplete } from '@mui/material';
import React, { FormEvent, useContext } from "react";
import { useQueryClient } from "react-query";
import styled from "styled-components";

2
web/src/components/Log.tsx
View file

@ -1,4 +1,4 @@
import { Button } from "@material-ui/core";
import { Button } from "@mui/material";
import React, { useContext, useState } from "react";
import styled from "styled-components";
import { Txt } from "../icons/Txt";

4
web/src/components/Optout.tsx
View file

@ -1,8 +1,8 @@
import { IconButton, Button } from "@material-ui/core";
import { IconButton, Button } from "@mui/material";
import { useContext, useState } from "react";
import styled from "styled-components";
import { store } from "../store";
import CancelIcon from '@material-ui/icons/Cancel';
import CancelIcon from '@mui/icons-material/Cancel';
const OptoutWrapper = styled.div`

4
web/src/components/Settings.tsx
View file

@ -1,5 +1,5 @@
import { IconButton, Menu, MenuItem } from "@material-ui/core";
import { Check, Clear, Settings as SettingsIcon } from "@material-ui/icons";
import { IconButton, Menu, MenuItem } from "@mui/material";
import { Check, Clear, Settings as SettingsIcon } from "@mui/icons-material";
import React, { MouseEvent, useContext, useState } from "react";
import styled from "styled-components";
import { Setting, store } from "../store";

24
web/src/index.tsx
View file

@ -1,15 +1,15 @@
import React from 'react';
import { StrictMode } from 'react';
import { useContext } from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { QueryClientProvider } from 'react-query';
import { Page } from './components/Page';
import { StateProvider, store } from './store';
import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/core/styles';
import { createTheme } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
const pageTheme = createMuiTheme({
const pageTheme = createTheme({
palette: {
type: 'dark'
mode: 'dark'
},
});
@ -21,13 +21,15 @@ function App() {
</QueryClientProvider>
}
ReactDOM.render(
<React.StrictMode>
const container = document.getElementById('root') as Element;
const root = createRoot(container);
root.render(
<StrictMode>
<StateProvider>
<ThemeProvider theme={pageTheme}>
<App />
</ThemeProvider>
</StateProvider>
</React.StrictMode>,
document.getElementById('root')
);
</StrictMode>
);

1
web/src/react-app-env.d.ts vendored
View file

@ -1 +0,0 @@
/// <reference types="react-scripts" />

4
web/src/store.tsx
View file

@ -41,7 +41,7 @@ const url = new URL(window.location.href);
const defaultContext = {
state: {
queryClient: new QueryClient(),
apiBaseUrl: process?.env.REACT_APP_API_BASE_URL ?? window.location.protocol + "//" + window.location.host,
apiBaseUrl: import.meta.env.VITE_API_BASE_URL ?? window.location.protocol + "//" + window.location.host,
settings: {
showEmotes: {
displayName: "Show Emotes",
@ -152,4 +152,4 @@ export { store, StateProvider };
export const QueryDefaults = {
staleTime: 5 * 10 * 1000,
};
};

1
web/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

3
web/tsconfig.json
View file

@ -1,11 +1,12 @@
{
"compilerOptions": {
"target": "es2015",
"target": "ESNext",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"types": ["vite/client"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,

6
web/vite.config.ts Normal file
View file

@ -0,0 +1,6 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});

13723
web/yarn.lock
View file

File diff suppressed because it is too large Load diff