Switch to vercel

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Build and Deploy to Netlify
+name: Build and Deploy to Vercel
 
 on:
   push:
@@ -10,24 +10,22 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout code
+        uses: actions/checkout@v2
 
       - name: Install pnpm
         run: npm install -g pnpm
 
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build Project
+      - name: Build
         run: pnpm run build
 
-      - name: Deploy to Netlify
-        uses: nwtgck/[email protected]
+      - name: Deploy to Vercel
+        uses: BetaHuhn/deploy-to-vercel-action@v1
         with:
-          publish-dir: ./dist
-          production-branch: main
-          deploy-message: ${{ github.event.head_commit.message }}
-          github-token: ${{ secrets.GH_TOKEN }}
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

README.md

@@ -37,7 +37,7 @@ You're all set!
 
 ## Discord Community
 
-Feel free to join [IdeaDrawn Discord community](https://discord.gg/ideas) to find a place to connect with others. Anyone is welcome to strike a conversation, lurk, or give suggestions.
+Feel free to join [IdeaDrawn Discord community](https://discord.gg/Up7E6gnkuy) to find a place to connect with others. Anyone is welcome to strike a conversation, lurk, or give suggestions.
 
 ## Contribution
 

api/ssr.js

@@ -0,0 +1,23 @@
+import { renderPage } from "vite-plugin-ssr/server";
+
+export default async function handler(req, res) {
+	const { url } = req;
+
+	if (!url) throw new Error("req.url is undefined");
+
+	const pageContextInit = { urlOriginal: url };
+	const pageContext = await renderPage(pageContextInit);
+	const { httpResponse } = pageContext;
+
+	if (!httpResponse) {
+		res.statusCode = 200;
+		res.end();
+		return;
+	}
+
+	const { body, statusCode, headers } = httpResponse;
+	console.log("Status code: ", statusCode);
+	res.statusCode = statusCode;
+	headers.forEach(([name, value]) => res.setHeader(name, value));
+	res.end(body);
+}

components/Footer/Footer.tsx

@@ -1,7 +1,6 @@
 // Lib
 import logo from "../../assets/icons/IdeaDrawnNewLogo.png";
 import { useState } from "react";
-import Skeleton from "@mui/material/Skeleton";
 
 // Types
 import type { FC } from "react";
@@ -10,7 +9,7 @@ import type { FC } from "react";
 import "./Footer.styles.css";
 
 const Footer: FC = () => {
-	const [VERSION] = useState<string | null>("v1.0.0");
+	const [VERSION] = useState<string | null>("v0.0.1");
 
 	const MAINTAINER_URL = "https://github.com/MarkE16";
 	const REPO_URL = MAINTAINER_URL + "/LiveCanvas";
@@ -39,15 +38,7 @@ const Footer: FC = () => {
 				alt="logo"
 			/>
 			<span id="site-name">IdeaDrawn | Live Canvas</span>
-			<span id="version">
-				{VERSION ?? (
-					<Skeleton
-						sx={{ bgcolor: "grey.800" }}
-						variant="text"
-						width={50}
-					/>
-				)}
-			</span>
+			<span id="version">{VERSION}</span>
 			<span id="footer-text">
 				Made with ❤️ by{" "}
 				<a

package.json

@@ -3,6 +3,7 @@
 		"dev": "npm run server:dev",
 		"prod": "npm run lint && npm run build && npm run server:prod",
 		"build": "vite build",
+		"serve": "vite preview",
 		"test": "vitest --run --silent --reporter=verbose",
 		"coverage": "vitest --coverage",
 		"server": "node --loader ts-node/esm ./server/index.ts",

vercel.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/((?!assets/).*)",
+      "destination": "/api/ssr.js"
+    }
+  ]
+}

vite.config.ts

@@ -4,6 +4,9 @@ import { UserConfig } from "vite";
 
 const config: UserConfig = {
 	plugins: [react(), ssr()],
+	build: {
+		outDir: "dist"
+	}
 };
 
 export default config;