Nitrogen Peroxide Monoxide

    cra-template-typescript-firebase

    1.0.0 • Public • Published

    Create React App TypeScript Firebase Starter Template

    npm npm License MIT PRs Welcome

    React TypeScript NPM

    Make sure you ⭐️ this repository if you find it helpful or interesting :)

    Installation

    npx create-react-app your-project-name --template typescript-firebase

    OR

    yarn create react-app your-project-name --template typescript-firebase

    NOTE: This template is also available in JavaScript here.

    ⚙️ Usage

    SetUp firebase

    1. Go to your Firebase Console

    2. Click on Add project.

      • Follow steps and create project.
    3. Click on web icon.

      • Register web app.
      • You will get details for setting up Firebase SDK.
    4. Add the config details in your .env file (available in root of your project).

    SetUp SignIn with google

    1. In your project console, click on Authentication and Get Started.

    2. In Sign-in method, click on Google.

    3. Toggle Enable and click on Save.

    To create a new screen

    1. Create a new component in src/screens.

    2. In your src/config/routes.ts.

    {
        path: "/your-route",
        component: YourScreenComponentName,
        name: "Screen Name For Reference",
        protected: false, // if user needs to be authenticated to access this screen
    }

    To Deploy on GitHub Pages

    1. Add your domain (your-github-username.github.io) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.

    2. update the homepage field in your package.json to the domain you are hosting on. (By default it is: http://your-github-username.github.io/your-repo-name)

    3. (Optional) Test production build locally: Update the homepage field to / and run:

    npm i -g serve # install serve globally via npm
    npm run build-and-serve
    1. Deploy to GitHub Pages run:
    npm run deploy

    Featues

    1. Routing

    Routing setup using react-router-dom.

    • With easily implementable private routes (routes only authenticated users can use).

    • Easily add new screens.

    2. Authentication

    Authentication implemented implemented

    SignIn with Google implemented using firebase and react-firebase-hooks.

    3. Firebase Configured

    Firebase configured with GoogleAuthProvider implemented.

    4. Material UI

    Login Screen UI built using @mui/material.

    5. Deploy on Github Pages

    Deploying on GitHub pages powered by gh-pages and spa-github-pages

    🔧 File Structure

    ├── src
    │   ├── components
    │   │   ├── auth
    │   │   |   ├── AuthChecker.tsx
    │   │   |   ├── AuthContainer.tsx
    │   │   |   ├── Logout.tsx
    │   │   ├── utils
    │   │   |   ├── Center.tsx
    │   ├── config
    │   │   ├── firebase.config.ts
    │   │   ├── firebase.ts
    │   │   ├── routes.ts
    │   ├── screens
    │   │   ├── Login.tsx
    │   │   ├── Home.tsx
    

    📝 Authors

    Special thanks to this well written blog and this repo by alexandr-g.

    Install

    npm i cra-template-typescript-firebase

    DownloadsWeekly Downloads

    10

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    43.3 kB

    Total Files

    29

    Last publish

    Collaborators

    • pettiboy