Create-reactfire-app NPM

Create Reactfire App

User Guide – How to develop apps using React web app and Firebase by Reactfire.

Create Reactfire App works on macOS, Windows, and Linux. If something doesn’t work, please file an issue. If you have questions or need help, please email arctdav.

Quick Overview

Copy config from Download Firebase config file or object

Before starting, please change the following files according to your projects on Firebase website. Change /src/firebaseConfig.js and /firebaserc

npx create-reactfire-app my-app
cd my-app
npm install --g firebase-tools
firebase login
firebase init
npm start

If you've previously installed create-reactfire-app globally via npm install -g create-reactfire-app, we recommend you uninstall the package using npm uninstall -g create-reactfire-app or yarn global remove create-reactfire-app to ensure that npx always uses the latest version.

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

When you’re ready to deploy to production, create a minified bundle with npm run build.

Then, run npm run deploy, then npm run deploy to start hosting on firebase.

Get Started Immediately

You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

Create a project, and you’re good to go.

Creating an App

You’ll need to have Node 14.0.0 or later version on your local development machine. We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-reactfire-app my-app

(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm i -g create-reactfire-app
create-reactfire-app my-app

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── firebaseConfig.json
    └── setupTests.js
    └── reportWebVitals.js

Please change firebaseConfig.json according to your Firebase project, before starting No complicated folder structures. Once the installation is done, you can open your project folder: