You should use npx to execute binaries from the .bin folder. Npx will help the node runtime to select the right binary for you. Moreover, the syntax of your scripts will be much cleaner.
The approach I've met is to import store in server and pass its contents through a global variable (e.g. window.INITIAL_STATE=${store}) in index.html you pass to a client.
Hi, im currently looking for this too, if you dont mind if there any example for this please reply this comment with the source for the example. Thank you
Nice! Javascript has really come a long way. Nice to see that the language is maturing and by combining it to the awesome tools like React and Firebase development becomes just a breeze and a pure joy. Keep it up guys!
Nice tutorial, one note though, locally installed binaries are available for all scripts in your package.json without prefixing it with node_modules/.bin/binary-name so in webpack script you could've written webpack directly.
Also, if you were in the project directory you could invoke the node_modules binaries from the terminal with npx, like npx webpack. I believe npx is available from Node 8.
If you guys could share a repo of the finished product of these examples that would be so helpful ... makes it way easier to track down why something isn't working when you though you followed along perfectly!!!
Hi, i came a cross this video since im searching for dynamic tags for my web app.hope this is a good step and gonna now to searching how to combine all these benific things with my project .Thank you very mutch
Same Error- Error: Error occurred while parsing your function triggers. Error: ENOENT: no such file or directory, open 'E:\thisisme\SSR\functions/index.html'
I created a github repository to implement the source code for the Firebase tutorials. The source code for this video is here: github.com/littlewhiteball/FirebaseTutorial/tree/master/Server-sideRenderingReact Welcome to add more source code for other videos to the repository! Let's share and make it easier for others :)
You guys should really put the code in your videos to git. I love these and need these but being a beginner I have to watch multiple times. Would really help to have the final code to look at. Cheers.
Been following this tutorial from the beginning. "firebase serve --only functions,hosting" command runs, but I dont see a SSR version. I see what I have on the public folder. Either something on the firebase api changed, or you're missing something...?
Getting this error -Error: Error occurred while parsing your function triggers. Error: ENOENT: no such file or directory, open 'E:\thisisme\SSR\functions/index.html' After firebase deploy- coz there is no index.html file in functions folder. HELP!
Hey David East, I found your doppelganger on youtube, another youtuber with a German channel named Die Frage, and he's German. I sent him a comment to make a video about meeting you in US (or you him in Germany, who knows). I hope he reads my comment there and takes interest. I hope you take interest too. Might be awesome.
Oh well, it's look like a big gambiarra :v And i didnt' understand the need of the ./functions folder and why create it "manually", it can't be done with webpack? and webpack didn't transpiled the file to use commonjs require?
HI, great Video... I always struggle fetching json data, selecting objects and injecting those values into html and now that I am getting started with react-native it seems a bit more complex. Can you suggest a website or webtool where I can experiment with different fetching tools to request API data, so that I can become more familiar and experienced handling json files and API requests? Thanks
I followed most of this, except why a separate copy of all the component scripts? Can't the client and server use the same build files. They both have to transpile anyway.
Can you make a similar tut for angular as well I'm hitting my head against wall since past few weeks but no success. I tried tapping keyboard as well though.
@13:25 - what happens if a new "fact" is created in database and user opens the URL? Will the server cache still be active and show the old data only? How can I invalidate server cache?
Yeah I think it will serve the old data for a certain period, however the client js will probably be executed at some time and will replace the server side rendered html with the actual react app on the browser (of course with the updated data).
that is what I thought too.. however if we plan to use this for say "public profile" page, it will not be nice to ask user to wait 10 min to see his/her changes. I can reduce the cache duration, but it will kill the purpose and end up using too much resources. Does anyone know what could be the best solution here?
I mean, once the javascript on the client is executed, it will replace the server rendered old data with the new data. JS execution on the client will mostly take less than 5 secs to render, so users will just have a glimpse of the old data and will be immediately replaced by the new data. At this point, the caching is probably not an issue.
Ok, I am a newbie, but shouldn´t you explain why we would need this? Understanding why & with some quick history or background would help, rather then just deep diving. Great video though.. Thanks!
hey, if the public folder doesn't contain index.html , I am unable to deploy the on firebase. Firebase is giving internal server error. But if I add index.html in public folder, than SSR not working. Firebase is serving from bundle.js. I am unable to see dom element in view source. Can anyone help me ?
You can use them together. SSR is just responsible for the HTML response to the initial page request. PWA is supported by fetching a Javascript file in a separate request. Once the JS for PWA is installed locally, you can avoid making the page request.
You can check the github repository I created for the Firebase videos: github.com/littlewhiteball/FirebaseTutorial/tree/master/Server-sideRenderingReact
yeah, rendering to string is a terrible idea if you have a big chunk of content on your dom. Ideally you should render to a node streaml so that you can split your html into small chunks and have them quickly sent out to the client in order to reduce the time to first byte
The explanations are, to me. not clear. How is it that React not already rendered by a server? When you go to a URL, aren't you requesting info from a server? As usual, the tech person trying to explain what something is overlooks this extremely obvious point of confusion.
"Webpack is RUN on Node." Are there any programmers other than me who can get this right? You'd think people who spend their entire lives working with grammars and syntax would be able to use grammar or syntax...
![Eminem - Somebody Save Me (feat. Jelly Roll) [Official Music Video]](http://i.ytimg.com/vi/Vwa0HenQMi4/mqdefault.jpg)
server side rendering code start at 11:33
You should use npx to execute binaries from the .bin folder. Npx will help the node runtime to select the right binary for you. Moreover, the syntax of your scripts will be much cleaner.
Finally, the react episode. Thanks. But what about routing and flux/redux state?
The approach I've met is to import store in server and pass its contents through a global variable (e.g. window.INITIAL_STATE=${store}) in index.html you pass to a client.
Hi, im currently looking for this too, if you dont mind if there any example for this please reply this comment with the source for the example. Thank you
Nice! Javascript has really come a long way. Nice to see that the language is maturing and by combining it to the awesome tools like React and Firebase development becomes just a breeze and a pure joy. Keep it up guys!
Beautiful React SSR Tutorial
Thanks for this tutorial. BTW, a tutorial on how to bundle cloud functions files using Webpack would be great!
Is that basically what next.js does automatically for me?
i guess so...
Nice tutorial, one note though,
locally installed binaries are available for all scripts in your package.json without prefixing it with node_modules/.bin/binary-name
so in webpack script you could've written webpack directly.
Also, if you were in the project directory you could invoke the node_modules binaries from the terminal with npx, like npx webpack. I believe npx is available from Node 8.
Vinícius Camargo that's cool!
npx is bundled with npm from npm@5.2.0, but you can install it to just like any npm package even on previous version of npm.
If you guys could share a repo of the finished product of these examples that would be so helpful ... makes it way easier to track down why something isn't working when you though you followed along perfectly!!!
if you use babel 7 (current ver), you need to change different dependencies in "package.json"
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"eslint": "^5.14.1",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"express": "^4.16.4",
"firebase-admin": "^7.0.0",
"firebase-functions": "^2.2.0",
"firebase-tools": "^6.4.0",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3"
}
and ".babelrc" file
{
"presets": [
"@babel/preset-env", "@babel/preset-react"
]
}
Hi, i came a cross this video since im searching for dynamic tags for my web app.hope this is a good step and gonna now to searching how to combine all these benific things with my project .Thank you very mutch
how did you put index.html in the functions folder ? as far as i know you can not access it in the public folder from functions
got any solution for this?
Same Error-
Error: Error occurred while parsing your function triggers.
Error: ENOENT: no such file or directory, open 'E:\thisisme\SSR\functions/index.html'
@@anantrungta7984 have you tried nextjs? it's easier than customising react for SSR.
I created a github repository to implement the source code for the Firebase tutorials. The source code for this video is here: github.com/littlewhiteball/FirebaseTutorial/tree/master/Server-sideRenderingReact
Welcome to add more source code for other videos to the repository! Let's share and make it easier for others :)
The webpack parts are entierly depricated
You guys should really put the code in your videos to git. I love these and need these but being a beginner I have to watch multiple times. Would really help to have the final code to look at. Cheers.
how transpile css file when use import './App.css'; in server rendering
got any solution Mr Behnam?
Excellent tutorial!
Would be interesting to see preact SSR
Awesome guys.. Really helpful!
Been following this tutorial from the beginning. "firebase serve --only functions,hosting" command runs, but I dont see a SSR version. I see what I have on the public folder. Either something on the firebase api changed, or you're missing something...?
I had the same issue. Remove the index.html file from your public folder. It's taking preference over your cloud function. At least that was my issue.
Awesome thanks for sharing this!
Getting this error -Error: Error occurred while parsing your function triggers.
Error: ENOENT: no such file or directory, open 'E:\thisisme\SSR\functions/index.html'
After firebase deploy- coz there is no index.html file in functions folder. HELP!
Solved : Write it manually gyuz
16:24
change the second node_modules//bim/babel ro just babel. It will not currently work otherwise.
Hey David East, I found your doppelganger on youtube, another youtuber with a German channel named Die Frage, and he's German. I sent him a comment to make a video about meeting you in US (or you him in Germany, who knows). I hope he reads my comment there and takes interest. I hope you take interest too. Might be awesome.
Oh well, it's look like a big gambiarra :v
And i didnt' understand the need of the ./functions folder and why create it "manually", it can't be done with webpack? and webpack didn't transpiled the file to use commonjs require?
Can you make a new one with create-react-app?
How do you exclude specific components from being rendered on the server-side?
what advice would you give a beginner developer on server side rendering ?
Really like the video. Could you please share the themes you had used ?
Thank you so much.... 👍
no need of including node_modules/.bin in npm scripts. npm do that for you.
How to use ssr for specific component in React ?
HI, great Video... I always struggle fetching json data, selecting objects and injecting those values into html and now that I am getting started with react-native it seems a bit more complex. Can you suggest a website or webtool where I can experiment with different fetching tools to request API data, so that I can become more familiar and experienced handling json files and API requests? Thanks
I followed most of this, except why a separate copy of all the component scripts? Can't the client and server use the same build files. They both have to transpile anyway.
Awesome!
What font are you using on vs code, so legible😁
Are there any difference between isomorphic-fetch and normal fetch? Seems like an usage and a syntax are same
Thank you!!!!!!!!!!!!
You better start from the invention of the alphabet!
Can you make a similar tut for angular as well I'm hitting my head against wall since past few weeks but no success. I tried tapping keyboard as well though.
Dont you have to authenticate before fetching the data from firebase?
7:54 Could also match for an optional "x" character in your regex, so you only have one test, e.g. /\.js[x]?$/
the optional [] is not necessary neither, the ? applies to 1-0 ocurrences, so using /\.jsx?$/ is valid too
@13:25 - what happens if a new "fact" is created in database and user opens the URL? Will the server cache still be active and show the old data only? How can I invalidate server cache?
Yeah I think it will serve the old data for a certain period, however the client js will probably be executed at some time and will replace the server side rendered html with the actual react app on the browser (of course with the updated data).
that is what I thought too.. however if we plan to use this for say "public profile" page, it will not be nice to ask user to wait 10 min to see his/her changes. I can reduce the cache duration, but it will kill the purpose and end up using too much resources. Does anyone know what could be the best solution here?
I mean, once the javascript on the client is executed, it will replace the server rendered old data with the new data. JS execution on the client will mostly take less than 5 secs to render, so users will just have a glimpse of the old data and will be immediately replaced by the new data. At this point, the caching is probably not an issue.
at 5:03, how do you get your arrow function to look like ⇒ in vs code
⇒ github.com/tonsky/FiraCode/wiki/VS-Code-Instructions 🙌
Mrinmay Mukherjee google "vscode ligatures"
Ok, I am a newbie, but shouldn´t you explain why we would need this?
Understanding why & with some quick history or background would help, rather then just deep diving.
Great video though.. Thanks!
ruclips.net/video/GQzn7XRdzxY/видео.html
The most important reason is usually SEO. Search engines besides Google have problems rendering SPAs.
This is just a useful tutorial on deploying to Firebase - if you use that. And I believe the main reason for SSR is performance.
I agree with you! People forget to explain why
Please make a video Server-Side Rendering Vue
how do i get my vscode to look like this
IS this still relevant or is everyone using Next (which I a trying to avoid)
hey, what font are you using?
⚠ ReferenceError: self is not defined, gives error when i run `node_modules/.bin/firebase serve --only functions,hosting`
How to ssr for multipage app?
please make a new video on this.
is this tutorial outdated? most of packages get deprecated warns and won't run
That stuff at the start pre 11 min. is that basically what "create react app" does?
just creates a react app. Install the node js and run the command to create a new react app.
pretty much
Anyone knows the link to the source code repository of this project?
nice
Where is the link to the github repo?
github.com/davideast/react-ssr-firebase-hosting
11.03 is that a webkit you are running on your Local Host?
hey, if the public folder doesn't contain index.html , I am unable to deploy the on firebase. Firebase is giving internal server error. But if I add index.html in public folder, than SSR not working. Firebase is serving from bundle.js. I am unable to see dom element in view source. Can anyone help me ?
you can get this file path.resolve(__dirname, "..") + "/public/index.html" by getting the sibling folder first and then index.html
Nice but, im using create-react-app
SSR vs PWA? Is possible to use SSR with PWA?
You can use them together. SSR is just responsible for the HTML response to the initial page request. PWA is supported by fetching a Javascript file in a separate request. Once the JS for PWA is installed locally, you can avoid making the page request.
What font are you using in this video?
Fira Code
Source code?
You can check the github repository I created for the Firebase videos:
github.com/littlewhiteball/FirebaseTutorial/tree/master/Server-sideRenderingReact
thanks!
yeah, rendering to string is a terrible idea if you have a big chunk of content on your dom. Ideally you should render to a node streaml so that you can split your html into small chunks and have them quickly sent out to the client in order to reduce the time to first byte
The explanations are, to me. not clear. How is it that React not already rendered by a server? When you go to a URL, aren't you requesting info from a server? As usual, the tech person trying to explain what something is overlooks this extremely obvious point of confusion.
19:34
"Webpack is RUN on Node." Are there any programmers other than me who can get this right? You'd think people who spend their entire lives working with grammars and syntax would be able to use grammar or syntax...
Provide git repo for beginner.
github.com/davideast/react-ssr-firebase-hosting
In a real app, we never pass props to the App component!. Looks like it serving a static html page.
Too quick. It's very difficult to understand.
next.js + firebase hosting really sucks
VUE PLEASE QQ
¡Coming soon! ...
We hope so :)
Check this link => ruclips.net/video/nbTn1czE2L8/видео.html ;)
I hope they use Nuxt
Nuxt!!!
very outdated. a lot of things have changed now.