react-firebase-starter VS create-react-app

Compare react-firebase-starter vs create-react-app and see what are their differences.

Our great sponsors
  • Nanos - Run Linux Software Faster and Safer than Linux with Unikernels
  • Scout APM - A developer's best friend. Try free for 14-days
  • SaaSHub - Software Alternatives and Reviews
react-firebase-starter create-react-app
1 228
4,366 91,686
0.4% 1.2%
1.7 8.0
25 days ago about 16 hours ago
JavaScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

react-firebase-starter

Posts with mentions or reviews of react-firebase-starter. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-05-11.

create-react-app

Posts with mentions or reviews of create-react-app. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-11-28.
  • What is Create React App? Part 2 (package.json,README & node_modules)
    2 projects | dev.to | 28 Nov 2021
    In part 1 of this series, we learned how to install React using Create React App.
  • What is Create React App? Part 1 (Installation)
    3 projects | dev.to | 27 Nov 2021
    Create React App makes it simple to get started coding in React because it comes with all of the starter files needed to build your projects.
  • Can someone recommend a good design pattern?
    3 projects | reddit.com/r/reactjs | 27 Nov 2021
    I actually don't think it had official support from FB since they weren't using it internally, but the support from various FB employees tapered off over the years. Here's a GH issue about this.
  • Getting started with GraphQL in .NET 6 - Part 3 (Consume with ApolloClient React)
    2 projects | dev.to | 27 Nov 2021
    This project was bootstrapped with Create React App.
  • ☢️ HTML Comment in React
    2 projects | dev.to | 25 Nov 2021
    Generate a React app using Create React App
  • Get Started With ThreeJS
    3 projects | dev.to | 23 Nov 2021
    Anyways, let's initialize a React project. If you want, you could also use something like NextJS, but I'm sticking to Create React App for now.
  • How to generate a TypeScript client from a Swagger documented API
    3 projects | dev.to | 15 Nov 2021
    First of all, I bootstrap a React app using create-react-app (CRA) with a TypeScript template, of course 💅
  • Top 33 JavaScript Projects on GitHub (November 2021)
    29 projects | dev.to | 13 Nov 2021
    #9 facebook/create-react-app
  • Web-push Notification using React and Node js
    1 project | dev.to | 12 Nov 2021
    // This optional code is used to register a service worker. // register() is not called by default. // This lets the app load faster on subsequent visits in production, and gives // it offline capabilities. However, it also means that developers (and users) // will only see deployed updates on subsequent visits to a page, after all the // existing tabs open on the page have been closed, since previously cached // resources are updated in the background. // To learn more about the benefits of this model and instructions on how to // opt-in, read https://bit.ly/CRA-PWA const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); export function register(config) { if ('serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to // serve assets; see https://github.com/facebook/create-react-app/issues/2374 return; } window.addEventListener('load', () => { const swFileName = process.env.NODE_ENV === 'production' ? 'service-worker.js' : 'custom-sw.js' const swUrl = `${process.env.PUBLIC_URL}/${swFileName}`; if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. checkValidServiceWorker(swUrl, config); // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + 'worker. To learn more, visit https://bit.ly/CRA-PWA' ); }); } else { // Is not localhost. Just register service worker registerValidSW(swUrl, config); } }); } } function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) .then(registration => { registration.onupdatefound = () => { const installingWorker = registration.installing; if (installingWorker == null) { return; } installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. console.log( 'New content is available and will be used when all ' + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' ); // Execute callback if (config && config.onUpdate) { config.onUpdate(registration); } } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. console.log('Content is cached for offline use.'); // Execute callback if (config && config.onSuccess) { config.onSuccess(registration); } } } }; }; }) .catch(error => { console.error('Error during service worker registration:', error); }); } function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type'); if ( response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1) ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { window.location.reload(); }); }); } else { // Service worker found. Proceed as normal. registerValidSW(swUrl, config); } }) .catch(() => { console.log( 'No internet connection found. App is running in offline mode.' ); }); } export function unregister() { if ('serviceWorker' in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); } }
  • How does the browser magically see React changes in development?
    1 project | dev.to | 12 Nov 2021
    Several months ago I was new to React. As an experienced developer of classic javascript, one of the most objectionable things about the newer thick client frameworks such as React and Angular is the need to build the client side application to see changes. Let's face it, we are used to only having to refresh the browser page. Fortunately for us the community has has helped us out with this issue, specifically the Create React App community.   So you install Node.js, follow all their instructions and just like magic suddenly the browser refreshes every time you make a change, but how does this happen? The answer is more simple and more complex than you think.

What are some alternatives?

When comparing react-firebase-starter and create-react-app you can also consider the following projects:

nwb - A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

react-boilerplate - :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

nx - Smart, Extensible Build Framework

vite - Next generation frontend tooling. It's fast!

craco - Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app

electron-react-boilerplate - A Foundation for Scalable Cross-Platform Apps

reactpack - :package: build your react apps with one command and one `npm i`.

parcel - The zero configuration build tool for the web. 📦🚀

html5-boilerplate - A professional front-end template for building fast, robust, and adaptable web apps or sites.

react-isomorphic-starterkit

react-redux-starter-kit

Nest - A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 🚀