rewrite as react app

ekulno · Jul 21, 2024 · cf87af2 · cf87af2
1 parent a06b595
commit cf87af2
Show file tree

Hide file tree

Showing 34 changed files with 2,112 additions and 358 deletions.
diff --git a/.envrc b/.envrc
@@ -0,0 +1,3 @@
+export RESEND_API_KEY=test
+export [email protected]
+export [email protected]
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -22,11 +22,4 @@ jobs:
           tag_with_ref: true # Info: https://github.com/docker/build-push-action/tree/releases/v1#tag_with_ref
           tag_with_sha: true # Info: https://github.com/docker/build-push-action/tree/releases/v1#tag_with_sha
           tags: ${{ env.GITHUB_REF }}
-  # helm_build_and_publish:
-  #   name: Build and push helm chart
-  #   runs-on: ubuntu-latest
-  #   steps: [  ]
-  # update_gitops:
-  #   name: Update Gitops repo to use latest version
-  #   runs-on: ubuntu-latest
-  #   steps: [  ]
+
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,2 @@
-node_modules
-lib
-tsconfig.tsbuildinfo
-.envrc
+/node_modules
+/build
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,5 @@
-FROM node:21-alpine
+FROM node:22-alpine3.19
+
 
 WORKDIR /usr/src/app
 
@@ -7,11 +8,12 @@ COPY yarn.lock /usr/src/app
 
 RUN yarn
 
+COPY public /usr/src/app/public
 COPY src /usr/src/app/src
-COPY tsconfig.json /usr/src/app
-
-RUN yarn build
+COPY server /usr/src/app/server
+COPY server.tsconfig.json /usr/src/app
+COPY webpack.js /usr/src/app
 
-COPY assets /usr/src/app/assets
+RUN yarn prod:build
 
-CMD node lib/index.js
+CMD node build/server.js
diff --git a/assets/contact.html b/assets/contact.html
diff --git a/assets/index.html b/assets/index.html
diff --git a/assets/style.css b/assets/style.css
diff --git a/assets/thanks.html b/assets/thanks.html
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -0,0 +1,11 @@
+version: '2'
+services:
+  homepage:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      PORT: 3000
+      RESEND_API_KEY: test
+      RESEND_TO_EMAIL: [email protected]
+      RESEND_FROM_EMAIL: [email protected]
diff --git a/docker-compose.yml b/docker-compose.yml
diff --git a/package.json b/package.json
@@ -1,24 +1,44 @@
 {
+  "name": "ekulno-homepage",
+  "version": "0.0.1",
+  "private": true,
   "scripts": {
-    "build": "tsc",
-    "start": "nodemon lib/index.js"
+    "prod:build": "webpack --config webpack.js --mode=production",
+    "prod:start": "node build/server.js",
+    "clean": "rm -rf ./build",
+    "dev:build:watch": "webpack --config webpack.js --mode=development -w",
+    "dev:start": "nodemon --exec 'node' ./build/server.js"
   },
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447",
   "dependencies": {
-    "@types/express": "^4.17.21",
-    "body-parser": "^1.20.2",
-    "email-validator": "^2.0.4",
-    "express": "^4.18.2",
-    "express-async-errors": "^3.1.1",
+    "@types/express": "^4.17.6",
+    "@types/node": "^16.18.102",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router": "^5.1.20",
+    "@types/serialize-javascript": "^1.5.0",
+    "css-loader": "^6.5.1",
+    "express": "^4.17.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "nodemon": "^2.0.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-head": "^3.4.2",
+    "react-hook-form": "^7.52.1",
+    "react-router": "^6.25.1",
+    "react-router-dom": "^6.25.1",
+    "react-schemaorg": "^2.0.0",
     "resend": "^3.4.0",
-    "typescript": "^5.3.3"
-  },
-  "type": "module",
-  "name": "mailer",
-  "version": "0.0.1",
-  "description": "writes an email to a preconfigured address upon receipt of a post request",
-  "main": "lib/index.js",
-  "repository": "https://github.com/ekulno/contact-form-mailer",
-  "author": "ekulno",
-  "license": "MIT",
-  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+    "schema-dts": "^1.1.2",
+    "serialize-javascript": "^3.1.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.2.5",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.5.3",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^5.1.4",
+    "webpack-node-externals": "^1.7.2"
+  }
 }
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+  <body style="margin: 0">
+    <div id="root" style="height: 100vh"></div>
+    <script src="/build/hydrate.js"></script>
+  </body>
+</html>
diff --git a/assets/portrait.png → public/portrait.png b/assets/portrait.png → public/portrait.png
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/readme.md b/readme.md
@@ -1,3 +1,11 @@
 # homepage
 
-Source of my homepage [ekul.no](https://ekul.no). 
+Source of my homepage [ekul.no](https://ekul.no).
+
+## usage
+
+ - dev build: `yarn dev:build:watch` and `yarn dev:start`. 
+ - production build: `yarn prod:build && yarn prod:start`
+ - dockerized production build: `docker compose build && docker compose up`
+
+Application will be available at `http://localhost:3000`
diff --git a/server.tsconfig.json b/server.tsconfig.json
@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+      "target": "es5",
+      "lib": ["dom"],
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "isolatedModules": true,
+      "jsx": "react",
+      "noEmit": false,
+      "sourceMap": true
+    },
+    "include": ["server"]
+  }
diff --git a/server/GenerateClient.ts b/server/GenerateClient.ts
@@ -0,0 +1,29 @@
+import serialize from 'serialize-javascript';
+import path from 'path';
+import fs from 'fs';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+export default <P>(
+  App: React.ReactElement<P>,
+  globalState: string | undefined,
+): Promise<string> => new Promise((resolve, reject) => {
+  const app = ReactDOMServer.renderToString(App);
+
+  const indexFile = path.resolve('./server/index.html');
+  fs.readFile(indexFile, 'utf8', (err, data) => {
+    if (err) {
+      reject(err);
+    }
+    const clientString = data
+    .replace(
+      '<div id="root"></div>', 
+      `<div id="root">${app}</div>`,
+    )
+    .replace(
+      '<head>',
+      `<head><script>window.__INITIAL__DATA__ = ${serialize(globalState)}</script>`,
+    );
+    resolve(clientString);
+  });
+})