From 2cde334f0c6cd6b3a2fed4ad7f8bd96503895769 Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Sat, 26 Dec 2020 16:51:25 +0530 Subject: [PATCH 01/10] initial commit for ssr for login page --- package.json | 8 +++- server/middleware/serverRenderer.js | 62 +++++++++++++++++++++++++++++ server/parser.js | 19 +++++++++ server/ssrServer.js | 15 +++++++ src/redux/auth/reducer.js | 2 +- src/redux/settings/reducer.js | 2 +- src/views/user/login.js | 2 +- 7 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 server/middleware/serverRenderer.js create mode 100644 server/parser.js create mode 100644 server/ssrServer.js diff --git a/package.json b/package.json index d5855ac..2ecdb19 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,10 @@ "description": "Gogo - React Bootstrap 4 Admin Dashboard Template", "private": true, "dependencies": { + "@babel/cli": "^7.12.10", + "@babel/preset-react": "^7.12.10", + "@babel/register": "^7.12.10", + "@babel/runtime": "^7.12.5", "@glidejs/glide": "^3.4.1", "@rodrigogs/mysql-events": "^0.6.0", "@tensorflow/tfjs": "^2.3.0", @@ -91,7 +95,8 @@ "tmp": "^0.2.1", "video.js": "^7.8.4", "yalc": "^1.0.0-pre.42", - "yup": "^0.29.1" + "yup": "^0.29.1", + "ignore-styles": "^5.0.1" }, "scripts": { "start": "react-scripts start", @@ -100,6 +105,7 @@ "eject": "react-scripts eject", "server": "nodemon server/app", "dev": "HTTPS=true concurrently \"npm run server\" \"npm run start\"", + "start-server": "yarn build && cross-env NODE_ENV=development nodemon server/parser", "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "precommit": "lint-staged" diff --git a/server/middleware/serverRenderer.js b/server/middleware/serverRenderer.js new file mode 100644 index 0000000..acd52e3 --- /dev/null +++ b/server/middleware/serverRenderer.js @@ -0,0 +1,62 @@ +const path = require('path') +const fs = require('fs') + +const React = require('react') +const {Provider} = require('react-redux') +const {renderToString} = require('react-dom/server') +const {StaticRouter} = require('react-router-dom') +import { IntlProvider } from 'react-intl'; +import { createMemoryHistory } from 'history'; + +const history = createMemoryHistory(); + +const { configureStore } = require('../../src/redux/store') +const Login = require('../../src/views/user/login').default +import enLang from '../../src/lang/entries/en-US'; + + +module.exports = function serverRenderer(req, res, next) { + if(req._possible404){ + res.sendFile(path.join(__dirname, '..', '..','build', 'index.html')); + } else { + if(req.path == "/user/login") { + const filePath = path.resolve(__dirname, '..', '..', 'build', 'index.html'); + + fs.readFile(filePath, 'utf8', (err, htmlData)=>{ + if (err) { + console.error('read err', err) + return res.status(404).end() + } + const context = {} + const store = configureStore(); + const markup = renderToString( + + <> + + + + + + + + ) + + if (context.url) { + // Somewhere a `` was rendered + res.redirect(301, context.url) + } else { + // we're good, send the response + const RenderedApp = htmlData.replace('
', `
${markup}
`) + res.send(RenderedApp) + } + }) + } else { + req._possible404 = true; + //res.sendFile(path.join(__dirname, '..', '..','build', 'index.html')); + return next(); + } + } +} \ No newline at end of file diff --git a/server/parser.js b/server/parser.js new file mode 100644 index 0000000..2205094 --- /dev/null +++ b/server/parser.js @@ -0,0 +1,19 @@ +require('ignore-styles'); +require('@babel/register')({ + ignore: [ /\/(build|node_modules)\// ], + presets: [ + '@babel/preset-env', + '@babel/preset-react', + ], + plugins: [ + ['@babel/transform-runtime'], + [ + '@babel/plugin-proposal-class-properties', + { + "loose": true + } + ] + ] +}); + +require('./ssrServer'); \ No newline at end of file diff --git a/server/ssrServer.js b/server/ssrServer.js new file mode 100644 index 0000000..89ef319 --- /dev/null +++ b/server/ssrServer.js @@ -0,0 +1,15 @@ +const express = require('express'); +const path = require('path'); +const serverRenderer = require('./middleware/serverRenderer'); + +const PORT = 3000; + +const ssrApp = express(); + +ssrApp.get('/*', serverRenderer); + +ssrApp.use(express.static(path.resolve(__dirname, '..', 'build'))); + +ssrApp.use(serverRenderer); + +ssrApp.listen(PORT, () => console.log(`Client listening on port ${PORT}!`)); \ No newline at end of file diff --git a/src/redux/auth/reducer.js b/src/redux/auth/reducer.js index 86e349c..6cc5906 100644 --- a/src/redux/auth/reducer.js +++ b/src/redux/auth/reducer.js @@ -15,7 +15,7 @@ import { } from '../actions'; const INIT_STATE = { - user: localStorage.getItem('user_id'), + user: typeof localStorage == 'undefined' ? '' : localStorage.getItem('user_id'), forgotUserMail: '', newPassword: '', resetPasswordCode: '', diff --git a/src/redux/settings/reducer.js b/src/redux/settings/reducer.js index 387f24b..d425594 100644 --- a/src/redux/settings/reducer.js +++ b/src/redux/settings/reducer.js @@ -5,7 +5,7 @@ import { } from '../actions'; const INIT_STATE = { - locale: (localStorage.getItem('currentLanguage') && localeOptions.filter(x => x.id === localStorage.getItem('currentLanguage')).length > 0) ? localStorage.getItem('currentLanguage') : defaultLocale, + locale: typeof localStorage == 'undefined' ? 'en' : ((localStorage.getItem('currentLanguage') && localeOptions.filter(x => x.id === localStorage.getItem('currentLanguage')).length > 0) ? localStorage.getItem('currentLanguage') : defaultLocale), }; export default (state = INIT_STATE, action) => { diff --git a/src/views/user/login.js b/src/views/user/login.js index 9c766b8..348c9d9 100644 --- a/src/views/user/login.js +++ b/src/views/user/login.js @@ -72,7 +72,7 @@ class Login extends Component { } render() { - let host = `https://${window.location.host}`; + let host = typeof window == 'undefined' ? `https://${this.props.serverRequest.headers.host}` : `https://${window.location.host}`; if (host.indexOf(3000) !== -1) { host = host.replace('3000', '3001').replace('https', 'http'); } From 93fdc6968b595c74370db6b4e1ff6201a1d372a6 Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Tue, 29 Dec 2020 15:48:17 +0530 Subject: [PATCH 02/10] switching from yarn to npm and add single command --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2ecdb19..b387fef 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,8 @@ "eject": "react-scripts eject", "server": "nodemon server/app", "dev": "HTTPS=true concurrently \"npm run server\" \"npm run start\"", - "start-server": "yarn build && cross-env NODE_ENV=development nodemon server/parser", + "start-server": "npm build && cross-env NODE_ENV=development nodemon server/parser", + "ssr-dev": "HTTPS=true concurrently \"npm run server\" \"npm run start-server\"", "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "precommit": "lint-staged" From 7ccbfbb61ad51009bfeb48901bea8dd5fcc02743 Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Tue, 29 Dec 2020 15:57:34 +0530 Subject: [PATCH 03/10] fixing command to create build --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b387fef..1ec7f34 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "eject": "react-scripts eject", "server": "nodemon server/app", "dev": "HTTPS=true concurrently \"npm run server\" \"npm run start\"", - "start-server": "npm build && cross-env NODE_ENV=development nodemon server/parser", + "start-server": "npm run build && cross-env NODE_ENV=development nodemon server/parser", "ssr-dev": "HTTPS=true concurrently \"npm run server\" \"npm run start-server\"", "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", From 07da3b4e60f34d9303933e5d0e29b86da40fbe7e Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Tue, 29 Dec 2020 20:40:58 +0530 Subject: [PATCH 04/10] position of ssr in html file --- server/middleware/serverRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/middleware/serverRenderer.js b/server/middleware/serverRenderer.js index acd52e3..c611135 100644 --- a/server/middleware/serverRenderer.js +++ b/server/middleware/serverRenderer.js @@ -49,7 +49,7 @@ module.exports = function serverRenderer(req, res, next) { res.redirect(301, context.url) } else { // we're good, send the response - const RenderedApp = htmlData.replace('
', `
${markup}
`) + const RenderedApp = htmlData.replace('
', `${markup}`) res.send(RenderedApp) } }) From f81cff2c23fc91e0c81d6654e73a2fc5648e2fca Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Tue, 29 Dec 2020 21:09:05 +0530 Subject: [PATCH 05/10] enabling https on client by using self signed certificate --- server/ssrServer.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/server/ssrServer.js b/server/ssrServer.js index 89ef319..f850632 100644 --- a/server/ssrServer.js +++ b/server/ssrServer.js @@ -1,5 +1,7 @@ const express = require('express'); const path = require('path'); +const fs = require('fs'); +const https = require('https'); const serverRenderer = require('./middleware/serverRenderer'); const PORT = 3000; @@ -12,4 +14,9 @@ ssrApp.use(express.static(path.resolve(__dirname, '..', 'build'))); ssrApp.use(serverRenderer); -ssrApp.listen(PORT, () => console.log(`Client listening on port ${PORT}!`)); \ No newline at end of file +const httpsServer = https.createServer({ + key: fs.readFileSync(__dirname + '/server.key'), + cert: fs.readFileSync(__dirname + '/server.cert') +}, ssrApp); + +httpsServer.listen(PORT, () => console.log(`Client listening on port ${PORT}!`)); \ No newline at end of file From 0c540894ca235a3453a7b387045590ba59e5e7ed Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Tue, 29 Dec 2020 21:09:33 +0530 Subject: [PATCH 06/10] self signed certificate keys --- server/server.cert | 16 ++++++++++++++++ server/server.key | 15 +++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 server/server.cert create mode 100644 server/server.key diff --git a/server/server.cert b/server/server.cert new file mode 100644 index 0000000..d11aa5c --- /dev/null +++ b/server/server.cert @@ -0,0 +1,16 @@ +-----BEGIN CERTIFICATE----- +MIIClTCCAf6gAwIBAgIJAJvkiXzGlK/RMA0GCSqGSIb3DQEBBQUAMDwxCzAJBgNV +BAYTAklOMQwwCgYDVQQIEwNBQkMxDDAKBgNVBAcTA0FCQzERMA8GA1UEChMIb3Bl +eGZsb3cwHhcNMjAxMjI5MTM1ODE1WhcNMjEwMTI4MTM1ODE1WjA8MQswCQYDVQQG +EwJJTjEMMAoGA1UECBMDQUJDMQwwCgYDVQQHEwNBQkMxETAPBgNVBAoTCG9wZXhm +bG93MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDgXNmOJ/VJ/LCywLhx5kqD +7ShSZ9sPkUWDXLBkaKtrkdarIIRuFghzwh74Fbwk++G0rHw51luNZnx80+jZyYt6 +M+NMO3yqENc8upIfGmZV1YNqdB73PRvYIQA42U5D6z2eNzgXq1v14kGKPAlxQHob +rVyPSJzkYxUQoJZfM0GGEQIDAQABo4GeMIGbMB0GA1UdDgQWBBR2kizL+BGMcDJY +BzJ699f1wcQs9TBsBgNVHSMEZTBjgBR2kizL+BGMcDJYBzJ699f1wcQs9aFApD4w +PDELMAkGA1UEBhMCSU4xDDAKBgNVBAgTA0FCQzEMMAoGA1UEBxMDQUJDMREwDwYD +VQQKEwhvcGV4Zmxvd4IJAJvkiXzGlK/RMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcN +AQEFBQADgYEAEI8Cj47WYYHEgxLjjbRXEZtB4vX5yRuMFyrgLsmlUghrBoG7EEiB +WAODThW4D+X3rhYIYKKVKobyN6ZjX9zqGcSgpXEQTm5c9kFIMctZdYgrDAQBb3lY +hOvkRbmxKZU3ZshUrIi9vAsb6yqcUdX0FziWyWLbbK5yYdg0wGxU3jU= +-----END CERTIFICATE----- diff --git a/server/server.key b/server/server.key new file mode 100644 index 0000000..49785da --- /dev/null +++ b/server/server.key @@ -0,0 +1,15 @@ +-----BEGIN RSA PRIVATE KEY----- +MIICXAIBAAKBgQDgXNmOJ/VJ/LCywLhx5kqD7ShSZ9sPkUWDXLBkaKtrkdarIIRu +Fghzwh74Fbwk++G0rHw51luNZnx80+jZyYt6M+NMO3yqENc8upIfGmZV1YNqdB73 +PRvYIQA42U5D6z2eNzgXq1v14kGKPAlxQHobrVyPSJzkYxUQoJZfM0GGEQIDAQAB +AoGAFcGLKxi+1VzWeY7sk8bkBOTzWwJNILZSiklrpWDs9nJe4Zs2nEIwsaDqRd49 +r0xpd46eQTGDETQV8DjQRIYhqxptm2A2Vzs8knDCOTjTFqvJb89WWI1G2vY+pG1S +trkFhKdS3I1C7ffghN21n6Pggryzzug0FWwUpdOlw4LGqV0CQQD0wBTGVcLjRo4d +OjL0+tBbEhOjuY2YpWIxPAtOMPJvuugXwX/FfKCJo4g2jFHiFFqJPzlM/QYa/r/n +j3B6W+67AkEA6qzfUz6xS8kXdWVguVPa7I+RWs2W751nrBs+Qym5Q0P2lRwfSPMk +u2mRyHru40krPRF30gMkKpjWNaO/sKG/owJAXlaPa2dxKENw0ck2DQGEQCY2lbwW +3QiaUZnwTaJGQFTN0yJNiqSgCI2VGll50mfAAfjxsEAzE0KwW6QJWdCHswJBAKpJ +BMg/7qDiaz5JcNUp7urHBp9QHV0D581v+077AK65qzzpqh3iKN5BLYK/CYctec2X +Vk2y79RlENLdXmRKCmcCQG6Wtk8wgGTNkRscL7Mvc9J+k21N1EjcHGWcGDOgNJhV +JvrAQdaVstdKBtz9nA1j7W4pMAX88Okv5sdANAMkXAA= +-----END RSA PRIVATE KEY----- From 4af0e68be35550c664419ce63b0999a5cd4c329b Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Tue, 29 Dec 2020 21:16:11 +0530 Subject: [PATCH 07/10] defining scripts to run ssr --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1ec7f34..356de2e 100644 --- a/package.json +++ b/package.json @@ -105,8 +105,8 @@ "eject": "react-scripts eject", "server": "nodemon server/app", "dev": "HTTPS=true concurrently \"npm run server\" \"npm run start\"", - "start-server": "npm run build && cross-env NODE_ENV=development nodemon server/parser", - "ssr-dev": "HTTPS=true concurrently \"npm run server\" \"npm run start-server\"", + "start-ssr-server": "nodemon server/parser", + "ssr-dev": "HTTPS=true concurrently \"npm run server\" \"npm run start-ssr-server\"", "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "precommit": "lint-staged" From d6620b0d72675aa4ee9e03bed77cf06fe29e8662 Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Tue, 29 Dec 2020 22:06:22 +0530 Subject: [PATCH 08/10] saving https dependecy module --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 356de2e..a9700ec 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,8 @@ "firebase": "^7.16.0", "formik": "^2.1.4", "http": "0.0.1-security", + "https": "^1.0.0", + "ignore-styles": "^5.0.1", "moment": "2.27.0", "mousetrap": "^1.6.5", "mysql": "^2.18.1", @@ -95,8 +97,7 @@ "tmp": "^0.2.1", "video.js": "^7.8.4", "yalc": "^1.0.0-pre.42", - "yup": "^0.29.1", - "ignore-styles": "^5.0.1" + "yup": "^0.29.1" }, "scripts": { "start": "react-scripts start", From 322a046b7da575f0afb1f015f09e2d984feaca73 Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Wed, 30 Dec 2020 00:18:34 +0530 Subject: [PATCH 09/10] folder restructure for ssr --- package.json | 4 ++-- server/{ => ssr}/middleware/serverRenderer.js | 12 ++++++------ server/{ => ssr}/parser.js | 0 server/{ => ssr/security}/server.cert | 0 server/{ => ssr/security}/server.key | 0 server/{ => ssr}/ssrServer.js | 6 +++--- 6 files changed, 11 insertions(+), 11 deletions(-) rename server/{ => ssr}/middleware/serverRenderer.js (78%) rename server/{ => ssr}/parser.js (100%) rename server/{ => ssr/security}/server.cert (100%) rename server/{ => ssr/security}/server.key (100%) rename server/{ => ssr}/ssrServer.js (68%) diff --git a/package.json b/package.json index a9700ec..030f981 100644 --- a/package.json +++ b/package.json @@ -106,8 +106,8 @@ "eject": "react-scripts eject", "server": "nodemon server/app", "dev": "HTTPS=true concurrently \"npm run server\" \"npm run start\"", - "start-ssr-server": "nodemon server/parser", - "ssr-dev": "HTTPS=true concurrently \"npm run server\" \"npm run start-ssr-server\"", + "start-ssr-server": "nodemon server/ssr/parser", + "ssr-dev": "cross-env HTTPS=true concurrently \"npm run server\" \"npm run start-ssr-server\"", "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "precommit": "lint-staged" diff --git a/server/middleware/serverRenderer.js b/server/ssr/middleware/serverRenderer.js similarity index 78% rename from server/middleware/serverRenderer.js rename to server/ssr/middleware/serverRenderer.js index c611135..b90269e 100644 --- a/server/middleware/serverRenderer.js +++ b/server/ssr/middleware/serverRenderer.js @@ -10,17 +10,17 @@ import { createMemoryHistory } from 'history'; const history = createMemoryHistory(); -const { configureStore } = require('../../src/redux/store') -const Login = require('../../src/views/user/login').default -import enLang from '../../src/lang/entries/en-US'; +const { configureStore } = require('../../../src/redux/store') +const Login = require('../../../src/views/user/login').default +import enLang from '../../../src/lang/entries/en-US'; module.exports = function serverRenderer(req, res, next) { if(req._possible404){ - res.sendFile(path.join(__dirname, '..', '..','build', 'index.html')); + res.sendFile(path.join(__dirname, '..', '..', '..', 'build', 'index.html')); } else { if(req.path == "/user/login") { - const filePath = path.resolve(__dirname, '..', '..', 'build', 'index.html'); + const filePath = path.resolve(__dirname, '..', '..', '..', 'build', 'index.html'); fs.readFile(filePath, 'utf8', (err, htmlData)=>{ if (err) { @@ -55,7 +55,7 @@ module.exports = function serverRenderer(req, res, next) { }) } else { req._possible404 = true; - //res.sendFile(path.join(__dirname, '..', '..','build', 'index.html')); + //res.sendFile(path.join(__dirname, '..', '..', '..','build', 'index.html')); return next(); } } diff --git a/server/parser.js b/server/ssr/parser.js similarity index 100% rename from server/parser.js rename to server/ssr/parser.js diff --git a/server/server.cert b/server/ssr/security/server.cert similarity index 100% rename from server/server.cert rename to server/ssr/security/server.cert diff --git a/server/server.key b/server/ssr/security/server.key similarity index 100% rename from server/server.key rename to server/ssr/security/server.key diff --git a/server/ssrServer.js b/server/ssr/ssrServer.js similarity index 68% rename from server/ssrServer.js rename to server/ssr/ssrServer.js index f850632..477c2f0 100644 --- a/server/ssrServer.js +++ b/server/ssr/ssrServer.js @@ -10,13 +10,13 @@ const ssrApp = express(); ssrApp.get('/*', serverRenderer); -ssrApp.use(express.static(path.resolve(__dirname, '..', 'build'))); +ssrApp.use(express.static(path.resolve(__dirname, '..', '..', 'build'))); ssrApp.use(serverRenderer); const httpsServer = https.createServer({ - key: fs.readFileSync(__dirname + '/server.key'), - cert: fs.readFileSync(__dirname + '/server.cert') + key: fs.readFileSync(__dirname + '/security/server.key'), + cert: fs.readFileSync(__dirname + '/security/server.cert') }, ssrApp); httpsServer.listen(PORT, () => console.log(`Client listening on port ${PORT}!`)); \ No newline at end of file From 050e2a67dbaddd624f13ad7d7d768c6974f8894f Mon Sep 17 00:00:00 2001 From: Deepak-Lalwani Date: Wed, 30 Dec 2020 00:19:29 +0530 Subject: [PATCH 10/10] fixing table name for order book --- server/api/orderBook.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/api/orderBook.js b/server/api/orderBook.js index cdb54b6..8745945 100644 --- a/server/api/orderBook.js +++ b/server/api/orderBook.js @@ -26,7 +26,7 @@ const monitorOrderBookDB = async (pool, io) => { statement: MySQLEvents.STATEMENTS.ALL, // all type of operations, for insert alone MySQLEvents.STATEMENTS.INSERT, onEvent: () => { let result; - pool.query('SELECT glass from history_siz0 ORDER BY id DESC LIMIT 1', (err, rows) => { + pool.query('SELECT glass from history_si ORDER BY id DESC LIMIT 1', (err, rows) => { if (err) { return res.end('{}'); } @@ -60,7 +60,7 @@ router.get('/', (req, res) => { console.log('Connection Established, Monitoring DB for any change.'), ) .catch(console.error); - pool.query('SELECT glass from history_siz0 ORDER BY id DESC LIMIT 1', (err, rows) => { + pool.query('SELECT glass from history_si ORDER BY id DESC LIMIT 1', (err, rows) => { if (err) { console.log('err is', err); return res.end('{}');