React template with SSR by using Firebase Cloud Functions

Seel the deference bellow

• SSR Live: https://react-firebase-ssr.ridermansb.dev/
• CSR Live: https://react-firebase-nossr.ridermansb.dev/

Pre-requisites

Make sure you have firebase-tools installed

Install all dependencies

npm i
cd functions/ 
npm i

Get Starter

npm start will start webpack-dev-server on port 7003

Run with firebase server

Build the app to generate client.html

rm -rf public && PUBLIC_PATH=http://0.0.0.0:5000 npmR build -- --watch

PUBLIC_PATH is the hosting URL generated by firebase server

Inside functions folder, run webpack in watch mode

rm -rf dist/ && npmR build -- --watch 

Start the server

npmR start:serve -- --host 0.0.0.0

Run with firebase emulators

Build the app to generate client.html

rm -rf public && PUBLIC_PATH=http://0.0.0.0:8000 npmR build -- --watch

PUBLIC_PATH is the hosting URL, check firebase.json file

Inside functions folder, run webpack in watch mode

rm -rf dist/ && NODE_ENV=production npmR build -- --watch 

Start the emulators

npmR start:emulators

---

Tools

Tools that can help you in some way

Performance

• prerender.io
  Allows your Javascript website to be crawled perfectly by search engines.

• react-snap Pre-renders a web app into static HTML. Uses Headless Chrome to crawl all available links starting from the root.

• pagespeed Test your page in all devices

• snyk Enabling more than 400,000 developers to continuously find and fix vulnerabilities in open source libraries and containers

• pingdom.com Enter a URL to test the page load time, analyze it, and find bottlenecks.

• Codeball.ai Approve PRs using AI.

Great tools for SEO

• schema-markup-generator or json-ld-generator
• seositecheckup.com
• rich-results or structured-data
• facebook-og-debug
• linkedin-post-inspector
• twitter-card-validator
• smallseotools

Other tools

• best-marketing-tools
• search-console