Full Stack React & Firebase Tutorial

This repo follows Classed's tutorial series: Full Stack & Firebase Tutorial - Build a social media app, which is also available here as one single video. The JavaScript repos for the Firebase Functions and React Client can be perused to see what differences exist between my TypeScript and the instructor's JavaScript implementations.

After cloning the repo

Create a file /socialape-functions/functions/src/firebaseConfig.ts and fill it with your webapp config:

// copy paste the following from Settings | General | Your apps | Firebase SDK snippet
const firebaseConfig = {
    apiKey: "**",
    authDomain: "**",
    databaseURL: "**",
    projectId: "**",
    storageBucket: "**",
    messagingSenderId: "**",
    appId: "**",
    measurementId: "**"
};

export default firebaseConfig;

Then

cd socialape-functions
cd functions
npm install
npm run build

To debug, run firebase emulators:start --inspect-functions

Notes

9:35 npm install -g firebase-tools

10:18 firebase login

10:47 md socialape-functions

cd socialape-functions

firebase init Select Functions: Configure and deploy Cloud Functions; Use an existing project; socialape--xxxx

What is the practice on committing firebase files in a NodeJS app?

12:04 firebase deploy

20:48 if trying createScream, and you get Error: Value for argument "data" is not a valid Firestore document., make sure the POST request is sending data as JSON and not Text. See https://i.stack.imgur.com/Mb3re.png

firebase serve to server the application locally.

If you get the error Error: Could not load the default credentials., go to Firebase Console's Project Settings, select Service accounts, and Generate new private key, then set GOOGLE_APPLICATION_CREDENTIALS to the key JSON file:

set GOOGLE_APPLICATION_CREDENTIALS=F:\serviceAccountKey.json

26:22 Handling GET requests to createScream.

28:38 Install express:

cd functions
npm install --save express

43:28 Install firebase NPM

cd functions
npm install --save firebase

1:22:38 Extend Express Request object using Typescript

1:50:37 Install busboy:

cd functions
npm install --save [email protected] @types/busboy

or, if you want to use the latest version of busboy, without corresponding types, add "noImplicitAny": false, to tsconfig.json.

1:55:32 Also, I use node-temp instead of the crazy way of generating temp file names with Math.random():

npm install temp @types/temp

2:09:43 The use of req.rawBody is deprecated. For now, one can simply use:

// @ts-ignore
busboy.end(req.rawBody);

4:26:33 npm install -g create-react-app, then create-react-app socialape-client --template typescript

4:31:00

npm install --save react-router-dom
npm install @types/react-router-dom

4:34:12 npm install -save @material-ui/core

4:51:02 npm install --save axios

5:14:08 npm install --save dayjs dayjs is a lightweight alternative to momentjs.

5:58:42 npm install --save jwt-decode @types/jwt-decode

6:03:29 How to use spread properties in Typescript+React, and Typescript - how to omit properties so a subset can be transferred with spread?

#18 Redux Setup: What Does Redux Do? (and when should you use it?) and Immutability in JavaScript using Redux. Also Usage with TypeScript. And Use Redux Devtools Extension Package from NPM

npm install --save redux react-redux redux-thunk @types/react-redux

#20 Profile section: Material Icons npm install --save @material-ui/icons

---

Misc Resources

• ECMAScript 2019 Language Specification
• You Don't Know JS
• What the heck is the event loop anyway?
• TypeScript Resources
• Plain JavaScript vs React
• React vs Vue
• React app sample with TypeScript
• React Router Introduction
• Protected routes and authentication with React Router v4
• React Typescript Tutorial
• How to Use React Router in Typescript
• TypeScript and React: Children
• React children composition patterns with TypeScript
• Example Code for Use of Strong Typing in Redx and an explanation.
• Using TypeScript With Material UI.
• Getting Started With Redux and TypeScript and repo.
• Strongly-typed React Redux Code with TypeScript
• React & Redux in TypeScript

To use withStyles with withRouter in TypeScript, the component should be created like this:

import {createStyles} from "@material-ui/core";
import { RouteComponentProps, withRouter } from "react-router-dom";
import withStyles, {WithStyles} from "@material-ui/core/styles/withStyles";

const styles = createStyles({
    // styles
}

interface Props {
    // properties
}

interface State {
    // states
}

class CustomComponent extends Component<Props & RouteComponentProps & WithStyles<typeof styles>, State> {
    // ...
}

export default withStyles(styles)(withRouter(CustomComponent));