Skip to content

Single Page App skeleton project with React.js frontend + Firebase serverless backend

License

Notifications You must be signed in to change notification settings

jacklj/react-firebase-skeleton

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

☠️ react-firebase skeleton

License: MIT

A basic React.js (Create React App) frontend + serverless backend with Firebase Authentication, Firestore and Hosting.

Good for quickly starting new web projects. 🙃

Includes:

  • Account creation and log in pages
  • redux store subscribed to Auth and Firestore state changes
  • basic responsive UI components: header, form elements, page container
  • Create React App
  • routing: react-router-dom
  • state management: redux + @reduxjs/toolkit
  • CSS-in-JS: styled-components
  • absolute imports ('../../components/Button' -> 'components/Button')

🚀 Installation

1. clone repo and install node modules

git clone https://github.com/jacklj/react-firebase-skeleton.git [your-projects-desired-directory-name]
cd [your-projects-desired-directory-name]
yarn

2. install firebase cli globally (if you don't have it already) and log in to your firebase account

npm install -g firebase-tools
firebase login

3. Create your new firebase project on the Firebase website

  • Enable Authentication (email and password), Firestore and Hosting

4. Add your firebase project's credentials

  • in /.firebaserc, set the projects.default field to your firebase project name (alternatively, you can do this using the firebase cli helper firebase init)
  • in /src/firebaseConfig.js, add your firebase project config (these are found in the Firebase console, in Your-project > Settings > General, then scroll down to "Your apps")

🏕 Run frontend locally

yarn start

🦾 Deploy

yarn deploy # does prod build then deploys it to Firebase Hosting