Server-side Rendering React from Scratch! (Server-side Rendering with JavaScript Frameworks)
Why Stack Overflow recommends it
Stack Overflow users link it as the go-to walkthrough for React SSR on Firebase, and many questions come from people following its setup who hit Webpack, Babel or functions errors.
Recommended by 2 people across 2 different months, 2018 to 2021.
What it is
A Firebase channel tutorial, presented by David East, that walks through setting up server-side rendering for a React app. It uses Webpack, React DOM Server and Babel to build one codebase that runs in both browser and server, then serves it through Firebase Hosting and Cloud Functions.
What people said
Recommends Patrickkx · 2018-02 · Stack Overflow · on “Server side rendering with Firebase”
Recently Im struggling with enabling server side rendering with Firebase. I was following David East tutorial on youtube: [this video] aswell as his github repo with that project: [LINK] However, the github repo is slightly different than the app he made on youtube so it may cause some confusions :/ Anyways, my issue is that Im missing some little part to this whole puzzle. So first of all , my app has following structure: - app -- index.html -- rest of files, store, app.js etc -- all folders with components etc - functions (google cloud functions) -- index.js (holding my functions and code responsible for the SSR) -- app (every file of my app compiled by babel, so I can render it to string) -- p
Recommends Kashif Siddiqui · 2018-06 · Stack Overflow · on “Adding server-side rendering to existing React+Redux+React-Router App hosted on Firebase”
Since you are already using Firebase you can utilize Firebase functions. Just setup a new function which intercepts your http request and then you just fetch all the stuff you need and render to a string with react routers render to string method. There is a good tutorial covering all the bits and pieces of this here [this video]
Cites Asif Ansari · 2018-02 · Stack Overflow · on “React, Express, Node, Python”
You can choose one the path to full fill your requirements. Create A REST API To Consume Express App SSR(Server Side Render for your React App) Because you have used create-react-app I would personally advise you to go with Option 1, in your express app create an end-point to process a file. In Your react-app do a fetch call with the image local URL to Upload it to your Express Server and process as you want and return a New URL of Modified Image. and Show it User On frontEnd. In Order deploy your React-App You can use Google Firebase its free of Cost At least for hosting with FREE standard SSL. For Sake of Ease given by Firebase, i use Firebase Function for Server-side Render, a good get st
Cites SkrewEverything · 2018-06 · Stack Overflow · on “Cannot read property https of undefined error in firebase functions”
I'm following this [this video] for server-side react rendering. (I followed the exact directory structure as the video by the way.) But I'm getting an error whenever I try to serve it: i functions: Preparing to emulate functions. ⚠ hosting: Port 5000 is not available. Trying another port... i hosting: Serving hosting files from: dev ✔ hosting: Local server: [LINK] ⚠ functions: Failed to load functions source code. Ensure that you have the latest SDK by running npm i --save firebase-functions inside the functions directory. ⚠ functions: Error from emulator. Error occurred while parsing your function triggers. TypeError: Cannot read property 'https' of undefined at Object.<anonymous> (/Users/mac/D
Cites ajorquera · 2019-09 · Stack Overflow · on “Error while deploying react based SSR app, using firebase-functions”
It is possible, but you cannot serve static assets with cloud functions. You need a mix of firebase functions and firebase hosting. The guys at Firebase already thought on this and you also have an implementation available. Check the following documentation: Overview [LINK] Dynamic Content [LINK] Code Example [LINK] [this video] Note: There is a delay that you need to take into consideration when using cloud functions. When a new instance handles its first request, the response time suffers, which is called a cold start More info [LINK]
Cites cbdeveloper · 2019-10 · Stack Overflow · on “Firebase cloud functions bundled with webpack?”
I'm trying to implement SSR for some routes (for crawlers that I'll detect based on User-Agent). So I'm willing to write my app's code in a way that it works both on client and on the server. In this SSR tutorial [this video] on Firebase YT channel, he transpiles all of his app files and his `index.js` (functions folder) file using Babel. I thought it would be weird to transpile like 300 files and replicate them into the functions folder. I thought it would be nicer to bundle them since I'm already using webpack for client. Am I on the right track here? Thanks
Cites Tom · 2019-12 · Stack Overflow · on “Webpack throws error on React image import”
I'm trying to implement SSR using React (create-react-app) and Firebase. To do so, I'm currently working on my webpack configuration following this tutorial [this video] and github dir [LINK] : module.exports = [{ entry: './src/index.js', module: { rules: [ {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.css$/i, use: ['style-loader', 'css-loader']}, ] }, output: { filename: 'public/bundle.js', path: __dirname } }]; I have an assets folder with some images. Somehow for all imports, webpack returns the following error: ERROR in ./src/assets/images/capture_5_move_on/1.JPG 1:0 Module parse failed: Unexpecte
Cites Tony · 2019-12 · Stack Overflow · on “Where is the config. problem in this Firebase and React App?”
App is based on 2-year old tutorial at [this video] Since the tutorial is over 2 years old, I've made config changes that diverge from what is brought up in the tutorial, but I don't seem to be making any headway. package.json { "name": "functions", "description": "Cloud Functions for Firebase", "scripts": { "serve": "firebase serve --only functions", "shell": "firebase functions:shell", "start": "npm run shell", "deploy": "firebase deploy --only functions", "logs": "firebase functions:log", "webpack": "node_modules/.bin/webpack -d" }, "engines": { "node": "8" }, "dependencies": { "@babel/preset-env": "^7.7.6", "@babel/preset-react": "^7.7.4", "consolidate": "^0.15.1", "es6-promise": "^4.2.8", "e
Cites Tom · 2019-12 · Stack Overflow · on “Webpack throws SyntaxError using react state”
I'm trying to implement SSR using React (create-react-app) and Firebase. To do so, I'm currently working on my webpack configuration following this tutorial [this video] and github dir [LINK] : module.exports = [{ entry: './src/index.js', module: { rules: [ {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/}, {test: /\.(png|jpe?g|gif|svg|otf)$/i, loader: 'file-loader', exclude: /node_modules/}, ] }, output: { filename: 'public/bundle.js', path: __dirname } }]; Somehow for react states, webpack returns the following error: SyntaxError: /Users/timfuhrman
Cites Egoi Cantero Viqueira · 2021-09 · Stack Overflow · on “Which is the best approach to add Server Side Rendering on a MERN aplication created with CRA?”
I have been working on a MERN aplication and I would like to add Server Side Rendering for faster loading times and SEO support. Already checked several tutorials, but not sure if this examples are the best approach as I am using Create-React-App . Some of the tutorials I have been following: [this video] [LINK]