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

Migrate create-react-app to vite

Browse source 
Also bump all web dependencies to current versions and migrate to MUI v5
This commit is contained in:
Leppunen 2023-02-28 21:29:09 +02:00
parent 3225485633
commit 8d91847746
20 changed files with 889 additions and 12590 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
Dockerfile
View file

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

2
api/server.go
View file

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

3
main.go
View file

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

4
web/.gitignore vendored
View file

@ -2,8 +2,8 @@
# dependencies # dependencies
node_modules node_modules
build/* dist/*
!build/.gitkeep !dist/.gitkeep
public/swagger.json 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> <head>
<meta charset="utf-8" /> <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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#090A0B" /> <meta name="theme-color" content="#090A0B" />
<title>justlog</title> <title>justlog</title>
@ -42,6 +42,7 @@
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body> </body>
</html> </html>

63
web/package.json
View file

@ -3,58 +3,35 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.12.4", "@emotion/react": "^11.10.6",
"@material-ui/icons": "^4.11.3", "@emotion/styled": "^11.10.6",
"@material-ui/lab": "^4.0.0-alpha.61", "@mui/icons-material": "^5.11.11",
"btoa": "^1.2.1", "@mui/material": "^5.11.11",
"dayjs": "^1.11.5", "dayjs": "^1.11.7",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-linkify": "^1.0.0-alpha", "react-linkify": "^1.0.0-alpha",
"react-query": "^3.39.2", "react-query": "^3.39.3",
"react-scripts": "^4.0.3", "react-window": "^1.8.8",
"react-window": "^1.8.7",
"runes": "^0.4.3", "runes": "^0.4.3",
"swagger-ui-react": "^4.14.2", "swagger-ui-react": "^4.16.1",
"typescript": "^4.8.4", "typescript": "^4.9.5"
"web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "vite",
"build": "react-scripts build", "build": "vite 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"
]
}, },
"devDependencies": { "devDependencies": {
"@testing-library/jest-dom": "^5.16.5", "@mui/types": "^7.2.3",
"@testing-library/react": "^12.1.5", "@types/react": "^18.0.28",
"@testing-library/user-event": "^13.5.0", "@types/react-dom": "^18.0.11",
"@types/jest": "^27.5.2",
"@types/react": "^17.0.50",
"@types/react-dom": "^17.0.17",
"@types/react-linkify": "^1.0.1", "@types/react-linkify": "^1.0.1",
"@types/react-window": "^1.8.5", "@types/react-window": "^1.8.5",
"@types/runes": "^0.4.1", "@types/runes": "^0.4.1",
"@types/styled-components": "^5.1.26", "@types/styled-components": "^5.1.26",
"@types/swagger-ui-react": "^3.35.3", "@types/swagger-ui-react": "^4.11.0",
"styled-components": "^5.3.6" "@vitejs/plugin-react": "^3.1.0",
"styled-components": "^5.3.6",
"vite": "^4.1.4"
} }
} }

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

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

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

@ -1,7 +1,7 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import styled from "styled-components"; import styled from "styled-components";
import DescriptionIcon from '@material-ui/icons/Description'; import DescriptionIcon from '@mui/icons-material/Description';
import { IconButton } from "@material-ui/core"; import { IconButton } from "@mui/material";
import SwaggerUI from "swagger-ui-react" import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css" import "swagger-ui-react/swagger-ui.css"
import ReactDOM from "react-dom"; 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 { Button, TextField } from "@mui/material";
import { Autocomplete } from '@material-ui/lab'; import { Autocomplete } from '@mui/material';
import React, { FormEvent, useContext } from "react"; import React, { FormEvent, useContext } from "react";
import { useQueryClient } from "react-query"; import { useQueryClient } from "react-query";
import styled from "styled-components"; 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 React, { useContext, useState } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { Txt } from "../icons/Txt"; 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 { useContext, useState } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { store } from "../store"; import { store } from "../store";
import CancelIcon from '@material-ui/icons/Cancel'; import CancelIcon from '@mui/icons-material/Cancel';
const OptoutWrapper = styled.div` 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 { IconButton, Menu, MenuItem } from "@mui/material";
import { Check, Clear, Settings as SettingsIcon } from "@material-ui/icons"; import { Check, Clear, Settings as SettingsIcon } from "@mui/icons-material";
import React, { MouseEvent, useContext, useState } from "react"; import React, { MouseEvent, useContext, useState } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { Setting, store } from "../store"; import { Setting, store } from "../store";

8
web/src/index.tsx
View file

@ -4,12 +4,12 @@ import ReactDOM from 'react-dom';
import { QueryClientProvider } from 'react-query'; import { QueryClientProvider } from 'react-query';
import { Page } from './components/Page'; import { Page } from './components/Page';
import { StateProvider, store } from './store'; import { StateProvider, store } from './store';
import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core'; import { createTheme } from '@mui/material';
import { ThemeProvider } from '@material-ui/core/styles'; import { ThemeProvider } from '@mui/material/styles';
const pageTheme = createMuiTheme({ const pageTheme = createTheme({
palette: { palette: {
type: 'dark' mode: 'dark'
}, },
}); });

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

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

2
web/src/store.tsx
View file

@ -41,7 +41,7 @@ const url = new URL(window.location.href);
const defaultContext = { const defaultContext = {
state: { state: {
queryClient: new QueryClient(), queryClient: new QueryClient(),
apiBaseUrl: process?.env.REACT_APP_API_BASE_URL ?? window.location.protocol + "//" + window.location.host, apiBaseUrl: import.meta.env.REACT_APP_API_BASE_URL ?? window.location.protocol + "//" + window.location.host,
settings: { settings: {
showEmotes: { showEmotes: {
displayName: "Show Emotes", displayName: "Show Emotes",

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": { "compilerOptions": {
"target": "es2015", "target": "ESNext",
"lib": [ "lib": [
"dom", "dom",
"dom.iterable", "dom.iterable",
"esnext" "esnext"
], ],
"types": ["vite/client"],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": 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()],
});

13339
web/yarn.lock
View file

File diff suppressed because it is too large Load diff