Crear una aplicación React + Firebase

paso a paso
Ágil de implementar y potente, la combinación de React y Firebase
acelerará enormemente el desarrollo de su aplicación.
Wellington Oliveira Dos Santos Seguir
14 de marzo de 2018 · 15 min de lectura

Sabemos desde hace tiempo que React ha sido la bola del día en
el mundo de JavaScript, incluso con un alcance muy
limitado en comparación con Angular o Vue, esta biblioteca se ha destacado por su
facilidad de uso y soporte de una gran comunidad.

Usando React, en este artículo le mostraremos cómo crear una aplicación usando la
herramienta Firebase Backend As A Service ( BaaS ). Esto nos proporciona una base de
datos en tiempo real, autenticación, alojamiento, acelerando enormemente el tiempo de
desarrollo.

Si ya conoces esta arquitectura, tenemos otras publicaciones interesantes para ti:

Usando React + Redux + Firebase paso a paso.

React-Native + Firebase , y creando aplicaciones IOS y Android con un código.

 Reaccionar + Firebase = ❤

Nuestra aplicación contendrá una tabla que muestra información, lo que permite
insertar, editar y eliminar datos de una base de datos en tiempo real de Firebase. Sin
más, vayamos al grano.

Paso 0: Configuración de Firebase

Si aún no tiene un proyecto de Firebase creado, inicie sesión en su consola de Firebase y
cree un proyecto en Agregar proyecto . Después de eso, copie las claves de su proyecto
haciendo clic en Agregar Firebase a su aplicación web.

En nuestro primer paso, enumeraremos los datos de la base de datos en nuestra

aplicación, utilizamos la siguiente estructura en esta aplicación:

r oot
> lecturas
> clave
> {
temperatura:
humedad de flotación: flotador,
cliente: Cadena,
datos: Cadena,
}

Donde clave es una identificación automática creada por Firebase . Cabe mencionar que
la base de datos en tiempo real de Firebase no está escrita, agregamos los tipos para
explicar el comportamiento posterior. Ingrese algunos datos de muestra sin preocuparse
por uniq_id .

Después de eso, necesitamos un paso especial: configurar las reglas de acceso al banco.
Vaya a Base de datos> Reglas y agregue las siguientes reglas:

{
"reglas": {
".read": verdadero,
".write": verdadero
}
}

Agregando todo lo que sabemos sobre seguridad de la información a la basura,

agregaremos estas reglas de acceso para facilitar el desarrollo, haciendo posible que
cualquier aplicación lea y escriba sin la necesidad de autenticación. En proyectos de
producción, se recomienda encarecidamente utilizar reglas auth!=null , lo que hace que

sea imposible acceder al banco por cualquier persona o aplicación, etc.

Paso 1: creación del cuerpo de la aplicación

Ahora que sabemos con qué tipo de información estamos tratando, primero creemos
nuestra plantilla usando create-react-app . La aplicación crear una reacción es una
herramienta creada por la propia Facebook para ayudar a construir aplicaciones
Reaccionar sin permitir un proceso de configuración del entorno y otros dolores de
cabeza conocidos por los desarrolladores. Si no lo ha instalado en su sistema, instálelo
con el siguiente comando npm :

npm install -g create-react-app

Con create-react-app ya instalado, creemos nuestra aplicación llamada my-app.

crear-reaccionar-aplicación aplicación de
CD my-app /
npm start

Después de esperar unos minutos, ya podemos ver la aplicación ejecutándose localmente

en el puerto 3000.

Pantalla de inicio después de crear una aplicación create-react

Ahora que hemos tenido el placer de ver una aplicación React ejecutándose, echemos un
vistazo más de cerca a su organización y arquitectura. Inicialmente veremos la siguiente
estructura de carpetas:

my-app /
- public /
- index.html
- favicon.ico
- manifest.json
- src /
- App.css
- App.js
- App.test.js
- index.css
- index.js
- logo.svg
- registerServiceWorker .js
Eliminaremos los archivos logo.svg, App.css, index.css y sus referencias de código, y
también modificaremos la estructura de la carpeta. Los componentes y sus CSS se
almacenarán en la carpeta de componentes , además crearemos una carpeta útil para
archivos .js que no sean componentes, como se muestra a continuación.

my-app /
- public /
- index.html
- favicon.ico
- manifest.json
- src /
- components /
- App /
- App.js
- App.css
- App.test.js
- util /
- index.js
- index.css
- registerServiceWorker.js

Después de esta reestructuración, ejecute su proyecto y corrija los posibles errores.

Paso 2: uso de Material-UI para un diseño más agradable

Material-UI y su logo materializado

El material Ui es una implementación de Google Diseño de materiales para reaccionar.

Tiene una serie de componentes que ya se ven y animan con Material Design . Es
responsable por defecto y muy similar a Android. En nuestro sistema lo usaremos para
una mejor visualización de tablas y entradas, y para eso, agregaremos Material-UI a
nuestra aplicación a través de npm .

npm install material-ui @ next --save

npm install material-ui-icons --save
Comencemos en su última versión, hoy es más recomendable usar esta versión para las
nuevas características y modo de uso.

Luego agregaremos una barra de aplicaciones a nuestra aplicación. Necesitaremos un

componente MuiThemeProvider , es obligatorio y revisará todos los demás
componentes. Pronto editaremos completamente el archivo App.js de la siguiente
manera:

import React, {Component} de 'react';

importar './App.css';
importar {MuiThemeProvider} desde "material-ui / styles / index";
importar {AppBar, Toolbar, Typography} desde "material-ui";
importar {createMuiTheme} desde 'material-ui / styles';
importar rojo desde 'material-ui / colors / red';

const theme = createMuiTheme ({

paleta: {
principal: rojo,
},
});

La aplicación de clase amplía el componente {

render () {
return (
<MuiThemeProvider theme = {theme}>
<React.Fragment>
<AppBar position = "static">
<Toolbar>
<Typography type = "title" color =
"heredar">
My Awesome React App
</Typography>
</Toolbar>
< / AppBar>
</React.Fragment>
</MuiThemeProvider>
);
}
}

exportar aplicación predeterminada ;

Podemos ver que la plantilla inicial de material-ui para insertar una barra de
aplicaciones es relativamente grande, podemos resaltar que el tema establece el color
rojo como predeterminado para la aplicación, y sí, por supuesto, esto se puede cambiar .
Por lo tanto, tenemos el siguiente resultado mostrado en nuestro navegador:
 Nuestra increíble barra superior roja.

Paso 3: Agregar un estado y una tabla

Ahora que tenemos un cuerpo para nuestra aplicación, agreguemos más elementos de
material-ui: la tabla, y para eso tenemos que agregar varias cosas ...

Creemos un componente llamado DataTable.js en el directorio ./components/DataTable/

y agreguemos el siguiente contenido:

importar Reaccionar desde 'reaccionar';

import {Table, TableBody, TableCell, TableHead, TableRow, Typography}
de "material-ui";

export const DataTable = ({data}) => {

return <React.Fragment>
<Typography variant = "headline" component = "h2"> Agregar
nuevo </Typography>
<Table seleccionable = { false }>
<TableHead>
<TableRow >
Tecla <TableCell> </TableCell>
<TableCell> Temperatura </TableCell>
<TableCell> Humedad </TableCell>

<TableCell> Datos </TableCell>

</TableRow>
</TableHead>
<TableBody>
{
data.map ((item, index) =>
<TableRow key = {index}>
<TableCell> {item.key} </ TableCell >
<TableCell>
{item.temperature}
</TableCell>
<TableCell> {item.mount} </TableCell>
<TableCell> {item.client} </TableCell>
<TableCell> {item.data} </ TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</React.Fragment>
};

Este componente se propone como una lista de elementos llamados datos , donde cada
elemento es un objeto de la forma:
 {
clave,
temperatura,
humedad,
cliente,
fecha
}

Con esto ya tenemos una tabla, y ahora solo falta su contenido. Para esto, necesitaremos
agregar esta información en el estado del componente de la aplicación . Como esta
información vendrá de firebase, hagámosla estática al agregar inicialmente el siguiente
código dentro de la aplicación .

estado = {
datos: [
{
clave: 'clave clave de prueba',
temperatura: 'temperatura clave de prueba',
humedad: 'humedad clave de prueba',
cliente: 'cliente clave de prueba',
datos: 'datos clave de prueba',
}
]
} ;

Y en el método de representación agregaremos el componente DataTable con la

propiedad de datos apuntando al estado del componente:

render () {
return (
<MuiThemeProvider theme = {theme}>
<React.Fragment>
<AppBar position = "static">
<Toolbar>
<Tipografía tipo = "title" color = "heredar">
Mi aplicación Awesome React
</ Typography >
</Toolbar>
</AppBar>
<DataTable data = { this .state.data} />
</React.Fragment>
</MuiThemeProvider>
);
}

Y nuestra aplicación ya es más palpable, pero sigue siendo una lista estática como la
imagen a continuación:
 Practicidad y pulcritud con el componente de tabla Material-ui.

Ahora para la verdadera broma, agregue Firebase y su funcionalidad a nuestra

aplicación.

Paso 4: Integrar Firebase en nuestra aplicación

Así que instalemos la biblioteca Firebase dentro de nuestro proyecto con el siguiente
comando:

npm install --save firebase

Recuerde esas credenciales que se mencionaron allí en el paso cero, por lo que las
necesitamos ahora. Crearemos un archivo llamado firebaseUtils.js dentro de la carpeta
./utils y agregaremos el siguiente contenido a continuación. Después de eso,
agregaremos nuestras credenciales dentro de la variable de configuración.

importar firebase desde 'firebase';

const config = {
apiKey: "**************************",
authDomain: "************ ************** ",
databaseURL:" ************************** ",
projectId:" ************************** ",
almacenamientoBucket:" ******************* ******* ",
messagingSenderId:" ************************** "
};

exportar const firebaseImpl = firebase.initializeApp (config);

export const firebaseDatabase = firebase.database ();

El manejo de datos en las aplicaciones React puede ser un poco problemático si no se

atiende. Podemos encontrar flujo de datos asincrónico, alto acoplamiento y otros
problemas. En una aplicación final en este caso, sería el momento de pensar en la
arquitectura de flujo, utilizando Redux o MobX, pero este no es el caso, utilizaremos una
solución más simple y fácil para una implementación rápida.

Entonces, con un poco más de cuidado, separaremos los accesos de Firebase dentro de
una capa de Servicio, creando un archivo llamado FirebaseService.js dentro del directorio
./services/. Inicialmente crearemos un método para recuperar toda la información de un
nodo de base de datos de Firebase dado.

importar {firebaseDatabase} desde '../utils/firebaseUtils'

exportar la clase predeterminada FirebaseService {

static getDataList = (nodePath, callback, size = 10) => {

let query = firebaseDatabase.ref (nodePath)

.limitToLast (size);

query.on ('value', dataSnapshot => {

let items = [];
dataSnapshot.forEach (childSnapshot => {
let item = childSnapshot.val ();
item ['key'] = childSnapshot.key;
items.push ( elemento);
});
devolución de llamada (elementos);
}); consulta de

retorno ;
};

Este método devolverá la lista mediante una devolución de llamada al método setState
de nuestra clase de aplicación . Tenga en cuenta que el método toma como parámetros
una ruta al nodo nodePath , una función de devolución de llamada y el límite de
tamaño para la lista de tamaños con un valor predeterminado de diez elementos.

Dentro de App.js modificaremos el estado y agregaremos el método

componentDidMount:

estado = {
datos: []
};

componentDidMount () {
FirebaseService.getDataList ('reads', (dataReceived) => this
.setState ({data: dataReceived}))
}

Donde lecturas es nuestro nodo de búsqueda de base de datos, pronto enumerará los
últimos diez elementos de este nodo. Pero no tenemos diez elementos en nuestra base de
datos, en realidad no tenemos nada, por lo que tendríamos que ingresar una gran
cantidad de datos en nuestra mano; o cree una función para insertar a través de la
pantalla en nuestra aplicación, y esto es lo que haremos en el siguiente paso.

Paso 5: React-Router
Nuestra aplicación tiene exactamente una pantalla, y queremos crear una más para
ingresar datos en nuestra base de datos. El Reaccionar solos no proporcionan una
herramienta de enrutamiento, por lo que vamos a instalar el router reaccionar en la
última versión:

npm install --save react-router-dom

Es importante mencionar que React no tiene funcionalidad de enrutador, ya que es

simplemente una biblioteca de creación de interfaz, con el tiempo nos daremos cuenta
de que hay mucho que React falta y que ya debe existir en un proyecto que la comunidad
React admite, como Este es el caso con el React-Router.

Y luego comience la implementación del enrutador, creemos un archivo urlUtils.js con las
URL que estarán presentes en el sistema y que serán visibles en una pantalla en el futuro.

export const urls = {

inicio: {nombre: 'Inicio', ruta: '/'},
datos: {nombre: 'Datos', ruta: '/ datos'},
agregue: {nombre: 'Agregar', ruta: ' / add '},
};

Luego, dentro de index.js agregaremos un enrutador:

importar Reaccionar desde 'reaccionar';

importar ReactDOM desde 'react-dom';
importar './index.css';
importar la aplicación desde './components/App/App';
importar registerServiceWorker desde './registerServiceWorker';
importar {BrowserRouter como enrutador, ruta} desde 'react-router-
dom';
importar {urls} desde "./utils/urlUtils";

ReactDOM.render (
<Router>
<Ruta de ruta = {urls.home.path} component = {App} />
</Router>
, documento.

registerServiceWorker ();

Presta atención a la línea:

<Ruta de ruta = {urls.home.path} componente = {Aplicación} />

Con esta declaración, estamos explicando una ruta al componente App.js, accediendo a
la ruta '/', el sistema mostrará el componente dentro. Cuando subimos al sistema
podemos ver el comportamiento mencionado anteriormente, pero al ingresar '/ data' no
se muestra nada. Entonces dentro del render agregaremos las siguientes rutas donde
teníamos <DataTable />
 <Estilo de tarjeta = {{margen: '50px'}}>
<Contenido de la tarjeta>

<Ruta de
ruta exacta = {urls.home.path}
render = {(props) => <Bienvenido {... props} />}
/>

<Ruta de
ruta exacta = {urls.data.path}
render = {(props) =>
<DataTable {... props} data = { this .state.data}
/>}
/>

<Ruta de
ruta exacta = {urls. add.path}
render = {(props) =>
<Agregar {... props} />}
/>
</CardContent>
</Card>

Los componentes Bienvenido y Agregar ahora se crearán en ./src/components/Welcome y

./src/components/Add , para Welcome.js se creará una pantalla de bienvenida con los
enlaces en las URL :

importar {urls} desde "../../utils/urlUtils";

importar {Button, Typography} de "material-ui";
importar Reaccionar desde "reaccionar";
importar {Link} desde "react-router-dom";

export const Welcome = () => {

return (
<React.Fragment>
<Typography variant = "headline"
component = "h2"
>
Welcome
</Typography>
{
Object.values (urls) .map ((url, index) = >

key = {index}
component = {props =>
<Enlace a = {url.path} {... props}
/>
}
>
{url.name}
</Button>
})
}
</React.Fragment>
)
} ;

Relativamente simple, asignamos los valores de URL a botones que contienen enlaces a
sus páginas. También extraeremos el componente AppBar de la aplicación y lo
insertaremos en el nuevo archivo TopBar.js.
 importar {urls} desde "../../utils/urlUtils";
importar {AppBar, IconButton, Toolbar, Typography} desde "material-
ui";
importar MenuIcon desde "material-ui-icons / Menu";
importar Reaccionar desde "reaccionar";
importar {Link} desde "react-router-dom";

export const TopBar = () => <AppBar position = "static">

<Toolbar>

<IconButton color = "heredar" aria-label = "Menú"

componente = {props =>
<Enlace a = {urls.home.path} {...
accesorios} />

</IconButton>

<Typography type = "title" color = "heredar">

Mi aplicación Awesome React
</Typography>

</Toolbar>
</AppBar>;

Tenga en cuenta que agregamos un IconButton con el enlace a Bienvenido en el

componente TopBar, este será el resultado cuando terminemos el componente Agregar:

Nuestra pantalla de bienvenida.

Paso 6: Insertar
Para el componente Agregar , crearemos un componente para ingresar datos
directamente a través de la pantalla, por lo que agregaremos el siguiente contenido en
Add.js:

importar {Button, TextField, Typography} desde "material-ui";

import React, {Component} de "react";
importar FirebaseService desde "../../services/FirebaseService";
importar {urls} desde "../../utils/urlUtils";
importar {withRouter} desde "react-router-dom";

clase Agregar extiende Componente {

submit = (event) => {

event.preventDefault ();

const {temperatura} = esto ;

const {humedad} = esto ;
const{datos} = esto ;
const {cliente} = esto ;

const newid = FirebaseService.pushData ('lecturas', {

temperatura,
humedad,
fecha,
cliente
});

this .props.history.push (urls.data.path);

};

render = () => (<React.Fragment>

<Typography variant = "headline" component = "h2"> Agregar

nuevo </Typography>
<form onSubmit = { this .submit}>

<TextField className = "input-field"

type = "text"
defaultValue = {'
label = "Temperature"
required
onChange = {e => this .temperature =
e.target.value} />

<TextField className = "input-field"

type = "text"
label = "Humidity"
defaultValue = {''}
required
onChange = {e => this .umidity =
e.target.value} />

<TextField className = "input-field"

type = "text"
label = "Date"
defaultValue = {''}
requerido
onChange = {e => this .data = e.target.value}
/>

<TextField className = "input-field"

type = "email"
label = "Client"
defaultValue = {''}
requerido
onChange = {e => this .client =
e.target.value} />

<Button type = "submit"

style = {{marginTop: '20px', display: 'inline-
block'}}>
Agregar
 </Button>
</form>
</ Reaccionar Fragmento>)
}

exportar por defecto conRouter (Agregar);

Recuerde agregar también la clase css a continuación al archivo index.css

.input-field {
clear: left;
flotador: izquierda;
ancho: 100%;
pantalla: bloque en línea;
margen superior: 2vh ! importante ;
}

Ahora que hemos creado el cuerpo para la nueva pantalla de datos, debemos incluir una
forma de insertarlo en nuestro FirebaseService , agreguemos el método pushData que ya
se estaba utilizando en Add.js :

static pushData = (nodo, objToSubmit) => {

const ref = firebaseDatabase.ref (nodo) .push (); id
const = firebaseDatabase.ref (nodo) .push (). clave;
ref.set (objToSubmit); ID de
retorno ;
};

Este método inserta un nodo hijo con la trayectoria de nodo dentro del banco Firebase.
Ahora podemos probar la inserción, con la ayuda de material-ui, el resultado fue muy
satisfactorio:

No se mataron animales para hacer esta forma.

Paso 7: eliminación
Nuestra aplicación está casi completa, ahora es posible ingresar y enumerar datos, ahora
tenemos la tarea de eliminar y finalmente editar.

Para la eliminación, agregaremos el siguiente método dentro de FirebaseService,

elimina el elemento secundario que contiene la clave de identificación dentro del nodo
nodo.

static remove = (id, node) => {

return firebaseDatabase.ref (node + '/' + id) .remove ();
};

Dentro del componente DataTable se agregará una función de eliminación y luego un

botón para editar, verifique a continuación cómo estaba el componente después del
cambio:

importar Reaccionar desde 'reaccionar';

importar {Button, Table, TableBody, TableCell, TableHead, TableRow,
Typography} desde "material-ui";
importar FirebaseService desde "../../services/FirebaseService";

export const DataTable = ({data}) => {

const remove = (id) => {

FirebaseService.remove (id, 'lecturas');
};

return <React.Fragment>
<Typography variant = "headline" component = "h2"> Datos
</Typography>
<Tabla seleccionable = "false">
<TableHead>
<TableRow>

<TableCell> Temperatura </TableCell>

<TableCell> Humedad </TableCell>
<TableCell> Cliente </TableCell>
<TableCell> Datos </TableCell>
<TableCell> Acciones </TableCow>
</ TableHead
>
<TableBody >
{
data.map ((item, index) =>
<TableRow key = {index}>
<TableCell> {item.key} </TableCell>
<TableCell> {temperature.team}
</TableCell>
<TableCell> {item.um}} </TableCell>
<TableCell> {item.client} </TableCell>
<TableCell> {item.data} </TableCell>
<TableCell>
<Button
onClick = {() => remove
(item.key)}>
Eliminar
</Button>
< / TableCell>
</TableRow>
)
 }
</TableBody>
</Table>
</React.Fragment>
};

Paso 8: Edición
Para editar, agregaremos otro botón en la tabla con un enlace para editar:

<Componente de botón = {props =>

<Enlace a = {privateUrls.edit.pathWithouParam + item.key}
{... props} />}>
Editar
</Button>

Agregaremos al archivo urlUtils el siguiente código:

export const privateUrls = {

edit: {
name: 'Edit',
ruta: '/ edit /: id',
pathWithouParam: '/ edit /'}
};

Estas son URL que no queremos agregar al componente de Bienvenida, pero son
necesarias en otro lugar.

Luego modificaremos el componente Agregar para que reciba como parámetro por url la
identificación de un elemento bancario, cargue este elemento y muestre la información
si el archivo existe, a continuación se muestra el archivo resultante:

importar {Button, TextField, Typography} desde "material-ui";

import React, {Component} de "react";
importar FirebaseService desde "../../services/FirebaseService";
importar {urls} desde "../../utils/urlUtils";
importar {withRouter} desde "react-router-dom";

clase Agregar extiende Componente {

estado = {id: nulo , temperatura: '', humedad: '', datos: '',

cliente: ''};

componentWillMount = () => {
const {id} = this .props. match.params;

si(! (id === undefined ||! id)) {

this .setState ({id});
FirebaseService.getUniqueDataBy ('reads', id, (data) =>
this .setState ({... data}, () => console.log ( this .state)));
}

};

submit = (event) => {

event.preventDefault ();
 const {temperatura} = este estado;
const {humedad} = este estado;
const {datos} = este .state;
const {customer} = this .state;

deje objToSubmit = {
temperatura,
humedad,
fecha,
cliente
};

if ( this .props.match.params.id === undefined ) {

FirebaseService.pushData ('lecturas', objToSubmit);
} else {
FirebaseService.updateData ( this .props.match.params.id,
'reads', objToSubmit)
}

this .props.history.push (urls.data.path);

};

handleChange = name => event => {

this .setState ({
[name]: event.target.value,
});
};

render = () => {
return(<React.Fragment>

<Typography variant = "headline" component = "h2"> Add

New </Typography>
<form onSubmit = { this .submit}>
<TextField className = "input-field"
type = "text"
value = { this .state.temperature}
label = "Temperature"
required
onChange = { this .handleChange
('temperature')} />

<TextField className = "input-field"

type = "text"
etiqueta = "Humedad"
valor = {this .state.umity}
requerido
onChange = { this .handleChange
('humedad')} />

<TextField className = "input-field"

type = "text"
label = "Date"
value = { this .state.data}
required
onChange = { this .handleChange ('data')}
/>

<TextField className = "input-field"

type = "email"
label = "Client"
valor = { esto.state.client}
requerido
onChange = { this .handleChange
('client')} />

<Button type = "submit"

style = {{marginTop: '20px', display:
 'inline-block'}}>
Add
</ Button>
</form>
</React.Fragment>)
}
}

exportar por defecto conRouter (Agregar);

Finalmente agregaremos la ruta a nuestro componente de aplicación:

<Ruta de
ruta exacta = {privateUrls.edit.path}
render = {(props) => <Agregar {... props} />}
/>

Y con eso finalizamos el alcance básico de nuestra aplicación incluyendo la inserción,

eliminación, actualización y listado de datos de una base de datos Firebase.

En este punto, podríamos tomar nuestro trabajo como completo, pero agreguemos un
requisito de seguridad antes de comenzar la fase final: usar pruebas automatizadas.

Paso 9: Pruebas automáticas con Jest

Si le gusta TDD, todavía tiene tiempo para eliminar todo su código y comenzar el
desarrollo probando, ya que estamos en las etapas finales, hagamos una prueba única y
más importante, la prueba de representación de la aplicación Componenet.

La aplicación create-react-ya nos proporciona un conjunto de pruebas llamado Jest , nos

brinda grandes habilidades como burlarse de los componentes React.

Si no lo ha instalado, instálelo a través de npm ejecutándolo con el comando.

npm install jest --save-dev

El archivo App.test.js contendrá nuestra prueba de representación:

importar Reaccionar desde 'reaccionar';

importar ReactDOM desde 'react-dom';
importar la aplicación desde './App';
importar {BrowserRouter como enrutador} desde 'react-router-dom';

it ('se procesa sin fallar', () => {

const div = document.createElement ('div');

ReactDOM.render (
<Router>
<App />
</Router>, div);

ReactDOM.unmountComponentAtNode (div) ;
});
Para verificar que se ejecuta correctamente, ejecute el comando npm run test

Dado que nuestra aplicación se ejecuta perfectamente sin errores, podemos ponerla en
producción.

Paso 10: Implementar en producción con Firebase Hosting

Antes de la parte final, debemos ser conscientes de que nuestra aplicación estará en
producción, y no sería una buena práctica utilizar el mismo proyecto Firebase para los
sistemas de desarrollo y producción.

Para resolver este dilema, editemos el archivo firebase.js y agreguemos la posibilidad de

usar una credencial más. Donde teníamos la variable de configuración , la
reemplazaremos con el siguiente código.

const prodConfig = {
apiKey: "***************",
authDomain: "***************",
databaseURL: "*** ************ ",
projectId:" *************** ",
almacenamientoBucket:" ************* ** ",
messagingSenderId:" *************** "
};

const devConfig = {
apiKey: "***************",
authDomain: "***************",
databaseURL: "*** ************ ",
projectId:" *************** ",
almacenamientoBucket:" ************* ** ",
messagingSenderId:" *************** "
};

const config = process.env.NODE_ENV === '

producción ' ? prodConfig
: devConfig;

Esto nos permite usar una credencial para la producción y otra para el desarrollo. El
script de compilación create-react-app selecciona la variable de entorno NODE_ENV
para la producción automáticamente.

En este paso, también debe configurar sus reglas de acceso bancario para tener la menor
seguridad en nuestra aplicación. Como no implementamos autenticación, y nuestra
aplicación es solo una demostración; Dejemos las reglas públicas y omita este paso. Por
supuesto, en producción esto no es aconsejable.

Por último, tenemos la tarea de desplegar nuestra aplicación dentro del hosting Firebase.
Relativamente simple, necesitamos construir el proyecto. Firebase proporciona una
herramienta de configuración e implementación. Por lo tanto, es necesario instalar esta
herramienta a través de npm :
 npm install -g firebase-tools

Después de eso, es necesario iniciar sesión en firebase con el comando:

inicio de sesión de firebase

Luego, dentro de la carpeta raíz del proyecto, ejecute el comando

base de fuego init

Seleccione el proyecto y luego de ese hosting.

Luego, necesitaremos editar el archivo firebase.json creado en la raíz del proyecto,

agregue el siguiente contenido:

{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"** /. *",
"** / node_modules / **"
],
"reescribe": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

En construcción, esto es la carpeta referencia a la construcción de la aplicación mediante

la aplicación crear una reacción, y será la carpeta que el Firebase utiliza para desplegar
tan pronto como se tomarán todos los archivos presentes en ella con el servidor. El
siguiente paso es hacer la compilación de producción a través de:

npm run build

Y luego desplegar :

despliegue de firebase
Aparecerá un mensaje de éxito y un enlace a su aplicación, inicie sesión y asegúrese de
que todo esté bien.

Si tiene un cierto aprecio por la pereza, le recomiendo automatizar estos dos comandos
agregándolos a los scripts package.json . Agregaremos la siguiente línea dentro de los
scripts:

" deploy": "npm run build && firebase deploy"

Y con eso tendrás tu aplicación en línea con un solo comando. ❤

. . .

Después de todo este trabajo, tenemos una aplicación React + Firebase completa que se
ejecuta directamente en el servidor Firebase y con respuesta en tiempo real con la base
de datos.

El proyecto completo está disponible para pruebas en línea aquí y su código aquí .
Siéntase libre de hacer preguntas o simplemente chatear sobre tecnologías y otras
locuras en alguna red social .

Para ustedes que han llegado hasta aquí, muchas gracias y nos vemos en el próximo
artículo. 😄

Gracias a delki8 .

Reaccionar Firebase Desarrollo Front End

Sobre Ayuda Legal