Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pettiboy/cra-template-firebase-starter
A quick start Create React App template with react-router-dom, material-ui, gh-pages and firebase. With google authentication, routing and deployment capabilities built in.
https://github.com/pettiboy/cra-template-firebase-starter
authentication cra-template create-react-app deploy firebase gh-pages javascript material-ui mui react react-router react-router-dom signinwithgoogle template
Last synced: 3 months ago
JSON representation
A quick start Create React App template with 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-firebase-starter
- Owner: pettiboy
- License: mit
- Created: 2022-01-21T08:56:43.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-23T16:15:29.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T01:31:47.353Z (3 months ago)
- Topics: authentication, cra-template, create-react-app, deploy, firebase, gh-pages, javascript, material-ui, mui, react, react-router, react-router-dom, signinwithgoogle, template
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/cra-template-firebase-starter
- Size: 3.41 MB
- Stars: 22
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Create React App Firebase Starter Template
[](https://npmjs.com/package/cra-template-firebase-starter)
[](https://npmjs.com/package/cra-template-firebase-starter)
[](https://raw.githubusercontent.com/pettiboy/cra-template-firebase-starter/main/LICENSE)
[](https://github.com/pettiboy/cra-template-firebase-starter/pulls)
Make sure you ⭐️ this [`repository`](https://github.com/pettiboy/cra-template-firebase-starter) if you find it helpful or interesting :)
## ✨ Installation
```bash
npx create-react-app your-project-name --template firebase-starter
```
OR
```bash
yarn create react-app your-project-name --template firebase-starter
```
`NOTE:` This `template` is also available in `TypeScript` [here](https://github.com/pettiboy/cra-template-typescript-firebase).
## ⚙️ 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`.
```js
{
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.js
│ │ | ├── AuthContainer.js
│ │ | ├── Logout.js
│ │ ├── utils
│ │ | ├── Center.js
│ ├── config
│ │ ├── firebase.config.js
│ │ ├── firebase.js
│ │ ├── routes.js
│ ├── screens
│ │ ├── Login.js
│ │ ├── Home.js
```
## 📝 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).