Locally Running the Web Demo App

In this guide, we’ll clone and configure the Cybrid web demo app to test interacting with your cryptocurrency accounts and trading crypto via the web UI components.

Note: If want to run our hosted Web Demo App, without the need to sync and build code locally, follow Testing with the Web Demo App.

If you haven't done so already, log into the Cybrid Sandbox to create your test bank and API keys. Further details can be found in the Getting Started in the Cybrid Sandbox guide. You’ll also need a customer created and ready for trading, so ensure you’ve run through the Getting Ready for Trading guide.

1. Clone the cybrid-sdk-web repo

To get started, we’ll clone the cybrid-sdk-web repo and configure it to connect to the test customer on your sandbox bank. In your terminal, navigate to your desired location and run:

Note: It's recommended that you're running Node@16.14.2 or later to successfully run the web demo application.

After cloning the repo, run npm install in your terminal.

2. Configure the test environment

There's two ways to use the demo app:

  1. Run it with no configuration, and enter your Client ID / Secret and Customer GUID every time you launch the app (see screenshot below), or
  2. Preconfigure the environment with your credentials and the customer you'd like to test with.

If you'd like to preconfigure the environment, be sure to have the following information handy for your bank:

  • Client ID
  • Client Secret
  • Customer Guid to test with

The Cybrid Web Demo App authenticates to your Sandbox Bank, and connects under the context of a specific customer, which is why we'll provide it with a specific Customer GUID.

If you don't have these details handy, you can retrieve the Client ID from the Bank page in the Cybrid Partner Portal. Similarly, you can navigate to Customers, select your test customer, and click the copy icon beside their guid. Unfortunately if you've lost your Client Secret there is no way to retrieve it, so you'll need to navigate to the API Keys in the Partner Portal and click Generate New Key to obtain new credentials.

Next, we're going to be editing the following file in order to configure the web app:

  • /src/environments/environment.ts

Open up environment.ts and replace the empty clientId, clientSecret and customerGuid strings with your specific details.

Note: When entering your credential via the UI, you could use a Bearer Token instead of using Client ID and Secret. Use the below curl command, populated with your Client ID and Secret, to generate a bearer token with full scope credentials:

3. Running the Demo App

Now that we've got the repo and dependencies installed, and the environment configured, we can fire up the app.

In order to run the demo web SDK, you’ll need to disable CORS. The easiest way to do this is to run a new instance of Chrome with security disabled. This can be completed by running the following command (on Mac OS):

Next, simply run npm start to build and run the instance. Wait until you see the Compiled Successfully message, then in the new Chrome instance enter the path http://localhost:4200. If everything went well, you should see something similar to this in your browser:

The application exercises the following web components in both English and French:

  • price-list
  • trade
  • accounts-list
  • account-history

You can also toggle between light and dark modes via the icon in the top right:

With the demo app running successfully, you can test out the following:

  • Viewing real-time prices of crypto assets
  • Viewing the account list of the customer
  • Buying or selling cryptocurrency (simulated)
  • Viewing the transaction history of a specific account

4. Routing Configuration

Lastly, routing is enabled by default between the components. If desired, you can disable routing for isolated testing. To disable routing, open /library/src/shared/constants/test.constants.ts, edit the ComponentConfig, and set the routing property to false, like in the below example:

5. What's Next?

Congrats! You've successfully tested out the Cybrid Web Demo App.

Next, you may be interested in running one of the Client API demo apps, which are currently available for Python, Ruby and Typescript.

You can also start investigating all of our code in the Cybrid Github repository.

Happy Coding!