Merge pull request #97 from shut56/dev

Update libs
ovasylenko · Aug 7, 2022 · cc057fa · cc057fa
2 parents 397ba80 + eaf8405
commit cc057fa
Show file tree

Hide file tree

Showing 10 changed files with 4,023 additions and 6,139 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn run lint && yarn test
+yarn run lint
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn run lint && yarn test
+yarn run test
diff --git a/client/components/dummy-view.jsx b/client/components/dummy-view.jsx
@@ -5,7 +5,7 @@ const Dummy = () => (
   <>
     <Head title="Hello" />
     <div className="flex justify-center items-center h-screen">
-      <div className="flex flex-col justify-center bg-neutral-900 p-10 rounded-xl select-none">
+      <div className="flex flex-col justify-center bg-indigo-800 p-10 rounded-xl select-none">
         <img alt="wave" src="images/logo-new-text.png" />
         <span className="text-white text-right font-semibold">Boilerplate</span>
       </div>

diff --git a/client/html.js b/client/html.js
@@ -2,15 +2,15 @@
 const Html = ({ body }) => {
   return `
   <!DOCTYPE html>
-  <html>
+  <html lang="en">
     <head>
       <meta charset="UTF-8">
-      <link rel="stylesheet" type="text/css" href="/css/main.css" />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="viewport" content="width=device-width,initial-scale=1" />
+      <script defer="defer" src="/js/main.bundle.js?v=COMMITHASH1"></script>
+      <link href="/css/main.css" rel="stylesheet">
     </head>
     <body>
-      <div id="root">separator</div>
-      <script type="text/javascript" src="/js/main.bundle.js?v=COMMITHASH"></script>
+      <div id="root"></div>
     </body>
   </html>
 `

diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="/css/main.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body>
@@ -12,7 +11,5 @@
       IT IS NOT PRODUCTION
     -->
     <div id="root"></div>
-
-    <script type="text/javascript" src="/js/main.bundle.js?v=COMMITHASH1"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "boilerplate-skillcrucial",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "description": "Boilerplate SkillCrucial",
     "main": "index.js",
     "scripts": {
@@ -22,8 +22,8 @@
         "watch:server": "nodemon --legacy-watch start.js --watch server --watch client --exec \"npm run lint:server  --scripts-prepend-node-path && node\"",
         "build:prod": "cross-env NODE_ENV=production webpack --config webpack.production.config.js --progress --profile --color",
         "build:ssr": "cross-env NODE_ENV=production webpack --config webpack.ssr.config.js --progress --profile --color",
-        "build": "yarn run build:prod && yarn run build:ssr",
-        "heroku-postbuild": "yarn run build:prod && yarn run build:ssr",
+        "build": "yarn run build:prod",
+        "heroku-postbuild": "yarn run build:prod",
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook",
         "prepare": "husky install"
@@ -49,105 +49,107 @@
         }
     },
     "dependencies": {
-        "@babel/cli": "^7.16.0",
-        "@babel/core": "^7.16.5",
-        "@babel/eslint-parser": "^7.16.5",
-        "@babel/plugin-proposal-class-properties": "^7.16.5",
-        "@babel/plugin-proposal-decorators": "^7.16.5",
-        "@babel/plugin-proposal-export-default-from": "^7.16.5",
-        "@babel/plugin-proposal-export-namespace-from": "^7.16.5",
-        "@babel/plugin-proposal-function-sent": "^7.16.5",
-        "@babel/plugin-proposal-json-strings": "^7.16.5",
-        "@babel/plugin-proposal-numeric-separator": "^7.16.5",
-        "@babel/plugin-proposal-throw-expressions": "^7.16.5",
+        "@babel/cli": "^7.17.10",
+        "@babel/core": "^7.18.2",
+        "@babel/eslint-parser": "^7.18.2",
+        "@babel/plugin-proposal-class-properties": "^7.17.12",
+        "@babel/plugin-proposal-decorators": "^7.18.2",
+        "@babel/plugin-proposal-export-default-from": "^7.17.12",
+        "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
+        "@babel/plugin-proposal-function-sent": "^7.18.2",
+        "@babel/plugin-proposal-json-strings": "^7.17.12",
+        "@babel/plugin-proposal-numeric-separator": "^7.16.7",
+        "@babel/plugin-proposal-throw-expressions": "^7.16.7",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-transform-runtime": "^7.16.5",
-        "@babel/preset-env": "^7.16.5",
-        "@babel/preset-flow": "^7.16.5",
-        "@babel/preset-react": "^7.16.5",
+        "@babel/plugin-transform-runtime": "^7.18.2",
+        "@babel/preset-env": "^7.18.2",
+        "@babel/preset-flow": "^7.17.12",
+        "@babel/preset-react": "^7.17.12",
         "@babel/preset-stage-3": "^7.8.3",
-        "@babel/preset-typescript": "^7.16.5",
-        "@babel/register": "^7.16.5",
-        "@babel/runtime": "^7.16.5",
-        "@emotion/babel-plugin": "^11.7.1",
+        "@babel/preset-typescript": "^7.17.12",
+        "@babel/register": "^7.17.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.9.2",
         "babel-core": "7.0.0-bridge.0",
         "babel-eslint": "10.1.0",
-        "babel-jest": "^27.4.5",
-        "babel-loader": "^8.2.3",
+        "babel-jest": "^28.1.1",
+        "babel-loader": "^8.2.5",
         "babel-plugin-css-modules-transform": "^1.6.2",
         "babel-polyfill": "^6.26.0",
         "classnames": "^2.3.1",
         "colors": "^1.4.0",
         "connected-react-router": "^6.9.2",
         "cookie-parser": "^1.4.6",
-        "core-js": "^3.20.0",
+        "core-js": "^3.22.8",
         "cors": "^2.8.5",
         "cross-env": "^7.0.3",
-        "dotenv": "^10.0.0",
-        "express": "^4.17.2",
-        "history": "^4.10.1",
-        "prop-types": "^15.7.2",
+        "dotenv": "^16.0.1",
+        "express": "^4.18.1",
+        "history": "4.10.1",
+        "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-helmet": "^6.1.0",
         "react-redux": "^7.2.6",
         "react-refresh": "^0.11.0",
         "react-router-dom": "5.3.0",
-        "redux": "^4.1.2",
+        "redux": "^4.2.0",
         "redux-devtools-extension": "^2.13.9",
         "redux-thunk": "^2.4.1",
         "sockjs": "^0.3.24",
-        "sockjs-client": "^1.5.2",
+        "sockjs-client": "^1.6.1",
         "string-replace-webpack-plugin": "^0.1.3",
         "uuid": "^8.3.2"
     },
     "devDependencies": {
-        "@hot-loader/react-dom": "^17.0.1",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-        "autoprefixer": "^10.4.0",
-        "copy-webpack-plugin": "^10.2.0",
-        "css-loader": "^6.5.1",
-        "css-minimizer-webpack-plugin": "^3.3.0",
-        "cssnano": "^5.0.14",
+        "@hot-loader/react-dom": "^17.0.2",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+        "autoprefixer": "^10.4.7",
+        "clean-webpack-plugin": "^4.0.0",
+        "copy-webpack-plugin": "^11.0.0",
+        "css-loader": "^6.7.1",
+        "css-minimizer-webpack-plugin": "^4.0.0",
+        "cssnano": "^5.1.11",
         "emotion-theming": "^11.0.0",
-        "eslint": "^8.5.0",
-        "eslint-config-airbnb": "^19.0.2",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-import": "^2.25.3",
+        "eslint": "^8.17.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-react": "^7.27.1",
-        "eslint-plugin-react-hooks": "^4.3.0",
+        "eslint-plugin-react": "^7.30.0",
+        "eslint-plugin-react-hooks": "^4.5.0",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "6.2.0",
         "git-revision-webpack-plugin": "^5.0.0",
-        "glob": "^7.2.0",
+        "glob": "^8.0.3",
         "hard-source-webpack-plugin": "^0.13.1",
-        "husky": "^7.0.0",
-        "image-webpack-loader": "^8.0.1",
-        "jest": "^27.4.5",
-        "jest-cli": "^27.4.5",
-        "mini-css-extract-plugin": "^2.4.5",
-        "node-hot-loader": "^1.21.5",
-        "node-sass": "^6.0.1",
-        "nodemon": "^2.0.15",
-        "postcss": "^8.4.5",
-        "postcss-import": "^14.0.2",
-        "postcss-loader": "^6.2.1",
-        "postcss-preset-env": "^7.0.2",
-        "prettier": "^2.5.1",
+        "html-webpack-plugin": "^5.5.0",
+        "husky": "^8.0.1",
+        "image-webpack-loader": "^8.1.0",
+        "jest": "^28.1.1",
+        "jest-cli": "^28.1.1",
+        "mini-css-extract-plugin": "^2.6.0",
+        "node-hot-loader": "^1.21.8",
+        "node-sass": "^7.0.1",
+        "nodemon": "^2.0.16",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "postcss-loader": "^7.0.0",
+        "postcss-preset-env": "^7.7.1",
+        "prettier": "^2.6.2",
         "raw-loader": "^4.0.2",
         "regenerator-runtime": "^0.13.9",
         "rimraf": "3.0.2",
-        "sass-loader": "^12.4.0",
+        "sass-loader": "^13.0.0",
         "style-loader": "^3.3.1",
-        "tailwindcss": "^3.0.7",
-        "terser-webpack-plugin": "^5.3.0",
+        "tailwindcss": "^3.0.24",
+        "terser-webpack-plugin": "^5.3.3",
         "thread-loader": "^3.0.4",
         "url-loader": "4.1.1",
-        "webpack": "^5.65.0",
-        "webpack-cli": "^4.9.1",
+        "webpack": "^5.73.0",
+        "webpack-cli": "^4.9.2",
         "webpack-dev-server": "3.11.3",
         "webpack-node-externals": "^3.0.0",
         "webpack-shell-plugin": "^0.5.0"

diff --git a/server/server.js b/server/server.js
@@ -2,66 +2,51 @@ import express from 'express'
 import path from 'path'
 import cors from 'cors'
 import sockjs from 'sockjs'
-import { renderToStaticNodeStream } from 'react-dom/server'
-import React from 'react'
-
 import cookieParser from 'cookie-parser'
+
 import config from './config'
 import Html from '../client/html'
 
 require('colors')
 
-let Root
-try {
-  // eslint-disable-next-line import/no-unresolved
-  Root = require('../dist/assets/js/ssr/root.bundle').default
-} catch {
-  console.log('SSR not found. Please run "yarn run build:ssr"'.red)
-}
-
 let connections = []
 
 const port = process.env.PORT || 8090
 const server = express()
 
 const middleware = [
   cors(),
-  express.static(path.resolve(__dirname, '../dist/assets')),
+  express.static(path.resolve(__dirname, '../dist')),
   express.urlencoded({ limit: '50mb', extended: true, parameterLimit: 50000 }),
   express.json({ limit: '50mb', extended: true }),
   cookieParser()
 ]
 
 middleware.forEach((it) => server.use(it))
 
-server.use('/api/', (req, res) => {
-  res.status(404)
-  res.end()
+server.get('/', (req, res) => {
+  res.send(`
+    <h2>This is SkillCrucial Express Server!</h2>
+    <h3>Client hosted at <a href="http://localhost:8087">localhost:8087</a>!</h3>
+  `)
 })
 
-const [htmlStart, htmlEnd] = Html({
-  body: 'separator',
-  title: 'Skillcrucial'
-}).split('separator')
+server.get('/*', (req, res) => {
+  const initialState = {
+    location: req.url
+  }
 
-server.get('/', (req, res) => {
-  const appStream = renderToStaticNodeStream(<Root location={req.url} context={{}} />)
-  res.write(htmlStart)
-  appStream.pipe(res, { end: false })
-  appStream.on('end', () => {
-    res.write(htmlEnd)
-    res.end()
-  })
+  return res.send(
+    Html({
+      body: '',
+      initialState
+    })
+  )
 })
 
-server.get('/*', (req, res) => {
-  const appStream = renderToStaticNodeStream(<Root location={req.url} context={{}} />)
-  res.write(htmlStart)
-  appStream.pipe(res, { end: false })
-  appStream.on('end', () => {
-    res.write(htmlEnd)
-    res.end()
-  })
+server.use('/api/', (req, res) => {
+  res.status(404)
+  res.end()
 })
 
 const app = server.listen(port)