Deployed to vercel

Updated docker build instructions and args

.gitignore

@@ -2,4 +2,5 @@ node_modules/
 package-lock.json
 build/
 pnpm-lock.yaml
-.vscode
+.vscode
+.vercel

Dockerfile

@@ -4,13 +4,12 @@ WORKDIR /app
 COPY ./package.json ./
 RUN npm install
 COPY ./ ./
-ENV SNOWPACK_PUBLIC_API_URL=https://publitebackend.dmitriy.icu
+ARG PUBLIC_API_URL=https://publitebackend.dm1sh.ru
-ENV SNOWPACK_PUBLIC_BASE_URL=https://publite.dmitriy.icu
+ARG PUBLIC_BASE_URL=https://publite.dm1sh.ru
 RUN NODE_ENV=production npm run build
 
 FROM node:alpine
 RUN npm install serve -g --silent
 WORKDIR /app
 COPY --from=builder /app/build .
-EXPOSE 80
+CMD serve -p ${PORT:-8080} -s .
-CMD ["serve", "-p", "80", "-s", "."]

README.md

@@ -8,6 +8,20 @@
 
 Frontend for Publite service — E-Books reader
 
+<table style="margin: auto">
+  <tr>
+    <td>
+      <img style="max-height: 50vh" src="public/images/screenshot3.webp"/>
+    </td>
+    <td>
+      <img style="max-height: 50vh" src="public/images/screenshot2.webp"/>
+    </td>
+    <td>
+      <img style="max-height: 50vh" src="public/images/screenshot1.webp"/>
+    </td>
+  </tr>
+</table>
+
 ## Deploy
 
 Dev environment setup:
@@ -27,10 +41,10 @@ Simple docker deployment
 
 ```bash
 # build docker image
-docker build . -t publite_frontend
+docker build . --build-arg PUBLIC_API_URL=<https://...> --build-arg PUBLIC_BASE_URL=<https://...> -t publite_frontend
 
 # run it with docker
-docker run -p <port>:80 publite_frontend
+docker run -p <port>:8080 publite_frontend
 ```
 
 Dokku deployment with image from Docker Hub

package.json

@@ -7,7 +7,7 @@
     "h": "cat ./webpack.config.dev.js"
   },
   "devDependencies": {
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^6.3.1",
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.9",
     "copy-webpack-plugin": "^9.0.1",
@@ -16,10 +16,9 @@
     "fork-ts-checker-webpack-plugin": "^6.2.13",
     "style-loader": "^3.2.1",
     "typescript": "^4.3.5",
-    "typescript-plugin-css-modules": "^3.4.0",
     "webpack": "^5.46.0",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
     "idb": "^6.1.2",

public/manifest.json

@@ -29,18 +29,18 @@
   "description": "eBook reader supporting EPUB and FB2 files",
   "screenshots": [
     {
-      "src": "/images/screenshot1.jpg",
+      "src": "/images/screenshot1.webp",
-      "type": "image/jpg",
+      "type": "image/webp",
       "sizes": "1080x2400"
     },
     {
-      "src": "/images/screenshot2.jpg",
+      "src": "/images/screenshot2.webp",
-      "type": "image/jpg",
+      "type": "image/webp",
       "sizes": "1080x2400"
     },
     {
-      "src": "/images/screenshot3.jpg",
+      "src": "/images/screenshot3.webp",
-      "type": "image/jpg",
+      "type": "image/webp",
       "sizes": "1080x2400"
     }
   ]

src/pages/UploadForm/index.tsx

@@ -23,7 +23,11 @@ export const UploadForm = ({ setLoading }: IPageProps) => {
       }
     } catch (err) {
       setLoading(false);
-      setError(err.message);
+
+      if (err instanceof Error)
+        setError(err.message);
+      else 
+        setError(String(err))
     }
   };
 

src/serviceWorker/utils.ts

@@ -8,8 +8,8 @@ export const getHash = (path: string) => {
   return path.substr("/book/".length, hashLength);
 };
 
-export const composeResponseStatus = (err: Error): ResponseInit => {
+export const composeResponseStatus = (err: unknown): ResponseInit => {
-  if (err.name === "NetowrkError")
+  if (err instanceof Error && err.name === "NetowrkError")
     return { status: 503, statusText: err.message };
   else return { status: 500, statusText: "Something bad happened (IDK)" };
 };

src/utils/api.ts

@@ -5,6 +5,11 @@ import { API_URL } from "~/constants";
 export const validState = (file: File | undefined): file is File => {
   if (!file) throw new Error("Book file is required. Please, attach one");
 
+  if (file.name.endsWith(".zip"))
+    throw new Error(
+      "Please, unzip file before sending to reader if it is fb2.zip"
+    )
+
   if (!file.name.match(/\.(fb2|epub)/))
     throw new Error(
       "Wrong file type. Only FB2 and Epub files are supported. \
@@ -34,7 +39,9 @@ export const submitFile = async (
 
     return await res.json();
   } catch (err) {
-    console.error("Network error:", err.message);
+    if (err instanceof Error)
+      console.error("Network error:", err.message);
+      
     throw err;
   }
 };

webpack.config.dev.js

@@ -8,11 +8,10 @@ module.exports = {
   mode: "development",
   watchOptions: { ignored: /node_modules/ },
   devServer: {
-    contentBase: path.join(__dirname, "build"),
+    static: path.join(__dirname, "build"),
     compress: true,
     port: 8080,
     hot: false,
-    inline: false,
     historyApiFallback: {
       index: "index.html",
     },
@@ -20,8 +19,8 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": JSON.stringify("development"),
-      "process.env.PUBLIC_BASE_URL": JSON.stringify("http://localhost:8080"),
       "process.env.PUBLIC_API_URL": JSON.stringify("http://localhost:8081"),
+      "process.env.PUBLIC_BASE_URL": JSON.stringify("http://localhost:8080"),
     }),
     ...webpackConfig.plugins,
   ],

webpack.config.prod.js

@@ -12,12 +12,8 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": JSON.stringify("production"),
-      "process.env.PUBLIC_BASE_URL": JSON.stringify(
+      "process.env.PUBLIC_API_URL": JSON.stringify(process.env.PUBLIC_API_URL),
-        "https://publite.dmitriy.icu"
+      "process.env.PUBLIC_BASE_URL": JSON.stringify(process.env.PUBLIC_BASE_URL),
-      ),
-      "process.env.PUBLIC_API_URL": JSON.stringify(
-        "https://publitebackend.dmitriy.icu"
-      ),
     }),
     ...webpackConfig.plugins,
   ],