Update dependencies and switch build to Vite
This commit is contained in:
Eric Zhang
parent
204b084e62
commit
1267452302
17 changed files with 1859 additions and 36644 deletions
|
|
@ -2,7 +2,7 @@
|
|||
/target
|
||||
pkg
|
||||
/node_modules
|
||||
/build
|
||||
/dist
|
||||
*.local
|
||||
|
||||
Dockerfile
|
||||
|
|
|
|||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -3,7 +3,7 @@ pkg
|
|||
|
||||
node_modules
|
||||
.DS_Store
|
||||
build
|
||||
dist
|
||||
*.local
|
||||
|
||||
.vscode
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@ pkg
|
|||
|
||||
node_modules
|
||||
.DS_Store
|
||||
build
|
||||
dist
|
||||
*.local
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ WORKDIR /home/rust/src
|
|||
RUN apk --no-cache add curl musl-dev
|
||||
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
|
||||
COPY . .
|
||||
RUN wasm-pack build rustpad-wasm
|
||||
RUN wasm-pack build --target web rustpad-wasm
|
||||
|
||||
FROM node:lts-alpine as frontend
|
||||
WORKDIR /usr/src/app
|
||||
|
|
@ -19,11 +19,11 @@ COPY --from=wasm /home/rust/src/rustpad-wasm/pkg rustpad-wasm/pkg
|
|||
RUN npm ci
|
||||
COPY . .
|
||||
ARG GITHUB_SHA
|
||||
ENV REACT_APP_SHA=${GITHUB_SHA}
|
||||
ENV VITE_SHA=${GITHUB_SHA}
|
||||
RUN npm run build
|
||||
|
||||
FROM scratch
|
||||
COPY --from=frontend /usr/src/app/build build
|
||||
COPY --from=frontend /usr/src/app/dist dist
|
||||
COPY --from=backend /home/rust/src/target/release/rustpad-server .
|
||||
USER 1000:1000
|
||||
CMD [ "./rustpad-server" ]
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ To run this application, you need to install Rust, `wasm-pack`, and Node.js.
|
|||
Then, build the WebAssembly portion of the app:
|
||||
|
||||
```
|
||||
wasm-pack build rustpad-wasm
|
||||
wasm-pack build --target web rustpad-wasm
|
||||
```
|
||||
|
||||
When that is complete, you can install dependencies for the frontend React
|
||||
|
|
@ -57,7 +57,7 @@ While the backend is running, open another shell and run the following command
|
|||
to start the frontend portion.
|
||||
|
||||
```
|
||||
npm start
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This command will open a browser window to `http://localhost:3000`, with hot
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
const path = require("path");
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
const wasmExtensionRegExp = /\.wasm$/;
|
||||
|
||||
config.resolve.extensions.push(".wasm");
|
||||
|
||||
config.module.rules.forEach((rule) => {
|
||||
(rule.oneOf || []).forEach((oneOf) => {
|
||||
if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
|
||||
// make file-loader ignore WASM files
|
||||
oneOf.exclude.push(wasmExtensionRegExp);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// add a dedicated loader for WASM
|
||||
config.module.rules.push({
|
||||
test: wasmExtensionRegExp,
|
||||
include: path.resolve(__dirname, "src"),
|
||||
use: [{ loader: require.resolve("wasm-loader"), options: {} }],
|
||||
});
|
||||
|
||||
return config;
|
||||
};
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Rustpad: Collaborative Code Editor</title>
|
||||
<meta
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
/>
|
||||
</head>
|
||||
<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>
|
||||
38360
package-lock.json
generated
38360
package-lock.json
generated
File diff suppressed because it is too large
Load diff
38
package.json
38
package.json
|
|
@ -3,14 +3,13 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "react-app-rewired start",
|
||||
"build": "react-app-rewired build",
|
||||
"test": "react-app-rewired test",
|
||||
"eject": "react-scripts eject",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@chakra-ui/react": "^1.6.10",
|
||||
"@chakra-ui/react": "^1.7.0",
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@monaco-editor/react": "^4.3.1",
|
||||
|
|
@ -19,36 +18,17 @@
|
|||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-icons": "^4.3.1",
|
||||
"react-scripts": "4.0.3",
|
||||
"rustpad-wasm": "file:./rustpad-wasm/pkg",
|
||||
"use-local-storage-state": "^11.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash.debounce": "^4.0.6",
|
||||
"@types/react": "^17.0.30",
|
||||
"@types/react-dom": "^17.0.10",
|
||||
"monaco-editor": "^0.29.1",
|
||||
"@types/react": "^17.0.34",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@vitejs/plugin-react": "^1.0.8",
|
||||
"monaco-editor": "^0.30.1",
|
||||
"prettier": "2.4.1",
|
||||
"raw.macro": "^0.4.2",
|
||||
"react-app-rewired": "^2.1.8",
|
||||
"typescript": "~4.4.4",
|
||||
"wasm-loader": "^1.3.0"
|
||||
},
|
||||
"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"
|
||||
]
|
||||
"vite": "^2.6.14"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ pub fn server(config: ServerConfig) -> BoxedFilter<(impl Reply,)> {
|
|||
|
||||
/// Construct routes for static files from React.
|
||||
fn frontend() -> BoxedFilter<(impl Reply,)> {
|
||||
warp::fs::dir("build").boxed()
|
||||
warp::fs::dir("dist").boxed()
|
||||
}
|
||||
|
||||
/// Construct backend routes, including WebSocket handlers.
|
||||
|
|
|
|||
12
src/App.tsx
12
src/App.tsx
|
|
@ -1,5 +1,4 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { set_panic_hook } from "rustpad-wasm";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
|
|
@ -27,7 +26,7 @@ import {
|
|||
import useStorage from "use-local-storage-state";
|
||||
import Editor from "@monaco-editor/react";
|
||||
import { editor } from "monaco-editor/esm/vs/editor/editor.api";
|
||||
import raw from "raw.macro";
|
||||
import rustpadRaw from "../rustpad-server/src/rustpad.rs?raw";
|
||||
import languages from "./languages.json";
|
||||
import animals from "./animals.json";
|
||||
import Rustpad, { UserInfo } from "./rustpad";
|
||||
|
|
@ -36,8 +35,6 @@ import ConnectionStatus from "./ConnectionStatus";
|
|||
import Footer from "./Footer";
|
||||
import User from "./User";
|
||||
|
||||
set_panic_hook();
|
||||
|
||||
function getWsUri(id: string) {
|
||||
return (
|
||||
(window.location.origin.startsWith("https") ? "wss://" : "ws://") +
|
||||
|
|
@ -57,8 +54,9 @@ function generateHue() {
|
|||
function App() {
|
||||
const toast = useToast();
|
||||
const [language, setLanguage] = useState("plaintext");
|
||||
const [connection, setConnection] =
|
||||
useState<"connected" | "disconnected" | "desynchronized">("disconnected");
|
||||
const [connection, setConnection] = useState<
|
||||
"connected" | "disconnected" | "desynchronized"
|
||||
>("disconnected");
|
||||
const [users, setUsers] = useState<Record<number, UserInfo>>({});
|
||||
const [name, setName] = useStorage("name", generateName);
|
||||
const [hue, setHue] = useStorage("hue", generateHue);
|
||||
|
|
@ -146,7 +144,7 @@ function App() {
|
|||
[
|
||||
{
|
||||
range: model.getFullModelRange(),
|
||||
text: raw("../rustpad-server/src/rustpad.rs"),
|
||||
text: rustpadRaw,
|
||||
},
|
||||
],
|
||||
() => null
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { Flex, Icon, Text } from "@chakra-ui/react";
|
||||
import { VscRemote } from "react-icons/vsc";
|
||||
|
||||
const version = process.env.REACT_APP_SHA
|
||||
? process.env.REACT_APP_SHA.slice(0, 7)
|
||||
: "development";
|
||||
const version =
|
||||
typeof import.meta.env.VITE_SHA === "string"
|
||||
? import.meta.env.VITE_SHA.slice(0, 7)
|
||||
: "development";
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { StrictMode } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { ChakraProvider } from "@chakra-ui/react";
|
||||
import init, { set_panic_hook } from "rustpad-wasm";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
// An asynchronous entry point is needed to load WebAssembly files.
|
||||
import("./App").then(({ default: App }) => {
|
||||
init().then(() => {
|
||||
set_panic_hook();
|
||||
ReactDOM.render(
|
||||
<StrictMode>
|
||||
<ChakraProvider>
|
||||
|
|
|
|||
1
src/react-app-env.d.ts
vendored
1
src/react-app-env.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
const createProxyMiddleware = require("http-proxy-middleware");
|
||||
|
||||
module.exports = function (app) {
|
||||
app.use(
|
||||
createProxyMiddleware("/api", {
|
||||
target: "http://localhost:3030",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: true,
|
||||
})
|
||||
);
|
||||
};
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
19
vite.config.js
Normal file
19
vite.config.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
chunkSizeWarningLimit: 1000,
|
||||
},
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:3030",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue