🔥 Firebase PWA Starter

This is an opinionated Progressive Web App (PWA) starter. This template focuses on emulating a seamless native mobile experience, ensuring there's no unnecessary overscroll. Get ready to build powerful PWAs with a touch of elegance!

Tech Stack

React PWA with Material UI and Firebase

Preview

No overscroll or mismatching status bars, looks just like a native mobile application! 😊

Getting Started

Local Development

Follow these steps to set up the project for local development:

1. Run the command to spin up the PWA starter:

   npx create-react-app my-app --template cra-template-firebase-pwa-starter

   or if you are already in a new directory for your project

   npx create-react-app . --template cra-template-firebase-pwa-starter

   This also installs all the necessary dependencies to get you started.

2. Start the development server:

   npm start

3. Congratulations! Now you have a working PWA. Now if you want to deploy your PWA on Firebase, please follow the guide in the next few sections.

Optional

Firebase Setup

First setup your project in Firebase

1. Create a Firebase account
2. Go to your Firebase Console
3. Create a new project. [guide]
4. Register your app [guide]

Deployment

Please make sure you have a firebase project setup.

To deploy your application to a staging environment and access it on your mobile device, follow these steps.

Make sure you have Firebase CLI installed

npm install -g firebase-tools

If you haven't already, log in to Firebase and initialize it in your repository.

For a step-by-step deployment guide, check out this article

Once initialization is completed, you can use the following scripts for deployment:

deploy:dev

Deploys to the Firebase development environment for preview.

deploy:prod

Deploys to the Firebase live production environment.

deploy:list

Shows a list of running environments.

Building New Pages

When creating new pages, you'll should create the page components in the src/views folder. These components serve as the main content body.

The parent container uses a class called PageContainer, which enables overscroll, touch action, and overflow.

const AboutPage = () => {
    return (
        <div className="PageContainer">
            // Child elements and components here
        </div>
    )
}

export default AboutPage

Take a look at the src/views/Home component for reference.

For style customizations, check out src/App.css.