From 4b07ec371721b5f710255491cdbde9ce8adf7161 Mon Sep 17 00:00:00 2001 From: jdonis Date: Fri, 21 Apr 2023 19:40:26 -0400 Subject: [PATCH 1/5] first test --- package.json | 5 ++- src/App1.js | 17 ++++++++ src/Home.js | 13 ++++++ src/Product.js | 15 +++++++ src/index.js | 62 +++++++++++++++++++-------- src/pages/LandingPage.js | 20 ++++----- src/server/index.js | 8 ++++ src/server/server.js | 60 ++++++++++++++++++++++++++ yarn.lock | 91 +++++++++++++++++++++++++++++++++------- 9 files changed, 247 insertions(+), 44 deletions(-) create mode 100644 src/App1.js create mode 100644 src/Home.js create mode 100644 src/Product.js create mode 100644 src/server/index.js create mode 100644 src/server/server.js diff --git a/package.json b/package.json index 68d0707..4b860d2 100644 --- a/package.json +++ b/package.json @@ -28,12 +28,14 @@ "chart.js": "^3.2.1", "chokidar": "^3.3.1", "create-react-app": "^5.0.1", + "express": "^4.18.2", "inputmask": "^5.0.5", "jquery": "^3.3.1", "moment": "^2.27.0", "moment-timezone": "^0.5.31", "node-quill-converter": "^0.3.3", "node-sass": "^8.0.0", + "path": "^0.12.7", "popper.js": "^1.14.7", "query-string": "^6.13.2", "quill": "^1.3.7", @@ -53,8 +55,9 @@ "yarn": "^1.13.0" }, "devDependencies": { - "@babel/core": "^7.8.3", + "@babel/core": "^7.21.4", "@babel/preset-env": "^7.8.3", + "@babel/register": "^7.21.0", "@testing-library/react": "^14.0.0", "babel-loader": "8.0.6", "copy-webpack-plugin": "^11.0.0", diff --git a/src/App1.js b/src/App1.js new file mode 100644 index 0000000..bd61b0b --- /dev/null +++ b/src/App1.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Switch, Route } from 'react-router-dom'; +import Home from './Home'; +//import Contact from './Contact'; +import Product from './Product'; + +function App() { + return ( + + + + + + ); +} + +export default App; \ No newline at end of file diff --git a/src/Home.js b/src/Home.js new file mode 100644 index 0000000..1031639 --- /dev/null +++ b/src/Home.js @@ -0,0 +1,13 @@ +// Home.js +import React from 'react'; + +function Home() { + return ( +
+

Home Page

+

Welcome to my app!

+
+ ); +} + +export default Home; \ No newline at end of file diff --git a/src/Product.js b/src/Product.js new file mode 100644 index 0000000..c66210e --- /dev/null +++ b/src/Product.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { useParams } from 'react-router-dom'; + +function Product() { + const { productId } = useParams(); + + return ( +
+

Product {productId}

+

Details about product {productId} go here...

+
+ ); +} + +export default Product; \ No newline at end of file diff --git a/src/index.js b/src/index.js index c03f84a..ab20206 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import queryString from 'query-string' import { BrowserRouter, Redirect, Route, Router, Switch, useLocation } from "react-router-dom"; -import { IndexRoutes } from "./routes/index"; -import * as serviceWorker from './serviceWorker'; +// import { IndexRoutes } from "./routes/index"; +// import * as serviceWorker from './serviceWorker'; import { useTracking } from './useTracking' import { ApiUrlContext } from "./ApiUrlContext" @@ -48,14 +48,14 @@ const Application = () => { } -const renderRouter = () => ( +const renderRouter1 = () => ( - {/* */} + @@ -65,27 +65,55 @@ const renderRouter = () => ( - {/* - */} + {/* */} ) -const rootElement = document.getElementById('challenge-gov-react-app') -const apiUrl = rootElement.getAttribute('data-api-url') -const publicUrl = rootElement.getAttribute('data-public-url') -const imageBase = rootElement.getAttribute('data-image-base') -const bridgeApplyBlocked = rootElement.getAttribute('data-bridge-apply-blocked') != 'false' + +function RenderRouter() { + return ( + + + + + + + } /> + } /> + + + + {/* */} + + ); +} + +export default RenderRouter; + + + + +//const rootElement = document.getElementById('challenge-gov-react-app') +const apiUrl = "https://challenge-portal-staging.app.cloud.gov" +const publicUrl = "https://react-chal.azurewebsites.net" +const imageBase = "" +const bridgeApplyBlocked = "" console.log("loading App ............") //ReactDOM.render(renderRouter(), rootElement); -if (rootElement.hasChildNodes()) { - ReactDOM.hydrate(renderRouter(), rootElement); -} else { - ReactDOM.render(renderRouter(), rootElement); -} +// if (rootElement.hasChildNodes()) { +// ReactDOM.hydrate(renderRouter(), rootElement); +// } else { +// ReactDOM.render(renderRouter(), rootElement); +// } // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); \ No newline at end of file +//serviceWorker.unregister(); \ No newline at end of file diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js index 3092dd1..981a68f 100644 --- a/src/pages/LandingPage.js +++ b/src/pages/LandingPage.js @@ -15,19 +15,19 @@ export const LandingPage = ({isArchived}) => { // TODO: Temporary showing of layout on chal details until the layout is moved if (isArchived) { - $(".top-banner").hide() - $(".usa-hero").hide() - $(".video").hide() - $(".newsletter").hide() - $(".help-section").hide() - $(".challenges-header").hide() + // $(".top-banner").hide() + // $(".usa-hero").hide() + // $(".video").hide() + // $(".newsletter").hide() + // $(".help-section").hide() + // $(".challenges-header").hide() } else { - $(".top-banner").show() + // $(".top-banner").show() } - $(".help-section").show() - $(".section-divider").show() - $(".footer").show() + // $(".help-section").show() + // $(".section-divider").show() + // $(".footer").show() useEffect(() => { let yearFilter = isArchived ? `&filter[year]=${selectedYear}` : "" diff --git a/src/server/index.js b/src/server/index.js new file mode 100644 index 0000000..8a26126 --- /dev/null +++ b/src/server/index.js @@ -0,0 +1,8 @@ +//require("ignore-styles"); + +require("@babel/register")({ + ignore: [/(node_modules)/], + presets: ["@babel/preset-env", "@babel/preset-react"], +}); + +require("./server"); \ No newline at end of file diff --git a/src/server/server.js b/src/server/server.js new file mode 100644 index 0000000..fc748b5 --- /dev/null +++ b/src/server/server.js @@ -0,0 +1,60 @@ +import path from 'path'; +import express from 'express'; +import React from 'react'; +import { renderToString } from 'react-dom/server'; +import { StaticRouter, matchPath } from 'react-router-dom'; +import RenderRouter from '../index'; + +const app = express(); +const port = 3000; + +app.use(express.static(path.join(__dirname, 'public'))); + +app.get('*', (req, res) => { + const context = {}; + const html = renderToString( + + + + ); + + const match = matchPath(req.url, { path: '/:productId', exact: true }); + if (match && match.params && match.params.productId) { + // Product route was matched + const productId = match.params.productId; + res.send(` + + + + Product ${productId} + + +
${html}
+ + + + `); + } else { + // Not a product route, send regular HTML + if (context.url) { + res.redirect(context.url); + } else { + res.send(` + + + + My App + + +
${html}
+ + + + `); + } + } +}); + +app.listen(port, () => { + console.log(`Server started on port ${port}`); +}); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b7c3f96..c6b20f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -64,21 +64,21 @@ json5 "^2.2.2" semver "^6.3.0" -"@babel/core@^7.8.3": - version "7.21.3" - resolved "https://registry.npmjs.org/@babel/core/-/core-7.21.3.tgz" - integrity sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw== +"@babel/core@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.4.tgz#c6dc73242507b8e2a27fd13a9c1814f9fa34a659" + integrity sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA== dependencies: "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.21.3" - "@babel/helper-compilation-targets" "^7.20.7" + "@babel/code-frame" "^7.21.4" + "@babel/generator" "^7.21.4" + "@babel/helper-compilation-targets" "^7.21.4" "@babel/helper-module-transforms" "^7.21.2" "@babel/helpers" "^7.21.0" - "@babel/parser" "^7.21.3" + "@babel/parser" "^7.21.4" "@babel/template" "^7.20.7" - "@babel/traverse" "^7.21.3" - "@babel/types" "^7.21.3" + "@babel/traverse" "^7.21.4" + "@babel/types" "^7.21.4" convert-source-map "^1.7.0" debug "^4.1.0" gensync "^1.0.0-beta.2" @@ -1182,6 +1182,17 @@ "@babel/plugin-transform-modules-commonjs" "^7.21.2" "@babel/plugin-transform-typescript" "^7.21.3" +"@babel/register@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.21.0.tgz#c97bf56c2472e063774f31d344c592ebdcefa132" + integrity sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw== + dependencies: + clone-deep "^4.0.1" + find-cache-dir "^2.0.0" + make-dir "^2.1.0" + pirates "^4.0.5" + source-map-support "^0.5.16" + "@babel/regjsgen@^0.8.0": version "0.8.0" resolved "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz" @@ -1203,7 +1214,7 @@ "@babel/parser" "^7.20.7" "@babel/types" "^7.20.7" -"@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.3": +"@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2": version "7.21.3" resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.3.tgz" integrity sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ== @@ -3970,6 +3981,15 @@ cliui@^8.0.1: strip-ansi "^6.0.1" wrap-ansi "^7.0.0" +clone-deep@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387" + integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ== + dependencies: + is-plain-object "^2.0.4" + kind-of "^6.0.2" + shallow-clone "^3.0.0" + clone@^1.0.2, clone@^1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz" @@ -6079,9 +6099,9 @@ express@4.16.4: utils-merge "1.0.1" vary "~1.1.2" -express@^4.17.3: +express@^4.17.3, express@^4.18.2: version "4.18.2" - resolved "https://registry.npmjs.org/express/-/express-4.18.2.tgz" + resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59" integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ== dependencies: accepts "~1.3.8" @@ -7541,6 +7561,13 @@ is-plain-obj@^3.0.0: resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz" integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA== +is-plain-object@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" + integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og== + dependencies: + isobject "^3.0.1" + is-potential-custom-element-name@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz" @@ -7675,6 +7702,11 @@ isexe@^2.0.0: resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz" integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw== +isobject@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" + integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg== + isomorphic-fetch@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" @@ -8730,7 +8762,7 @@ magic-string@^0.25.0, magic-string@^0.25.7: dependencies: sourcemap-codec "^1.4.8" -make-dir@^2.0.0: +make-dir@^2.0.0, make-dir@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz" integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA== @@ -9751,6 +9783,14 @@ path-type@^4.0.0: resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +path@^0.12.7: + version "0.12.7" + resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f" + integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q== + dependencies: + process "^0.11.1" + util "^0.10.3" + pdfmake@^0.2.4: version "0.2.7" resolved "https://registry.npmjs.org/pdfmake/-/pdfmake-0.2.7.tgz" @@ -9808,7 +9848,7 @@ pinkie@^2.0.0: resolved "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz" integrity sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg== -pirates@^4.0.1, pirates@^4.0.4: +pirates@^4.0.1, pirates@^4.0.4, pirates@^4.0.5: version "4.0.5" resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz" integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ== @@ -10732,6 +10772,11 @@ process-nextick-args@~2.0.0: resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== +process@^0.11.1: + version "0.11.10" + resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" + integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== + progress@^2.0.1: version "2.0.3" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8" @@ -11900,6 +11945,13 @@ setprototypeof@1.2.0: resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz" integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== +shallow-clone@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3" + integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA== + dependencies: + kind-of "^6.0.2" + shallow-copy@~0.0.1: version "0.0.1" resolved "https://registry.npmjs.org/shallow-copy/-/shallow-copy-0.0.1.tgz" @@ -12017,7 +12069,7 @@ source-map-loader@^3.0.0: iconv-lite "^0.6.3" source-map-js "^1.0.1" -source-map-support@^0.5.6, source-map-support@~0.5.20: +source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.20: version "0.5.21" resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz" integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w== @@ -13228,6 +13280,13 @@ util.promisify@~1.0.0: has-symbols "^1.0.1" object.getownpropertydescriptors "^2.1.0" +util@^0.10.3: + version "0.10.4" + resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901" + integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A== + dependencies: + inherits "2.0.3" + utila@~0.4: version "0.4.0" resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz" From 30cc9c7d038436d421eb40433593eb9060de1381 Mon Sep 17 00:00:00 2001 From: jdonis Date: Sun, 23 Apr 2023 10:08:59 -0400 Subject: [PATCH 2/5] adding server --- public/index.html | 11 +++-- server/index.js | 8 ++++ server/server.js | 98 ++++++++++++++++++++++++++++++++++++++++++++ src/server/server.js | 86 +++++++++++++++++++++++++++----------- 4 files changed, 173 insertions(+), 30 deletions(-) create mode 100644 server/index.js create mode 100644 server/server.js diff --git a/public/index.html b/public/index.html index 09b6dcc..627852a 100644 --- a/public/index.html +++ b/public/index.html @@ -5,17 +5,16 @@ - Challenge.Gov - - - + Challenge.Gov + + + + - - diff --git a/server/index.js b/server/index.js new file mode 100644 index 0000000..54c5aca --- /dev/null +++ b/server/index.js @@ -0,0 +1,8 @@ +//require("ignore-styles"); + +require("@babel/register")({ + ignore: [/(node_modules)/], + presets: ["@babel/preset-env", "@babel/preset-react"], +}); + +require("./server"); \ No newline at end of file diff --git a/server/server.js b/server/server.js new file mode 100644 index 0000000..b441e64 --- /dev/null +++ b/server/server.js @@ -0,0 +1,98 @@ +import path from 'path'; +import fs from 'fs'; +import express from 'express'; +// import React from 'react'; +import React, { useEffect, useState, useContext } from 'react' +import { renderToString } from 'react-dom/server'; +import { StaticRouter, matchPath } from 'react-router-dom'; +//import RenderRouter from '../index'; +import axios from 'axios' + +const app = express(); +const port = 3001; + +//const [currentChallenge, setCurrentChallenge] = useState() +//const [loadingState, setLoadingState] = useState(true) +const currentChallenge = {} + +app.use(express.static(path.join(__dirname, 'build'))); + +const indexPath = path.resolve(__dirname, '.', 'build', 'index.html'); + + +app.get('*', (req, res) => { + const context = {}; + // const html = renderToString( + // + // + // + // ); + + const match = matchPath(req.url, { path: '/:chalId', exact: true }); + if (match && match.params && match.params.chalId) { + // Challenge-ID + const chalId = match.params.chalId; + + + let challengeApiPath = `https://challenge-portal-staging.app.cloud.gov` + `/api/challenges/${chalId}` + + axios.get(challengeApiPath) + .then(response => { + console.log(chalId + " <--id") + // Handle the response data + currentChallenge = res.data; + console.log(response.data); + }) + .catch(error => { + // Handle any errors that occurred during the request + console.error(error); + }); + + + fs.readFile(indexPath, 'utf8', (err, htmlData) => { + if (err) { + console.error('Error during file reading', err); + return res.status(404).end() + } + // get post info + const postId = req.query.id; + const post = getPostById(postId); + if(!post) return res.status(404).send("Post not found"); + + // inject meta tags + htmlData = htmlData.replace( + "Challenge.Gov", + `${currentChallenge.title}` + ) + .replace('__META_OG_TITLE__', currentChallenge.title) + .replace('__META_OG_DESCRIPTION__', currentChallenge.tagline) + .replace('__META_DESCRIPTION__', currentChallenge.tagline) + .replace('__META_OG_IMAGE__', currentChallenge.logo) + + return res.send(htmlData); + }); + + } else { + // Not a product route, send regular HTML + if (context.url) { + res.redirect(context.url); + } else { + res.send(` + + + + My App + + +
${html}
+ + + + `); + } + } +}); + +app.listen(port, () => { + console.log(`Server started on port ${port}`); +}); \ No newline at end of file diff --git a/src/server/server.js b/src/server/server.js index fc748b5..f2ad9d0 100644 --- a/src/server/server.js +++ b/src/server/server.js @@ -1,39 +1,77 @@ import path from 'path'; +import fs from 'fs'; import express from 'express'; -import React from 'react'; +// import React from 'react'; +import React, { useEffect, useState, useContext } from 'react' import { renderToString } from 'react-dom/server'; import { StaticRouter, matchPath } from 'react-router-dom'; import RenderRouter from '../index'; +import axios from 'axios' const app = express(); const port = 3000; -app.use(express.static(path.join(__dirname, 'public'))); +//const [currentChallenge, setCurrentChallenge] = useState() +//const [loadingState, setLoadingState] = useState(true) +const currentChallenge = {} + +app.use(express.static(path.join(__dirname, 'build'))); + +const indexPath = path.resolve(__dirname, '.', 'build', 'index.html'); + app.get('*', (req, res) => { const context = {}; - const html = renderToString( - - - - ); - - const match = matchPath(req.url, { path: '/:productId', exact: true }); - if (match && match.params && match.params.productId) { - // Product route was matched - const productId = match.params.productId; - res.send(` - - - - Product ${productId} - - -
${html}
- - - - `); + // const html = renderToString( + // + // + // + // ); + + const match = matchPath(req.url, { path: '/:chalId', exact: true }); + if (match && match.params && match.params.chalId) { + // Challenge-ID + const chalId = match.params.chalId; + + + let challengeApiPath = `https://challenge-portal-staging.app.cloud.gov` + `/api/challenges/${chalId}` + + axios.get(challengeApiPath) + .then(response => { + console.log(challengeId + " <--id") + // Handle the response data + currentChallenge = res.data; + console.log(response.data); + }) + .catch(error => { + // Handle any errors that occurred during the request + console.error(error); + }); + + + fs.readFile(indexPath, 'utf8', (err, htmlData) => { + if (err) { + console.error('Error during file reading', err); + return res.status(404).end() + } + // get post info + const postId = req.query.id; + const post = getPostById(postId); + if(!post) return res.status(404).send("Post not found"); + + // inject meta tags + htmlData = htmlData.replace( + "Challenge.Gov", + `${currentChallenge.title}` + ) + .replace('__META_OG_TITLE__', currentChallenge.title) + .replace('__META_OG_DESCRIPTION__', currentChallenge.tagline) + .replace('__META_DESCRIPTION__', currentChallenge.tagline) + .replace('__META_OG_IMAGE__', currentChallenge.logo) + + return res.send(htmlData); + }); + } else { // Not a product route, send regular HTML if (context.url) { From 12f382447152ac1b4619db2c5c901f0bf2bf4d52 Mon Sep 17 00:00:00 2001 From: jdonis Date: Sun, 23 Apr 2023 13:57:46 -0400 Subject: [PATCH 3/5] adding some marks to check the flow --- server/server.js | 93 +++++++++++++++++++++++++++------------- src/index.js | 20 ++++----- src/pages/LandingPage.js | 2 +- 3 files changed, 75 insertions(+), 40 deletions(-) diff --git a/server/server.js b/server/server.js index b441e64..d1c8f9d 100644 --- a/server/server.js +++ b/server/server.js @@ -11,14 +11,18 @@ import axios from 'axios' const app = express(); const port = 3001; + + + //const [currentChallenge, setCurrentChallenge] = useState() //const [loadingState, setLoadingState] = useState(true) -const currentChallenge = {} -app.use(express.static(path.join(__dirname, 'build'))); -const indexPath = path.resolve(__dirname, '.', 'build', 'index.html'); +// what is the difference btw path join and resolve +//app.use(express.static(path.join(__dirname, 'build'))); +app.use(express.static(path.resolve(__dirname, "..", "build"))); +//const indexPath = path.resolve(__dirname, '.', 'build', 'index.html'); app.get('*', (req, res) => { const context = {}; @@ -28,6 +32,34 @@ app.get('*', (req, res) => { // // ); + const ChangeMeta = (currentChallenge) => { + + console.log("current title: " + currentChallenge.title) + fs.readFile(path.resolve("./build/index.html"), 'utf8', (err, htmlData) => { + if (err) { + console.error('Error during file reading', err); + //return res.status(404).end() + } + // get post info + //const postId = req.query.id; + //const post = getPostById(postId); + //if(!post) return res.status(404).send("Post not found"); + // inject meta tags + htmlData = htmlData.replace( + "Challenge.Gov", + `${currentChallenge.title}` + ) + .replace('__META_OG_TITLE__', currentChallenge.title) + .replace('__META_OG_DESCRIPTION__', currentChallenge.tagline) + .replace('__META_DESCRIPTION__', currentChallenge.tagline) + .replace('__META_OG_IMAGE__', currentChallenge.logo) + + //return htmlData; + return res.send(htmlData); + }); + } + + const match = matchPath(req.url, { path: '/:chalId', exact: true }); if (match && match.params && match.params.chalId) { // Challenge-ID @@ -38,10 +70,10 @@ app.get('*', (req, res) => { axios.get(challengeApiPath) .then(response => { - console.log(chalId + " <--id") - // Handle the response data - currentChallenge = res.data; - console.log(response.data); + console.log(chalId + " <-- ------- id") + const html_ = ChangeMeta(response.data); + //return res.send(html_) + //console.log(response.data); }) .catch(error => { // Handle any errors that occurred during the request @@ -49,31 +81,31 @@ app.get('*', (req, res) => { }); - fs.readFile(indexPath, 'utf8', (err, htmlData) => { - if (err) { - console.error('Error during file reading', err); - return res.status(404).end() - } - // get post info - const postId = req.query.id; - const post = getPostById(postId); - if(!post) return res.status(404).send("Post not found"); + // fs.readFile(path.resolve("./build/index.html"), 'utf8', (err, htmlData) => { + // if (err) { + // console.error('Error during file reading', err); + // return res.status(404).end() + // } + // // get post info + // //const postId = req.query.id; + // //const post = getPostById(postId); + // //if(!post) return res.status(404).send("Post not found"); - // inject meta tags - htmlData = htmlData.replace( - "Challenge.Gov", - `${currentChallenge.title}` - ) - .replace('__META_OG_TITLE__', currentChallenge.title) - .replace('__META_OG_DESCRIPTION__', currentChallenge.tagline) - .replace('__META_DESCRIPTION__', currentChallenge.tagline) - .replace('__META_OG_IMAGE__', currentChallenge.logo) + // // inject meta tags + // htmlData = htmlData.replace( + // "Challenge.Gov", + // `${currentChallenge.title}` + // ) + // .replace('__META_OG_TITLE__', currentChallenge.title) + // .replace('__META_OG_DESCRIPTION__', currentChallenge.tagline) + // .replace('__META_DESCRIPTION__', currentChallenge.tagline) + // .replace('__META_OG_IMAGE__', currentChallenge.logo) - return res.send(htmlData); - }); + // return res.send(htmlData); + // }); } else { - // Not a product route, send regular HTML + if (context.url) { res.redirect(context.url); } else { @@ -91,8 +123,11 @@ app.get('*', (req, res) => { `); } } + }); app.listen(port, () => { console.log(`Server started on port ${port}`); -}); \ No newline at end of file +}); + + diff --git a/src/index.js b/src/index.js index ab20206..736c0ee 100644 --- a/src/index.js +++ b/src/index.js @@ -2,15 +2,15 @@ import React from 'react'; import ReactDOM from 'react-dom'; import queryString from 'query-string' import { BrowserRouter, Redirect, Route, Router, Switch, useLocation } from "react-router-dom"; -// import { IndexRoutes } from "./routes/index"; -// import * as serviceWorker from './serviceWorker'; +import { IndexRoutes } from "./routes/index"; +import * as serviceWorker from './serviceWorker'; import { useTracking } from './useTracking' import { ApiUrlContext } from "./ApiUrlContext" import { LandingPage } from './pages/LandingPage' import { DetailsPage } from './pages/DetailsPage' -//import '../../css/public/index.scss' +import '../../css/public/index.scss' const getRoutes = () => { return IndexRoutes.map((prop, i) => { @@ -98,7 +98,7 @@ export default RenderRouter; -//const rootElement = document.getElementById('challenge-gov-react-app') +const rootElement = document.getElementById('challenge-gov-react-app') const apiUrl = "https://challenge-portal-staging.app.cloud.gov" const publicUrl = "https://react-chal.azurewebsites.net" const imageBase = "" @@ -107,13 +107,13 @@ console.log("loading App ............") //ReactDOM.render(renderRouter(), rootElement); -// if (rootElement.hasChildNodes()) { -// ReactDOM.hydrate(renderRouter(), rootElement); -// } else { -// ReactDOM.render(renderRouter(), rootElement); -// } +if (rootElement.hasChildNodes()) { + ReactDOM.hydrate(renderRouter(), rootElement); + } else { + ReactDOM.render(renderRouter(), rootElement); + } // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA -//serviceWorker.unregister(); \ No newline at end of file +serviceWorker.unregister(); \ No newline at end of file diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js index 981a68f..f7cf3b9 100644 --- a/src/pages/LandingPage.js +++ b/src/pages/LandingPage.js @@ -28,7 +28,7 @@ export const LandingPage = ({isArchived}) => { // $(".help-section").show() // $(".section-divider").show() // $(".footer").show() - + console.log("landing"); useEffect(() => { let yearFilter = isArchived ? `&filter[year]=${selectedYear}` : "" From 59397aadf425110b92f87719a4c26a405c7a651e Mon Sep 17 00:00:00 2001 From: jdonis Date: Sun, 23 Apr 2023 15:54:45 -0400 Subject: [PATCH 4/5] adding footer, header --- public/index.html | 266 +++++++++++++++++++++++++++++++++++++------ server/server.js | 41 +------ src/index.js | 54 +++------ src/server/index.js | 8 -- src/server/server.js | 98 ---------------- 5 files changed, 251 insertions(+), 216 deletions(-) delete mode 100644 src/server/index.js delete mode 100644 src/server/server.js diff --git a/public/index.html b/public/index.html index 627852a..01d25c5 100644 --- a/public/index.html +++ b/public/index.html @@ -1,47 +1,249 @@ - + + - - - - - Challenge.Gov - - - - + + + + + + + + + + + + + + + +Challenge.Gov + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +Skip to main content - - - - +
+
+
+
+
+ U.S. flag +
+
+

An official website of the United States government

+ +
+ +
+
+
+
+
+ Dot gov +
+

+ The .gov means it’s official. +
+ Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site. +

+
+
+
+ Https +
+

+ The site is secure. +
+ The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely. +

+
+
+
+
+
+
+ + + - - - +
+
- + - - - - + + Back to Top ^ + + + + + + + + + + + + + + + + diff --git a/server/server.js b/server/server.js index d1c8f9d..771748d 100644 --- a/server/server.js +++ b/server/server.js @@ -13,16 +13,10 @@ const port = 3001; - -//const [currentChallenge, setCurrentChallenge] = useState() -//const [loadingState, setLoadingState] = useState(true) - - // what is the difference btw path join and resolve //app.use(express.static(path.join(__dirname, 'build'))); app.use(express.static(path.resolve(__dirname, "..", "build"))); -//const indexPath = path.resolve(__dirname, '.', 'build', 'index.html'); app.get('*', (req, res) => { const context = {}; @@ -40,11 +34,7 @@ app.get('*', (req, res) => { console.error('Error during file reading', err); //return res.status(404).end() } - // get post info - //const postId = req.query.id; - //const post = getPostById(postId); - //if(!post) return res.status(404).send("Post not found"); - // inject meta tags + htmlData = htmlData.replace( "Challenge.Gov", `${currentChallenge.title}` @@ -81,43 +71,20 @@ app.get('*', (req, res) => { }); - // fs.readFile(path.resolve("./build/index.html"), 'utf8', (err, htmlData) => { - // if (err) { - // console.error('Error during file reading', err); - // return res.status(404).end() - // } - // // get post info - // //const postId = req.query.id; - // //const post = getPostById(postId); - // //if(!post) return res.status(404).send("Post not found"); - - // // inject meta tags - // htmlData = htmlData.replace( - // "Challenge.Gov", - // `${currentChallenge.title}` - // ) - // .replace('__META_OG_TITLE__', currentChallenge.title) - // .replace('__META_OG_DESCRIPTION__', currentChallenge.tagline) - // .replace('__META_DESCRIPTION__', currentChallenge.tagline) - // .replace('__META_OG_IMAGE__', currentChallenge.logo) - - // return res.send(htmlData); - // }); - } else { if (context.url) { + console.log("Context URL = " + context.url) res.redirect(context.url); } else { res.send(` - My App + Not found -
${html}
- +
`); diff --git a/src/index.js b/src/index.js index 736c0ee..c03f84a 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ import { ApiUrlContext } from "./ApiUrlContext" import { LandingPage } from './pages/LandingPage' import { DetailsPage } from './pages/DetailsPage' -import '../../css/public/index.scss' +//import '../../css/public/index.scss' const getRoutes = () => { return IndexRoutes.map((prop, i) => { @@ -48,14 +48,14 @@ const Application = () => { } -const renderRouter1 = () => ( +const renderRouter = () => ( - + {/* */} @@ -65,53 +65,25 @@ const renderRouter1 = () => ( - {/* */} + {/* + */} ) - -function RenderRouter() { - return ( - - - - - - - } /> - } /> - - - - {/* */} - - ); -} - -export default RenderRouter; - - - - const rootElement = document.getElementById('challenge-gov-react-app') -const apiUrl = "https://challenge-portal-staging.app.cloud.gov" -const publicUrl = "https://react-chal.azurewebsites.net" -const imageBase = "" -const bridgeApplyBlocked = "" +const apiUrl = rootElement.getAttribute('data-api-url') +const publicUrl = rootElement.getAttribute('data-public-url') +const imageBase = rootElement.getAttribute('data-image-base') +const bridgeApplyBlocked = rootElement.getAttribute('data-bridge-apply-blocked') != 'false' console.log("loading App ............") //ReactDOM.render(renderRouter(), rootElement); if (rootElement.hasChildNodes()) { - ReactDOM.hydrate(renderRouter(), rootElement); - } else { - ReactDOM.render(renderRouter(), rootElement); - } + ReactDOM.hydrate(renderRouter(), rootElement); +} else { + ReactDOM.render(renderRouter(), rootElement); +} // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. diff --git a/src/server/index.js b/src/server/index.js deleted file mode 100644 index 8a26126..0000000 --- a/src/server/index.js +++ /dev/null @@ -1,8 +0,0 @@ -//require("ignore-styles"); - -require("@babel/register")({ - ignore: [/(node_modules)/], - presets: ["@babel/preset-env", "@babel/preset-react"], -}); - -require("./server"); \ No newline at end of file diff --git a/src/server/server.js b/src/server/server.js deleted file mode 100644 index f2ad9d0..0000000 --- a/src/server/server.js +++ /dev/null @@ -1,98 +0,0 @@ -import path from 'path'; -import fs from 'fs'; -import express from 'express'; -// import React from 'react'; -import React, { useEffect, useState, useContext } from 'react' -import { renderToString } from 'react-dom/server'; -import { StaticRouter, matchPath } from 'react-router-dom'; -import RenderRouter from '../index'; -import axios from 'axios' - -const app = express(); -const port = 3000; - -//const [currentChallenge, setCurrentChallenge] = useState() -//const [loadingState, setLoadingState] = useState(true) -const currentChallenge = {} - -app.use(express.static(path.join(__dirname, 'build'))); - -const indexPath = path.resolve(__dirname, '.', 'build', 'index.html'); - - -app.get('*', (req, res) => { - const context = {}; - // const html = renderToString( - // - // - // - // ); - - const match = matchPath(req.url, { path: '/:chalId', exact: true }); - if (match && match.params && match.params.chalId) { - // Challenge-ID - const chalId = match.params.chalId; - - - let challengeApiPath = `https://challenge-portal-staging.app.cloud.gov` + `/api/challenges/${chalId}` - - axios.get(challengeApiPath) - .then(response => { - console.log(challengeId + " <--id") - // Handle the response data - currentChallenge = res.data; - console.log(response.data); - }) - .catch(error => { - // Handle any errors that occurred during the request - console.error(error); - }); - - - fs.readFile(indexPath, 'utf8', (err, htmlData) => { - if (err) { - console.error('Error during file reading', err); - return res.status(404).end() - } - // get post info - const postId = req.query.id; - const post = getPostById(postId); - if(!post) return res.status(404).send("Post not found"); - - // inject meta tags - htmlData = htmlData.replace( - "Challenge.Gov", - `${currentChallenge.title}` - ) - .replace('__META_OG_TITLE__', currentChallenge.title) - .replace('__META_OG_DESCRIPTION__', currentChallenge.tagline) - .replace('__META_DESCRIPTION__', currentChallenge.tagline) - .replace('__META_OG_IMAGE__', currentChallenge.logo) - - return res.send(htmlData); - }); - - } else { - // Not a product route, send regular HTML - if (context.url) { - res.redirect(context.url); - } else { - res.send(` - - - - My App - - -
${html}
- - - - `); - } - } -}); - -app.listen(port, () => { - console.log(`Server started on port ${port}`); -}); \ No newline at end of file From 68724ffa09641775fbeae767f787ffc75c2ff0ac Mon Sep 17 00:00:00 2001 From: jdonis Date: Sun, 23 Apr 2023 16:10:57 -0400 Subject: [PATCH 5/5] cleaning code --- src/App1.js | 17 ----------------- src/Home.js | 13 ------------- src/Product.js | 15 --------------- 3 files changed, 45 deletions(-) delete mode 100644 src/App1.js delete mode 100644 src/Home.js delete mode 100644 src/Product.js diff --git a/src/App1.js b/src/App1.js deleted file mode 100644 index bd61b0b..0000000 --- a/src/App1.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Switch, Route } from 'react-router-dom'; -import Home from './Home'; -//import Contact from './Contact'; -import Product from './Product'; - -function App() { - return ( - - - - - - ); -} - -export default App; \ No newline at end of file diff --git a/src/Home.js b/src/Home.js deleted file mode 100644 index 1031639..0000000 --- a/src/Home.js +++ /dev/null @@ -1,13 +0,0 @@ -// Home.js -import React from 'react'; - -function Home() { - return ( -
-

Home Page

-

Welcome to my app!

-
- ); -} - -export default Home; \ No newline at end of file diff --git a/src/Product.js b/src/Product.js deleted file mode 100644 index c66210e..0000000 --- a/src/Product.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { useParams } from 'react-router-dom'; - -function Product() { - const { productId } = useParams(); - - return ( -
-

Product {productId}

-

Details about product {productId} go here...

-
- ); -} - -export default Product; \ No newline at end of file