Remove "Create React App" scripts (#53)

* feat: move away from create-react-app * fix: logger, import React, path warnings * fix: webpack config issues * fix: define 'process' object for logger package
Living-Snow-Project · Aug 7, 2024 · b700b49 · b700b49
1 parent b1a2d1b
commit b700b49
Show file tree

Hide file tree

Showing 15 changed files with 2,149 additions and 4,523 deletions.
diff --git a/apps/web/.babelrc b/apps/web/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}
diff --git a/apps/web/.gitignore b/apps/web/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/apps/web/README.md b/apps/web/README.md
@@ -1,4 +1,12 @@
 ## Getting Started
 
 1. Follow the instructions for cloning the monorepo
-2. yarn start
+
+## Test locally
+
+1. yarn start
+
+## Deploy to GitHub Pages
+
+1. yarn build
+2. yarn deploy
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -3,51 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "homepage": "https://living-snow-project.github.io/LivingSnowProject/",
-  "dependencies": {
-    "@livingsnow/network": "*",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "web-vitals": "^2.1.4"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^16.11.36",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
-    "gh-pages": "^4.0.0",
-    "react-scripts": "^5.0.1"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "echo todo, don't enter watchmode",
-    "eject": "react-scripts eject",
-    "predeploy": "yarn run build",
-    "deploy": "gh-pages -d build",
+    "start": "webpack serve --mode development",
+    "build": "webpack --mode production & copy public\\favicon.ico dist\\. & copy public\\manifest.json dist\\.",
+    "deploy": "gh-pages -d dist",
+    "test": "echo todo: no tests written against web app yet",
     "clean": "yarn run clean:win",
     "clean:win": "node -e \"if (process.platform === 'win32') process.exit(1)\" || , if exist build rd /s /q build",
     "nuke": "yarn run clean:win && yarn run nuke:win",
     "nuke:win": "node -e \"if (process.platform === 'win32') process.exit(1)\" || , if exist node_modules rd /s /q node_modules"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "@livingsnow/network": "*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
+    "gh-pages": "^6.1.1",
+    "html-webpack-plugin": "^5.6.0",
+    "style-loader": "^4.0.0",
+    "typescript": "^5.5.4",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   }
 }
diff --git a/apps/web/public/index.html b/apps/web/public/index.html
@@ -2,29 +2,22 @@
 <html lang="en">
   <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="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Web app for Living Snow Project" />
+    <link rel="apple-touch-icon" href="./logo192.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" />
+    <link rel="manifest" href="./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>React App</title>
+    <title>Living Snow Project Web App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/apps/web/public/logo192.png b/apps/web/public/logo192.png
diff --git a/apps/web/public/logo512.png b/apps/web/public/logo512.png
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Living Snow Project",
+  "name": "Living Snow Project Web App",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { RecordsApiV2 } from "@livingsnow/network";
 import { TableHeader, TableRow } from "./components/TableRow";
 

diff --git a/apps/web/src/components/TableRow.tsx b/apps/web/src/components/TableRow.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { AlgaeRecord } from "@livingsnow/record";
 import { PhotosResponseV2 } from "@livingsnow/network";
 import { PhotosApi } from "@livingsnow/network";

diff --git a/apps/web/webpack.config.js b/apps/web/webpack.config.js
@@ -0,0 +1,45 @@
+/* eslint-disable */
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+const webpack = require("webpack");
+
+const isDevelopment = process.env.NODE_ENV !== "production";
+
+module.exports = {
+  entry: "./src/index.tsx",
+  devServer: {
+    hot: true,
+  },
+  target: "web",
+  output: {
+    filename: "bundle.[fullhash].js",
+    path: path.resolve(__dirname, "dist"),
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./public/index.html",
+    }),
+    isDevelopment && new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({
+      process: {},
+    }),
+  ],
+  resolve: {
+    modules: [__dirname, "src", "node_modules"],
+    extensions: [".*", ".js", ".jsx", ".tsx", ".ts"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$|tsx/,
+        exclude: /node_modules/,
+        loader: require.resolve("babel-loader"),
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+};
diff --git a/packages/livingsnow-logger/dist/index.d.ts.map b/packages/livingsnow-logger/dist/index.d.ts.map
diff --git a/packages/livingsnow-logger/dist/index.js b/packages/livingsnow-logger/dist/index.js
@@ -1,3 +1,4 @@
+var _a;
 function TestLogger() {
     return {
         Info() { },
@@ -33,5 +34,7 @@ function DevelopmentLogger() {
   };
 } */
 // TODO: figure out what ProductionLogger should do
-const Logger = process.env.JEST_WORKER_ID !== undefined ? TestLogger() : DevelopmentLogger();
+const Logger = ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.JEST_WORKER_ID) !== undefined
+    ? TestLogger()
+    : DevelopmentLogger();
 export default Logger;
diff --git a/packages/livingsnow-logger/src/index.ts b/packages/livingsnow-logger/src/index.ts
@@ -45,6 +45,8 @@ function DevelopmentLogger(): ILogger {
 
 // TODO: figure out what ProductionLogger should do
 const Logger =
-  process.env.JEST_WORKER_ID !== undefined ? TestLogger() : DevelopmentLogger();
+  process?.env?.JEST_WORKER_ID !== undefined
+    ? TestLogger()
+    : DevelopmentLogger();
 
 export default Logger;
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
     # production
     /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@