how can get url param in this rout?
http://localhost:2048/secret/:id

i can't get params in fetchData

Secret.serverFetch = fetchData; // static declaration of data requirements

const mapStateToProps = ( state ) => ( {
circuits: state.data,
} );

const mapDispatchToProps = {
fetchData,
};

Hi there

I experienced some issue when trying to fix or even show the audit dependencies :
$: npm audit

this ends in :
$: npm ERR! code ENOAUDIT
$: npm ERR! audit Your configured registry (https://registry.npmjs.org/) does not support audit requests, or the audit endpoint is temporarily unavailable.

This is the standard registry and it works for my other projects. I tried to remove the node_modules folder and re-run "npm install", but it still displaying the same error above.

When I remove the package-lock.json there's no audit error but "npm run dev" is now crashing and throws me this :
TypeError: Cannot read property 'properties' of undefined at module.exports (/home/deptinfo/Documents/DEV/react-ssr/node_modules/webpack-cli/bin/config-yargs.js:89:48)

Does anyone have an idea on how to make "npm audit" great again ?

Thanks

Hi @alexnm . This code has been really great in trying to understand React SSR.

But one paint point has been , I have been trying to get this setup work with a css file or module of react and i have searched a lot of blogs and hours of trying toi tweak webpack but nothing seem to work .

These are the following options i have explored.

• https://www.npmjs.com/package/isomorphic-style-loader
• https://cssinjs.org/server-side-rendering/?v=v10.0.0-alpha.22
• webpack loaders

But in none the process is simple or clearly mentioned the one which i tried a lot was isomorphic loader which seemed promising but then it gave some vague errors after setting it in my css files Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Can you please set some context on this it would be really helpful , i had seen . one closed issues on these lines but i tried but its difficult grasp the loader on the server side of things end

Hi @ALL,
Thank you for sharing this awesome repository. This is very helpful and understandable too.
But, I am facing two problems which are the following below:-

1. I can able to store data through localstorage but after refreshing the page or routing to another page, localstorage is getting lost the data. How we will keep data until and unless we will remove from localstorage.
2. If I am using a dynamic route/slug-type route then CSS not working there or also CSS not working with the anchor tags, But I am using Link tag for routing there CSS is working there.

Could you please help me with fixing these problems.
Thank you!

Found solution

when I run npm run dev the terminal output these infos below:

(node:33459) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): FetchError: request to http://ergast.com/api/f1/2018/circuits.json failed, reason: getaddrinfo ENOTFOUND ergast.com ergast.com:80 (node:33459) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. (node:33459) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): FetchError: request to http://ergast.com/api/f1/2018/circuits.json failed, reason: getaddrinfo ENOTFOUND ergast.com ergast.com:80 (node:33459) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): FetchError: request to http://ergast.com/api/f1/2018/circuits.json failed, reason: getaddrinfo ENOTFOUND ergast.com ergast.com:80 (node:33459) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): FetchError: request to http://ergast.com/api/f1/2018/circuits.json failed, reason: getaddrinfo ENOTFOUND ergast.com ergast.com:80

while I use import some css it always show error tokens. It's clearly expect .css too as .js while try to compile. How to use import .css components?

These steps do not help: https://codeforgeek.com/make-failed-with-exit-code-2/#:~:text=The%20%E2%80%9CMake%20Failed%20with%20Exit,during%20the%20node%20modules%20installation.&text=Make%20sure%20you%20have%20latest,is%20installed%20in%20your%20system.

                V8_WARN_UNUSED_RESULT Maybe<bool> BooleanValue(
                                                  ^
5 errors generated.
make: *** [Release/obj.target/iltorb/src/dec/stream_decode.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:311:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/Users/rostyslav/.nvm/versions/node/v12.16.1/bin/node" "/usr/local/lib/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/rostyslav/Desktop/ssr/node_modules/iltorb
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
npm WARN notsup Unsupported engine for [email protected]: wanted: {"npm":"^5.0.0"} (current: {"node":"12.16.1","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":"<8.10.0"} (current: {"node":"12.16.1","npm":"6.13.4"})

Hi! Thanks for this repository!

I'm having trouble generating a production build.

After cloning, and installing dependancies, I executed an npm run build.
A dist folder is created with app.bundle.js, app.bundle.js.map and webpack-report.html inside.

Then I tried to run the app.bundle.js file and there is a following error:

ReferenceError: self is not defined
    at Module.<anonymous> (/Users/lucas/goinfre/react-ssr/dist/app.bundle.js:30:3751)
    at n (/Users/lucas/goinfre/react-ssr/dist/app.bundle.js:1:172)
    at Object.<anonymous> (/Users/lucas/goinfre/react-ssr/dist/app.bundle.js:6:3603)
    at n (/Users/lucas/goinfre/react-ssr/dist/app.bundle.js:1:172)
    at Module.<anonymous> (/Users/lucas/goinfre/react-ssr/dist/app.bundle.js:41:45083)
    at n (/Users/lucas/goinfre/react-ssr/dist/app.bundle.js:1:172)
    at /Users/lucas/goinfre/react-ssr/dist/app.bundle.js:1:964
    at Object.<anonymous> (/Users/lucas/goinfre/react-ssr/dist/app.bundle.js:1:974)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)

Hello, thank you for making the example available.
I am trying to learn from it to understand how to create server and client side bundles from the same project.

I can see (and tested) the

npm server
http://localhost:2048

pair
It is working well.

However, what port/URL do I access to get to the CSR (client side rendering) setup ?

thank you

I ran your example via npm run dev but I am unable to access the built files when navigating to localhost. I get the "This site can’t be reached" error.

Under the macOS, port 2048 has been occupied by some system processes.

const dataRequirements =
routes
// .filter( route => matchPath( req.url, route ) ) // filter matching paths
.map( route => route.component ) // map to components
.filter( comp => comp.serverFetch ) // check if components have data requirement
.map( comp => store.dispatch( comp.serverFetch() ) ); // dispatch data requirement

how do we pass the url params to serverFetch function,
if i pass the node req.url, then i need to reload the page on every page,
so when using the React Link, how do get the url Params in the componet serverFetch function.

Hi @alexnm ,

Very useful example, How did you get the const reactDom = renderToString( jsx ); in server.js to not give you a window is not defined error?

Cheers

I tried to add some styles for component and I got errors like this:

react-ssr/src/components/Home.css: Unexpected token

How can I add styles for this project?

I have followed your code structure and style but struggling with integrate all this with react-hot-loader. Please advice me on this

"dev": "webpack --watch --progress & nodemon index.js", 请问一下这样webpack --watch --progress 已经开启了webpack服务了 不能执行后面的nodemon index.js的

Hi
how can I fix this error.
the python env var is well configured
PYTHON=C:\ProgramData\Anaconda3
Python 3.7.3

C:\Users\ZETA\Documents\Labs\LaboReact>git clone https://github.com/alexnm/react-ssr
Cloning into 'react-ssr'...
remote: Enumerating objects: 32, done.
remote: Counting objects: 100% (32/32), done.
remote: Compressing objects: 100% (24/24), done.

Receiving objects: 100% (157/157), 188.72 KiB | 248.00 KiB/s, done.
Resolving deltas: 100% (66/66), done.

C:\Users\ZETA\Documents\Labs\LaboReact>cd react-ssr

C:\Users\ZETA\Documents\Labs\LaboReact\react-ssr>npm install
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!

> [email protected] install C:\Users\ZETA\Documents\Labs\LaboReact\react-ssr\node_modules\iltorb
> detect-libc prebuild-install || node-gyp rebuild

prebuild-install info begin Prebuild-install version 2.5.1
prebuild-install info looking for local prebuild @ prebuilds\iltorb-v1.3.10-node-v64-win32-x64.tar.gz
prebuild-install info looking for cached prebuild @ C:\Users\ZETA\AppData\Roaming\npm-cache\_prebuilds\https-github.com-MayhemYDG-iltorb-releases-download-v1.3.10-iltorb-v1.3.10-node-v64-win32-x64.tar.gz
prebuild-install http request GET https://github.com/MayhemYDG/iltorb/releases/download/v1.3.10/iltorb-v1.3.10-node-v64-win32-x64.tar.gz
prebuild-install http 404 https://github.com/MayhemYDG/iltorb/releases/download/v1.3.10/iltorb-v1.3.10-node-v64-win32-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=10.15.3 runtime=node arch=x64 platform=win32)

C:\Users\ZETA\Documents\Labs\LaboReact\react-ssr\node_modules\iltorb>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\ProgramData\Anaconda3", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:153:21)
gyp ERR! System Windows_NT 10.0.17763
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\ZETA\Documents\Labs\LaboReact\react-ssr\node_modules\iltorb
gyp ERR! node -v v10.15.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN [email protected] No repository field.
npm WARN [email protected] scripts['server'] should probably be scripts['start'].
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `detect-libc prebuild-install || node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ZETA\AppData\Roaming\npm-cache\_logs\2019-10-03T18_26_32_333Z-debug.

hello,@alexnm.Very nice work for learning ssr .But I am confused how to keep the redux-persist work with this template work.