LoopBack4ReactAdminExample

Ejemplo de ejemplo de backoffice y API Generator 2020

Menos código y arquitectura flexible para un desarrollador móvil que desee desarrollar la web fácilmente, para las empresas que desean una arquitectura fácil que ahorren dinero y tiempo que no se necesitan más para el desarrollador de back -end en 2020, solo necesita un desarrollador front -end si tiene una aplicación web si solo desea una API (Servicios web y un avance). pastel.

React Admin y Loopback 4 RUD Sample

Empezando

Esta es una muestra con un administrador React y Loopback4 para implementar operaciones CRUD en products y users solicitando API con el proveedor Loopback4 que puede instalar con npm install react-admin-loopback4-adapted .

Instalaciones

Instale el nodo V12.18.3 con NVM

Siga las instrucciones para obtener el nodo en su máquina local sudo apt install curl , curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash , source ~/.profile , nvm install v12.18.3 , nvm use v12.18.3 .

Instalar npm

Instale el administrador de paquetes de nodo con el comando sudo apt install npm y marque la versión npm con npm -v .

Configuración de MongoDB

Instale MongoDB desde el sitio web oficial https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ y siga la guía para obtener el lanzamiento final MongoDB 4.4 .

NOTA : Si se produce un error cuando intenta abrir la consola MongoDB con el comando mongo , verifique si el mongod.service está en estado activo con el comando sudo systemctl status mongod.service mongod.service puede activar el mongod.service con el comando sudo systemctl start mongod.service sudo systemctl enable mongod.service luego sudo systemctl start mongod.service .

Configuración de MongoDB Compass

Instale MongoDB Compass desde el sitio web oficial https://www.mongodb.com/try/download/compass y siga las instrucciones para obtenerlo en su máquina local. Esta herramienta le ayuda a administrar fácilmente su base de datos.

Instalar las dependencias

Después de clonar el proyecto con git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git ingrese a la carpeta ecommerce en las carpetas Frontreactadmin y BackendLoopbackV4 e instale los paquetes de nodos con la npm install de comando.

Lanzamiento de las aplicaciones

En este proyecto, intentamos reducir la complejidad para que usted obtenga tanto el servidor frontend como el servidor de backend en la misma máquina local para hacer esto, forzamos el puerto de enlace del servidor Loopback4 a 3001 en el archivo LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts :

 const app = new EcommerceApplication ( {
    rest : {
      port : 3001
    }
  } ) ;

Esto se debe a que no puede vincular dos procesos al mismo [IP:PORT] , en nuestro caso, la IP de enlace es 127.0.0.1 Se conoce como localhost , esta configuración hará que CORS blocks por su navegador, resuelvan este problema, usamos el proxy de nodo integrado mediante la agregación de esta línea "proxy": "http://localhost:3001" en el proxy de LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json :

 {
 .
 .
 .
 . ,
  "proxy" : "http://localhost:3001" , // <~~~ here we add the proxy field in package . json
 
.
.
.
}

Inicie los servidores

Después de configurar los cambios que mencionamos en la sección anterior, comenzamos a girar los servidores y descubrir lo fácil que es create y modify o delete un product o un user

I- Inicie el servidor de backend

Obtener npm start LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce

> node - r source - map - support / register .

Server is running at http :/ / [ :: 1 ] : 3001
Try http : // [ :: 1 ] : 3001 / ping

Ii- iniciar el servidor frontend

Entrar en el npm start LoopBack4ReactAdminExample/Frontreactadmin/ecommerce

 Compiled successfully!

You can now view ecommerce in the browser .

  Local :            http : //localhost : 3000
  On Your Network :  http :// 172.18 . 25.22 :3000

Note that the development build is not optimized .
To create a production build , use npm run build .

`

Iii- prueba tu aplicación

Copie este enlace http://localhost:3000 a su navegador para ingresar a la aplicación React Admin y comenzar a administrar los products y users .

El archivo de aplicación App.js

En la aplicación React Admin, el src/app.js se exporta al punto de entrada src/index.js donde el nodo comienza a resolver y asignando las imports y exports , mire la parte superior del archivo index.js para ver la función de importación de App :

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import * as serviceWorker from './serviceWorker' ;

Dentro del app.js encontrará todo lo que desea saber sobre cómo la aplicación resuelve los elementos de las API importando el módulo react-admin-loopback4-adapted e instancias de un objeto desde
El lb4Provider que toma como @param la URL al servidor de backend http://localhost:3001 :

 const dataProvider = lb4Provider ( 'http://localhost:3001' ) ;

Este es el contenido de App.js

 import * as React from 'react' ;
import { Admin , Resource } from 'react-admin'
import PostIcon from '@material-ui/icons/Book'
import './App.css' ;

import Dashboard from './dashboard'
import { ProductList , ProductCreate , Productedit } from './productlist'
import { Userlist , Useredit , Usercreate } from './user'

import lb4Provider from 'react-admin-loopback4-adapted'

const dataProvider = lb4Provider ( 'http://localhost:3001' ) ;

const App = ( ) => (
  < Admin dataProvider = { dataProvider } dashboard = { Dashboard } >
    < Resource name = "products" list = { ProductList } create = { ProductCreate }
      edit = { Productedit } icon = { PostIcon } />
    <Resource name="users" list={Userlist} edit={Useredit}
      create={Usercreate} / >
  </ Admin >
)
export default App ;

Nota En esta muestra, la autenticación no está integrada, la completaremos en el próximo tutorial

Nota Para obtener más información sobre React Admin, siga este enlace: https://marmelab.com/react-admin/readme.html

CONTACTO

Si tiene alguna pregunta o desea tener ventaja de nuestros servicios, contáctenos

 Site : https : //planetconectus . com

E - mail : mohamedali . chaabani @planetconectus . com

Phone : [phone]
Phone : + 33 970 440 431