Set up and test the UI

Learning objectives

After you have completed this tutorial, you will know how to set up the Mission Mars CorDapp’s UI and how to use it to test the CorDapp.

Before you start

Before you can build the Mission Mars CorDapp UI, you must:

Set up the CorDapp’s UI

After you have deployed your CorDapp to a local Corda 5 network and the back-end code is running, perform the following steps:

  1. Look up the RPC port for the PartyA node:

    corda-cli network status -n missionmars-network

    The default RPC port for the PartyA node is 12112.

  2. If the port is not 12112, in your project, go to Web-UI > src and open the setupProxy.js file.

  3. Change the default PARTY_A_PORT in the setupProxy.js file accordingly.

  4. In the project directory, run npm install.

    This command installs all necessary npm modules to run the Mission Mars CorDapp UI.

  5. Run npm start.

    This command runs the UI in development mode.

    Step result: The Mission Mars CorDapp UI opens in your browser window.

mission mars cordapp ui
Mission Mars CorDapp UI

Test your CorDapp using the UI

Once the Mission Mars CorDapp UI is up and running, you can use it to test the CorDapp’s flows.

  1. Check your local Corda 5 Network for the existing nodes by clicking the CHECK button present under the CORDA NETWORK tab.

    Step result: Peter’s X500 name appears at the top of the page.

  2. Go to the ISSUE VOUCHER tab to test the CreateAndIssueMarsVoucher flow:

    a. Provide voucher description and the voucher holder’s X500 name.

    b. Click START FLOW.

    Step result: Voucher ID appears at the top of the page.

  3. Go to the CREATE TICKET tab to test the CreateBoardingTicket flow.

    a. Provide ticket description and the number of days until launch.

    b. Click START FLOW.

    Step result: The Ticket Ready! message appears at the top of the page.

  4. Go to the REDEEM VOUCHER tab to test the RedeemBoardingTicketWithVoucher flow.

    a. Provide voucher ID and the voucher holder’s X500 name.

    b. Click START FLOW.

    Step result: The rocket goes to Mars!

  5. Optional: You can investigate each flow you run in more detail under the FLOW OUTCOME tab.

Was this page helpful?

Thanks for your feedback!

Chat with us

Chat with us on our #docs channel on slack. You can also join a lot of other slack channels there and have access to 1-on-1 communication with members of the R3 team and the online community.

Propose documentation improvements directly

Help us to improve the docs by contributing directly. It's simple - just fork this repository and raise a PR of your own - R3's Technical Writers will review it and apply the relevant suggestions.

We're sorry this page wasn't helpful. Let us know how we can make it better!

Chat with us

Chat with us on our #docs channel on slack. You can also join a lot of other slack channels there and have access to 1-on-1 communication with members of the R3 team and the online community.

Create an issue

Create a new GitHub issue in this repository - submit technical feedback, draw attention to a potential documentation bug, or share ideas for improvement and general feedback.

Propose documentation improvements directly

Help us to improve the docs by contributing directly. It's simple - just fork this repository and raise a PR of your own - R3's Technical Writers will review it and apply the relevant suggestions.