⚡️ Moved frontend build out of server (#273)

SagnikPradhan · vegeta897 · web-flow · commit 2fb779b63c17 · 2021-04-26T12:32:02.000+05:30
* ⚡️ Moved frontend build out of server

* ✏️ Extact -&gt; Extract

* 🔨 Updated root scripts

Co-authored-by: Devin Spikowski &lt;vegeta897@gmail.com&gt;
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,6 @@
 web/source/typings/vendor.d.ts
+web/webpack.config.js
+web/dist/
 
 server/source/prisma/
 
diff --git a/package.json b/package.json
@@ -12,13 +12,15 @@
 		"lint": "eslint .",
 		"format": "prettier --write .",
 		"postinstall": "husky install",
-		"dev": "yarn workspace server dev",
-		"start": "yarn workspace server start"
+		"dev": "concurrently --kill-others \"yarn workspace web dev\" \"yarn workspace server dev\"",
+		"build": "yarn workspace web build"
 	},
 	"devDependencies": {
+		"@types/concurrently": "^6",
 		"@typescript-eslint/eslint-plugin": "latest",
 		"@typescript-eslint/parser": "latest",
 		"@yarnpkg/pnpify": "^2.4.0",
+		"concurrently": "^6.0.2",
 		"eslint": "^7.14.0",
 		"eslint-config-prettier": "^6.15.0",
 		"eslint-plugin-jsdoc": "^30.7.9",
diff --git a/server/package.json b/server/package.json
@@ -6,47 +6,21 @@
 		"dev": "ts-node-dev --ignore-watch \"../web\" ./source/main.ts"
 	},
 	"dependencies": {
-		"@babel/core": "^7.13.16",
-		"@babel/preset-env": "^7.13.15",
-		"@babel/preset-react": "^7.13.13",
-		"@babel/preset-typescript": "^7.13.0",
 		"@prisma/client": "^2.20.1",
-		"autoprefixer": "^10.2.5",
-		"babel-loader": "^8.2.2",
-		"css-loader": "^5.2.4",
 		"dotenv": "^8.2.0",
 		"eris": "^0.15.0",
 		"eventemitter3": "^4.0.7",
-		"fork-ts-checker-webpack-plugin": "^6.2.1",
-		"html-webpack-plugin": "4",
 		"koa": "^2.13.1",
-		"koa-compose": "^4.1.0",
 		"koa-static": "^5.0.0",
-		"koa-webpack": "^6.0.0",
-		"mini-css-extract-plugin": "^1.5.0",
-		"pnp-webpack-plugin": "^1.6.4",
-		"postcss": "^8.2.10",
-		"postcss-loader": "v4",
 		"prisma": "^2.20.1",
 		"socket.io": "^4.0.1",
-		"tailwindcss": "^2.1.1",
 		"tslog": "^3.1.2",
-		"webpack": "4",
 		"webpack-hot-client": "^4.2.0"
 	},
 	"devDependencies": {
-		"@types/babel__core": "^7",
-		"@types/babel__preset-env": "^7",
 		"@types/koa": "^2",
-		"@types/koa-compose": "^3.2.5",
 		"@types/koa-static": "^4.0.1",
-		"@types/koa-webpack": "^6",
-		"@types/mini-css-extract-plugin": "^1",
 		"@types/node": "^14.14.37",
-		"@types/speed-measure-webpack-plugin": "^1",
-		"@types/tailwindcss": "^2",
-		"@types/webpack": "4",
-		"@types/webpack-hot-client": "^4",
 		"ts-node": "^9.1.1",
 		"ts-node-dev": "^1.1.6",
 		"typescript": "^4.1.3"
diff --git a/server/source/http/index.ts b/server/source/http/index.ts
@@ -1,13 +1,8 @@
 import Koa from 'koa'
 import { Logger } from 'tslog'
 
-import { buildMiddleware } from './web'
-
 export const createHTTPServer = async (dev: boolean, logger: Logger) => {
 	const server = new Koa()
-
-	server.use(await buildMiddleware(dev))
-
-	logger.debug('Created koa server')
+	logger.debug('Created koa server', { dev })
 	return server.callback()
 }
diff --git a/server/source/http/web/config.ts b/server/source/http/web/config.ts
diff --git a/server/source/http/web/index.ts b/server/source/http/web/index.ts
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1 @@
-module.exports = {
-	purge: [],
-	darkMode: false,
-	theme: {
-		extend: {},
-	},
-	variants: {},
-	plugins: [],
-}
+module.exports = require('./web/tailwind.config')
diff --git a/web/.babelrc.json b/web/.babelrc.json
@@ -0,0 +1,4 @@
+{
+	"presets": ["@babel/preset-react", "@babel/preset-typescript"],
+	"plugins": ["react-hot-loader/babel"]
+}
diff --git a/web/.postcssrc.js b/web/.postcssrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: [
+		require('autoprefixer'),
+		require('tailwindcss')(require('./tailwind.config')),
+	],
+}
diff --git a/web/package.json b/web/package.json
@@ -2,23 +2,45 @@
 	"name": "web",
 	"version": "0.2.0",
 	"main": "./source/main.tsx",
+	"scripts": {
+		"dev": "webpack serve",
+		"build": "cross-env NODE_ENV=production webpack build"
+	},
 	"dependencies": {
 		"ape-ecs": "^1.3.1",
 		"pixi-cull": "^1.0.0",
 		"pixi-viewport": "^4.18.1",
 		"pixi.js": "^5.3.3",
 		"pixi.js-legacy": "^5.3.7",
 		"react": "^16.8.0",
-		"react-dom": "^16.8.0",
-		"socket.io-client": "^4.0.1",
-		"tailwindcss": "^2.1.1"
+		"react-dom": "npm:@hot-loader/react-dom@^17.0.0",
+		"react-hot-loader": "^4.13.0",
+		"socket.io-client": "^4.0.1"
 	},
 	"devDependencies": {
+		"@babel/core": "^7.13.16",
+		"@babel/preset-react": "^7.13.13",
+		"@babel/preset-typescript": "^7.13.0",
+		"@types/mini-css-extract-plugin": "^1.4.2",
 		"@types/react": "^17.0.0",
 		"@types/react-dom": "^17.0.0",
 		"@types/tailwindcss": "^2",
+		"@types/webpack-dev-server": "^3",
+		"autoprefixer": "^10.2.5",
+		"babel-loader": "^8.2.2",
+		"cross-env": "^7.0.3",
+		"css-loader": "^5.2.4",
+		"fork-ts-checker-webpack-plugin": "^6.2.1",
+		"html-webpack-plugin": "^5.3.1",
+		"mini-css-extract-plugin": "^1.5.0",
+		"postcss": "^8.2.10",
+		"postcss-loader": "^5.2.0",
 		"root": "link:./source",
 		"server": "workspace:server",
-		"typescript": "^4.1.3"
+		"tailwindcss": "^2.1.1",
+		"typescript": "^4.1.3",
+		"webpack": "^5.4.0",
+		"webpack-cli": "^4.6.0",
+		"webpack-dev-server": "^3.11.2"
 	}
 }
diff --git a/web/source/App.tsx b/web/source/App.tsx
@@ -1,7 +1,8 @@
+import { hot } from 'react-hot-loader/root'
 import React from 'react'
 import Game from './components/game'
 
-export const App = () => {
+const App = () => {
 	return (
 		<div className="flex flex-col items-center">
 			<h1 className="m-2 font-bold text-4xl">D Zone</h1>
@@ -10,3 +11,5 @@ export const App = () => {
 		</div>
 	)
 }
+
+export default hot(App)
diff --git a/web/source/main.tsx b/web/source/main.tsx
@@ -1,6 +1,8 @@
 import 'tailwindcss/tailwind.css'
+import 'react-hot-loader'
+
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { App } from './App'
+import App from './App'
 
 ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/web/source/modules/communication/socket.ts b/web/source/modules/communication/socket.ts
@@ -7,10 +7,9 @@ export const useSocket = () => {
 	const socketRef = useRef<Socket | null>(null)
 
 	useEffect(() => {
-		const socket: Socket<
-			ServerEvents,
-			ClientEvents
-		> = (socketRef.current = io())
+		const socket: Socket<ServerEvents, ClientEvents> = (socketRef.current = io({
+			path: '/api/socket.io',
+		}))
 
 		socket.once('connect', () =>
 			socket.emit('joinRequest', '754236248314347530', (connected) =>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+	purge: ['./source/**/*.tsx'],
+	darkMode: false,
+	theme: {
+		extend: {},
+	},
+	variants: {},
+	plugins: [],
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -12,5 +12,6 @@
 		"jsx": "preserve"
 	},
 
-	"include": ["**/*.ts", "**/*.tsx", "**/*.d.ts"]
+	"include": ["./source/**/*.ts", "./source/**/*.tsx", "./source/**/*.d.ts"],
+	"exclude": ["node-modules", "dist", "../server/**/*"]
 }
diff --git a/web/webpack.config.js b/web/webpack.config.js
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +	"presets": ["@babel/preset-react", "@babel/preset-typescript"],
 +	"plugins": ["react-hot-loader/babel"]
 +}