Server-side Rendering React from Scratch! (Server-side Rendering with JavaScript Frameworks)
Articles,  Blog

Server-side Rendering React from Scratch! (Server-side Rendering with JavaScript Frameworks)


55 Comments

  • Ahmed Ayoub

    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.

  • Ramu

    @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?

  • Stian Maurstad

    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!

  • MyCloudVIP

    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

  • Silviu Marinescu

    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

  • Ebrahim Aboalnaga

    Hi , i do every thing but at final step while i deploy the project i have this error
    i functions: preparing functions directory for uploading…
    Error: Error occurred while parsing your function triggers.
    Error: ENOENT: no such file or directory, open '/private/var/folders/kt/r8fqj0_94p910k6hm3y0l0140000gn/T/fbfn_796082v7CbBogzzDindex.html'

    What can i do to fix this problem and what i miss
    thanks in advance

  • Finn Crisp

    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!

  • Risong Na

    I created a github repository to implement the source code for the Firebase tutorials. The source code for this video is here: https://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 🙂

  • flyingguitarman2727

    Hey I’m having issues after following the tutorial… it’s not the tutorial itself that’s the issue. It’s the implementation of using images in the SSR app… https://stackoverflow.com/questions/47744898/images-in-a-react-ssr-firebase-app

  • ynp7

    "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…

  • Mohd Danish Yusuf

    Hey David. I follow this video and succesfully deploy on firebase hosting but ssr not work on this route https://dashboard-24f16.firebaseapp.com/ but it's working here https://dashboard-24f16.firebaseapp.com/us-central1/ssrapp please tell where I'm wrong.

    Thanks

  • MrKausti

    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.

  • Shubhendra Raj

    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 ?

  • Alex Nezhynsky

    7:54 Could also match for an optional "x" character in your regex, so you only have one test, e.g. /.js[x]?$/

  • Fabian Vilers

    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.

  • Saurabh Kumar Vatsal

    https://github.com/davideast/react-ssr-firebase-hosting is giving 404 ,Could you please provide a working git URL.

  • ISHAN MAHAJAN

    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.

  • Vitor Silvério de Souza

    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?

  • danillner

    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"
    ]
    }

  • Gourav Kumar

    Good Job,

    I am new with SSR in React. I was just following this video and also download the code from the repository but it is not working for me. you can check via these Url https://noon-d8f50.firebaseapp.com.

    Can you share uploaded web Url or something else?

  • Matin Sasan

    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.

  • André Venâncio

    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…?

  • anuj singh

    ⚠ ReferenceError: self is not defined, gives error when i run `node_modules/.bin/firebase serve –only functions,hosting`

Leave a Reply

Your email address will not be published. Required fields are marked *