Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pettiboy/cra-template-typescript-firebase
A quick start Create React App template with TypeScript, react-router-dom, material-ui, gh-pages and firebase. With google authentication, routing and deployment capabilities built in.
https://github.com/pettiboy/cra-template-typescript-firebase
authentication cra-template create-react-app deploy firebase firebase-authentication gh-pages material-ui mui react react-firebase react-router react-router-dom react-starter signinwithgoogle template typescript
Last synced: 2 months ago
JSON representation
A quick start Create React App template with TypeScript, react-router-dom, material-ui, gh-pages and firebase. With google authentication, routing and deployment capabilities built in.
- Host: GitHub
- URL: https://github.com/pettiboy/cra-template-typescript-firebase
- Owner: pettiboy
- License: mit
- Created: 2021-12-29T15:18:24.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-20T16:54:23.000Z (over 2 years ago)
- Last Synced: 2024-11-07T07:46:21.206Z (3 months ago)
- Topics: authentication, cra-template, create-react-app, deploy, firebase, firebase-authentication, gh-pages, material-ui, mui, react, react-firebase, react-router, react-router-dom, react-starter, signinwithgoogle, template, typescript
- Language: TypeScript
- Homepage: https://pettiboy.github.io/cra-template-typescript-firebase/
- Size: 4.33 MB
- Stars: 28
- Watchers: 1
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Create React App TypeScript Firebase Starter Template
[](https://npmjs.com/package/cra-template-typescript-firebase)
[](https://npmjs.com/package/cra-template-typescript-firebase)
[](https://raw.githubusercontent.com/pettiboy/cra-template-typescript-firebase/main/LICENSE)
[](https://github.com/pettiboy/cra-template-typescript-firebase/pulls)
Make sure you ⭐️ this [`repository`](https://github.com/pettiboy/cra-template-typescript-firebase) if you find it helpful or interesting :)
## ✨ Installation
```bash
npx create-react-app your-project-name --template typescript-firebase
```
OR
```bash
yarn create react-app your-project-name --template typescript-firebase
```
`NOTE:` This `template` is also available in `JavaScript` [here](https://github.com/pettiboy/cra-template-firebase-starter).
## ⚙️ Usage
### SetUp firebase
1. Go to your [`Firebase Console`](https://console.firebase.google.com/)
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`.
```tsx
{
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:
```bash
npm i -g serve # install serve globally via npm
npm run build-and-serve
```
4. Deploy to GitHub Pages run:
```bash
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`](https://github.com/rafgraph/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
- Hussain Pettiwala ([@pettiboy](https://github.com/pettiboy))
Special thanks to this well written [`blog`](https://grischuk.de/how-to-create-custom-create-react-app-cra-templates) and this [`repo`](https://github.com/alexandr-g/cra-template-typescript-redux) by [alexandr-g](https://github.com/alexandr-g).