Sandbox mode

Sandbox mode

git clone [email protected]:singnet/refactored-dapp.git
cd refactored-dapp
npm install
cp .env.sandbox .env

1. Update .env file to reflect the actual values for each environment variable.

   1. REACT_APP_SANDBOX_SERVICE_ENDPOINT

      The endpoint of the service running locally. snetd defaults to http://localhost:8088.

   2. REACT_APP_SANDBOX_ORG_ID & REACT_APP_SANDBOX_SERVICE_ID

      The org_id to which the service belongs and the service_id of the service. The values set for these variables will be used for registering the custom ui.

2. Start the AI service locally along with the snet daemon. Make sure the blockchain is disabled in the daemon configuration.

3. Building the custom ui

   1. Generate js stubs from .proto files

      For the custom ui to talk to the services on SingularityNET platform via the DApp, we are using gRPC-web by improbable-eng. Follow the steps mentioned at the official documentation to generate js stubs from .proto definitions.

   2. You need build the custom UI following the steps

      Create a new directory named after the org-id to which this service belongs inside src/assets/thirdPartyServices. It could be possible that the directory already exists, in which case you can use it instead of creating a new one.

      Create a new directory named after the service-id under the newly created directory in the above step

      e.g. for a service with org-id: snet and service-id: example-service you will have to do the following assuming you are at the root of the refactored-dapp

       cd src/assets/thirdPartyServices
       mkdir snet
       cd snet
       mkdir example_service
       cd example_service
      

      Put the all the resources used by the custom ui under this directory including the js stubs.

4. Register the custom ui

   Add an entry for the new service in src/assets/thirdPartyServices/index.js if it does not already exist. Add the following line towards the end of the file. Make sure to replace orgId, serviceId and CustomUIComponent accordingly.

    thirdPartyCustomUIComponents.addCustomUIComponent(orgId, serviceId, CustomUIComponent);
   

5. Assuming that the snet daemon is running on port 8088, running the bellow commands should bring up the DApp in sandbox mode for local development.

    npm run sandbox