npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fireactjs/core

v1.1.2

Published

fireactjs-core is the core package for building web applications with Firebase and Reactjs in a simple and fast approach. Its key features include:

Downloads

86

Readme

What is @fireactjs/core?

fireactjs-core is the core package for building web applications with Firebase and Reactjs in a simple and fast approach. Its key features include:

  • Built-in Firebase authentication features for users to sign up and sign in
  • Built-in user profile features for users to change email, and password and delete user accounts
  • Template base design for easy customization
  • Component base architecture that supports full customization
  • Easy to extend additional features

Live demo

To experience the package, go to https://demo.fireactjs.com

Documentation

For documentation of the package, go to https://fireactjs.com/docs/core-package/

Installation

To install the fireactjs-core components, create your Reactjs project first, and then run npm I @fireactjs/core to install the components.

npx create-react-app my-app
cd my-app
npm i @fireactjs/core react-router-dom firebase @mui/material @mui/icons-material @emotion/react @emotion/styled

For details on how to create a Reactjs application, please see https://reactjs.org/docs/create-a-new-react-app.html

Setup your Firebase project

As @fireactjs/core is built on Firebase and Reactjs, you will need to have a Firebase project. Go to the Firebase website and create a project.

Create a web app

In your Firebase Project settings → General, click the “Add app” button to create a new web app. You will the instructions on install the firebase npm package and a JSON configuration named firebaseConfig which you will need to configure your @fireactjs application.

Create a file called firebaseConfig.json in the /src folder and copy the firebaseConfig JSON to the file similar to the format below.

{
    "apiKey": "...",
    "authDomain": "...",
    "projectId": "...",
    "storageBucket": "...",
    "messagingSenderId": "...",
    "appId": "..."
}

Enable authentication methods

After you create your Firebase project, go to the project console and enable the authentication methods you plan to use for your web application. @fireactjs/core supports the following authentication methods:

  • Email and password
  • Google
  • Facebook
  • Microsoft
  • Twitter
  • Github
  • Apple

Some of the authentication methods require you to register your web application in the authentication platforms (e.g. Facebook). Please make sure you complete the necessary steps to enable the authentication methods.

Create a file called authMethods.json in the /src folder and copy the following JSON to the file, then set the authentication methods that you enabled to true otherwise to false.

{
	"google": true,
	"facebook": true,
	"microsoft": true,
	"apple": true,
	"twitter": true,
	"github": true
}

Initialize your Firebase project

Run firebase login to sign in to your Firebase account and then run firebase init to initialize your Firebase project locally.

Update Firestore rules

Update your firebase.rules with the code below.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
    match /users/{userId} {
      allow read, update, create: if request.auth.uid == userId;
    }
  }
}

Modify App.js

Replace the code in your src/App.js with the code below. You can copy the code from https://github.com/fireactjs/core-demo/blob/main/src/App.js

import './App.css';
import firebaseConfig from "./firebaseConfig.json";
import { pathnames, ActionPages, AppTemplate, AuthProvider, AuthRoutes, FireactProvider, MainMenu, PublicTemplate, ResetPassword, SignIn, SignUp, UserMenu, UserProfile, UserUpdateEmail, UserUpdateName, UserUpdatePassword, UserDelete } from '@fireactjs/core';
import { BrowserRouter, Routes } from "react-router-dom";
import { Route } from "react-router-dom";
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';
import { CircularProgress, Box } from '@mui/material';
import authMethods from "./authMethods.json";

const Logo = ({size, color}) => {
	const logoColor = color || 'warning';
	return (
		<LocalFireDepartmentIcon color={logoColor} fontSize={size} />
	);
}

const Loader = ({size}) => {
	let cpSize = "35px";
	switch(size){
		case "small":
			cpSize = "30px";
			break;
		case "medium":
			cpSize = "35px";
			break;
		case "large":
			cpSize = "45px";
			break;
		default:
			cpSize = "35px";
			break;
	}
	return (
		<Box sx={{ display: 'flex', justifyContent: "center", alignItems: "center"}}>
			<CircularProgress color="warning" size={cpSize} />
			<div style={{position: "absolute" }}>
				<Logo size={size} />
			</div>
		</Box>
	);
}

function App() {

	const config = {
		firebaseConfig: firebaseConfig,
		brand: "FIREACTJS",
		pathnames: pathnames,
		authProviders: authMethods
	}

	return (
		<FireactProvider config={config}>
			<AuthProvider>
				<BrowserRouter>
					<Routes>
						<Route element={<AuthRoutes loader={<Loader size="large" />} />} >
							<Route element={<AppTemplate logo={<Logo size="large" />} toolBarMenu={<UserMenu />} drawerMenu={<MainMenu />} />}>
								<Route exact path="/" element={<></>} />
								<Route exact path={pathnames.UserProfile} element={<UserProfile />} />
								<Route exact path={pathnames.UserUpdateEmail} element={<UserUpdateEmail />} />
								<Route exact path={pathnames.UserUpdateName} element={<UserUpdateName />} />
								<Route exact path={pathnames.UserUpdatePassword} element={<UserUpdatePassword />} />
								<Route exact path={pathnames.UserDelete} element={<UserDelete />} />
							</Route>
						</Route>
						<Route element={<PublicTemplate />}>
							<Route path={pathnames.SignIn} element={
								<SignIn
									logo={<Logo size="large" />}
								/>
							} />
							<Route path={pathnames.SignUp} element={
								<SignUp
									logo={<Logo size="large" />}
								/>
							} />
							<Route path={pathnames.ResetPassword} element={
								<ResetPassword
									logo={<Logo size="large" />}
								/>
							} />
							<Route path={pathnames.ActionPages} element={
								<ActionPages
									logo={<Logo size="large" />}
								/>
							} />
						</Route>
					</Routes>
				</BrowserRouter>
			</AuthProvider>
		</FireactProvider>
	)
}

export default App;

Replace Brand and Logo to customise the logo and the brand of your web application.

For further customisation, please read the documentation.

Update Firebase template action URL (Optional)

Go to your Firebase project authentication → Templates, then click on the Edit Template button, and then click on “Customize action URL”. Use https://www.yourdomain.com/auth-action as the custom action URL and replace www.yourdomain.com with your actual application domain.

Run your app locally

By now, your app is ready for the first run locally. Use the command npm start to start the app.

Deploy to Firebase

After testing locally, your app is ready to be deployed to Firebase hosting.

Build

Run npm run build to build your app

Deploy

Run firebase init to initialize your project with Firebase and then run firebase deploy to deploy your app to Firebase. If you see a blank screen in your production URL, make sure you set the build as the folder in your Firebase settings.