refactored frontend to use snowpack for faster builds
James Batt
4 years ago
parent
d7eaf9458f
commit
a569920d28
@ -1,56 +1,43 @@
|
||||
### Build stage for the website frontend
|
||||
FROM node:10 as website
|
||||
|
||||
RUN apt-get update
|
||||
RUN apt-get install -y protobuf-compiler
|
||||
WORKDIR /code
|
||||
|
||||
COPY ./website/package.json ./
|
||||
COPY ./website/package-lock.json ./
|
||||
|
||||
# install dependency
|
||||
RUN npm install
|
||||
|
||||
RUN npm ci --no-audit --prefer-offline
|
||||
COPY ./proto/ ./proto/
|
||||
COPY ./website/ ./
|
||||
|
||||
RUN npm run build
|
||||
|
||||
### Build stage for the website backend server
|
||||
FROM golang:1.13.8 as server
|
||||
|
||||
RUN apt-get update
|
||||
RUN apt-get install -y protobuf-compiler
|
||||
WORKDIR /code
|
||||
|
||||
# Environment variable
|
||||
ENV GOOS=linux
|
||||
ENV GARCH=amd64
|
||||
ENV CGO_ENABLED=0
|
||||
ENV GO111MODULE=on
|
||||
|
||||
RUN go get github.com/golang/protobuf/protoc-gen-go@v1.3.5
|
||||
COPY ./go.mod ./
|
||||
COPY ./go.sum ./
|
||||
|
||||
RUN go mod download
|
||||
|
||||
COPY ./proto/ ./proto/
|
||||
COPY ./codegen.sh ./
|
||||
RUN ./codegen.sh
|
||||
COPY ./main.go ./main.go
|
||||
COPY ./internal/ ./internal/
|
||||
COPY ./pkg/ ./pkg/
|
||||
|
||||
RUN go build -o server
|
||||
|
||||
### Server
|
||||
FROM alpine:3.10
|
||||
|
||||
# Dependencies and tools
|
||||
RUN apk add iptables
|
||||
RUN apk add wireguard-tools
|
||||
RUN apk add curl
|
||||
|
||||
# Environment variable
|
||||
ENV CONFIG="/config.yaml"
|
||||
ENV STORAGE="file:///data"
|
||||
|
||||
# Copy the final build for the frontend and backend
|
||||
COPY --from=server /code/server /server
|
||||
COPY --from=website /code/build /website/build
|
||||
|
||||
# Command to start the server
|
||||
CMD /server
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
.build
|
||||
build
|
||||
web_modules
|
||||
node_modules
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "@snowpack/app-scripts-react/babel.config.json",
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-decorators", { "legacy": true }],
|
||||
["@babel/plugin-proposal-class-properties", { "loose": true }]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Website for the wg-access-server"/>
|
||||
<link rel="apple-touch-icon" href="logo-192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Wireguard Access Portal</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,60 +1,42 @@
|
||||
{
|
||||
"name": "website",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"codegen": "node_modules/.bin/grpc-ts-web -o src/sdk ../proto/*.proto",
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"prettier": "prettier ./src/**/*.{ts,tsx} --write"
|
||||
"start": "snowpack dev",
|
||||
"build": "snowpack build",
|
||||
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
|
||||
"lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
|
||||
"codegen": "node_modules/.bin/grpc-ts-web -o src/sdk ../proto/*.proto"
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.11.0",
|
||||
"@material-ui/icons": "^4.9.1",
|
||||
"@material-ui/lab": "^4.0.0-alpha.56",
|
||||
"@types/jest": "26.0.3",
|
||||
"@types/node": "14.0.14",
|
||||
"@types/react": "16.9.41",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"common-tags": "^1.8.0",
|
||||
"date-fns": "^2.14.0",
|
||||
"google-protobuf": "^4.0.0-rc.1",
|
||||
"mobx": "^5.15.4",
|
||||
"mobx-react": "^6.2.2",
|
||||
"mobx-utils": "^5.6.1",
|
||||
"numeral": "^2.0.6",
|
||||
"qrcode": "^1.4.4",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react": "^16.13.0",
|
||||
"react-dom": "^16.13.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "3.4.1",
|
||||
"tweetnacl-ts": "^1.0.3",
|
||||
"typeface-roboto": "0.0.75",
|
||||
"typescript": "3.9.6"
|
||||
"typeface-roboto": "0.0.75"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"proxy": "http://localhost:8000",
|
||||
"devDependencies": {
|
||||
"@snowpack/app-scripts-react": "^1.6.0-alpha.0",
|
||||
"@types/common-tags": "^1.8.0",
|
||||
"@types/numeral": "0.0.28",
|
||||
"@types/qrcode": "^1.3.4",
|
||||
"@types/react": "^16.9.35",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"@types/react-router-dom": "^5.1.5",
|
||||
"grpc-ts-web": "0.1.7",
|
||||
"prettier": "^2.0.5"
|
||||
"postcss-import": "^12.0.1",
|
||||
"prettier": "^2.0.5",
|
||||
"rollup-plugin-node-polyfills": "^0.2.1",
|
||||
"snowpack": "^2.6.4",
|
||||
"typescript": "^3.8.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo-192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo-310.png",
|
||||
"type": "image/png",
|
||||
"sizes": "301x310"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,23 @@
|
||||
module.exports = {
|
||||
extends: '@snowpack/app-scripts-react',
|
||||
scripts: {
|
||||
"run:codegen": "npm run codegen"
|
||||
},
|
||||
plugins: [],
|
||||
buildOptions: {
|
||||
minify: false,
|
||||
},
|
||||
devOptions: {
|
||||
port: 3000,
|
||||
open: 'none'
|
||||
},
|
||||
proxy: {
|
||||
'/api': 'http://localhost:8000/api'
|
||||
},
|
||||
installOptions: {
|
||||
namedExports: ['google-protobuf'],
|
||||
rollup: {
|
||||
plugins: [require('rollup-plugin-node-polyfills')()],
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import CssBaseline from '@material-ui/core/CssBaseline';
|
||||
import Box from '@material-ui/core/Box';
|
||||
import Navigation from './components/Navigation';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
} from 'react-router-dom';
|
||||
import { observer } from 'mobx-react';
|
||||
import { grpc } from './Api';
|
||||
import { AppState } from './AppState';
|
||||
import { YourDevices } from './pages/YourDevices';
|
||||
import { AllDevices } from './pages/admin/AllDevices';
|
||||
|
||||
@observer
|
||||
export class App extends React.Component {
|
||||
|
||||
async componentDidMount() {
|
||||
AppState.info = await grpc.server.info({});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!AppState.info) {
|
||||
return <p>loading...</p>
|
||||
}
|
||||
return (
|
||||
<Router>
|
||||
<CssBaseline />
|
||||
<Navigation />
|
||||
<Box component="div" m={2}>
|
||||
<Switch>
|
||||
<Route exact path="/" component={YourDevices} />
|
||||
{AppState.info.isAdmin &&
|
||||
<>
|
||||
<Route exact path="/admin/all-devices" component={AllDevices} />
|
||||
</>
|
||||
}
|
||||
</Switch>
|
||||
</Box>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
/// <reference types="react-scripts" />
|
||||
@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local('Roboto'),
|
||||
local('Roboto-Regular'),
|
||||
url('/roboto/roboto-latin-400.woff2') format('woff2'),
|
||||
url('/roboto/roboto-latin-400.woff') format('woff');;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 500;
|
||||
src:
|
||||
local('Roboto Medium '),
|
||||
local('Roboto-Medium'),
|
||||
url('/roboto/roboto-latin-500.woff2') format('woff2'),
|
||||
url('/roboto/roboto-latin-500.woff') format('woff');
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
/// <reference types="react-scripts" />
|
||||
@ -1,20 +1,17 @@
|
||||
{
|
||||
"include": ["src", "types"],
|
||||
"exclude": ["node_modules"],
|
||||
"extends": "@snowpack/app-scripts-react/tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react",
|
||||
"experimentalDecorators": true
|
||||
},
|
||||
"include": ["src"]
|
||||
// You can't currently define paths in your 'extends' config,
|
||||
// so we have to set 'baseUrl' & 'paths' here.
|
||||
// Don't change these unless you know what you're doing.
|
||||
// See: https://github.com/microsoft/TypeScript/issues/25430
|
||||
"baseUrl": "./",
|
||||
"paths": { "*": ["web_modules/.types/*"] },
|
||||
// Feel free to add/edit new config options below:
|
||||
// ...
|
||||
"experimentalDecorators": true,
|
||||
"importsNotUsedAsValues": "preserve"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
// ESM-HMR Interface: `import.meta.hot`
|
||||
|
||||
interface ImportMeta {
|
||||
// TODO: Import the exact .d.ts files from "esm-hmr"
|
||||
// https://github.com/pikapkg/esm-hmr
|
||||
hot: any;
|
||||
env: Record<string, any>;
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
/* Use this file to declare any custom file extensions for importing */
|
||||
/* Use this folder to also add/extend a package d.ts file, if needed. */
|
||||
|
||||
declare module '*.css';
|
||||
declare module '*.svg' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.bmp' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.gif' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.jpg' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.jpeg' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.png' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
declare module '*.webp' {
|
||||
const ref: string;
|
||||
export default ref;
|
||||
}
|
||||
Loading…
Reference in New Issue