Skip to content

Latest commit

 

History

History
191 lines (124 loc) · 5.82 KB

README.md

File metadata and controls

191 lines (124 loc) · 5.82 KB
Raw

React Retail App

(Cmpletely resopnsive!)

Angular Logo Nest Logo Nx Logo FFDC Logo

Built with ❤️ using Finastra Design System

📸 User Interface

Animation



🧪 Try me out

👉 ReactRetailApp



🗺 Architectural Diagram

FusionFabric.cloud


🌟 Features

Client Angular Logo

  • Strict mode
  • Smart and pure components pattern
  • Self-contained components and encapsulated modules
  • Components types (e.g. component, features)
  • Amazing directory structure
  • Dark mode

Server Nest Logo

  • Smart Logging (human-readable or JSON if console is not interactive)
  • Proxy
  • Auth ready


Installation

  1. Register an application on FFDC

You need to register an application on FusionFabric.cloud Developer Portal and select the following APIs:

  1. Setup environment variables

Rename .env.template to .env and setup OIDC_CLIENT_ID , OIDC_CLIENT_SECRET , OIDC_CLIENT_ID_B2B and OIDC_CLIENT_SECRET_B2B from the application created at step 1. 👌🏼

  1. Run npm i


Build

This application contains 2 applications:

  • React Application
  • NestJs Application

So you need to run the following 2 commands:

npm run dev              # client build in watch mode
npm run start:server     # server build in watch mode

Go to http://localhost:3000 and enjoy your demo application 😊

To build for production, use npm run build, which will build both the client and server, and then npm run start which will run the application!



Environement variables

Variable Default value
PORT 3000
OIDC_ORIGIN http://127.0.0.1:3000
SESSION_SECRET ""
OIDC_SCOPE openid
OIDC_CLIENT_ID ""
OIDC_CLIENT_SECRET ""
FFDC "https://api.fusionfabric.cloud"


Logging in

Username Password
ffdcuser1 123456
ffdcuser2 123456


🧙‍♂️ Commands

Command Description
nx See available commands
dev Builds client in watch mode
start:server Builds the server in watch mode
start Builds the client and then starts the server in watch mode
build Builds both client and server in production mode

Below are some more advanced commands that might speed up your development flow:

Generate a library

Run ng g @nrwl/angular:lib my-lib to generate a library.

You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and applications. They can be imported from @finastra/mylib.

Code scaffolding

Run ng g component my-component --project=my-app to generate a new component.

Running unit tests

Run npm t to execute the unit tests via Jest.

Run npm run test:cov to execute the unit tests and output coverage.

Run nx affected:test to execute the unit tests affected by a change.

Understand your workspace

Run nx dep-graph to see a diagram of the dependencies of your projects.


Further help


Brought to you by Finastra