How to Launch a dApp/app using Spheron UI

Prerequisites

Before we begin, make sure you have completed the following tasks:

1. Complete the Development Environment Setup before continuing further. If the set-up is still incomplete, then here is A step-by-step guide on setting up a development environment for Spheron UI (hashnode.dev) This guide will help you set up the necessary development environment, including installing Node.js and Git.

Step 1: Set up a new project

To start, let's create a new project for your dApp/app. Follow the steps below:

1. Open your terminal or command prompt.

2. Navigate to the directory where you want to create your project.

3. Run the following command to create a new Spheron UI project:

    npx create-spheron-app my-dapp
   

   Replace my-dapp with the desired name for your project.

4. Once the project is created, navigate into the project directory:

    cd my-dapp
   

Step 2: Configure the UI components

Spheron UI provides a set of pre-built UI components that you can use to create your dApp/app. Follow the steps below to configure the UI components:

1. Open the src/App.js file in your preferred code editor.

2. Replace the existing code with the following:

    import React from 'react';
    import { Button, TextInput } from 'spheron-ui';
   
    function App() {
      return (
        <div>
          <h1>Welcome to my dApp/app!</h1>
          <TextInput placeholder="Enter your name" />
          <Button>Submit</Button>
        </div>
      );
    }
   
    export default App;
   

   This code imports the Button and TextInput components from Spheron UI and renders them in your dApp/app.

3. Save the file.

Step 3: Integrate with Spheron UI's APIs

Spheron UI provides APIs that allow you to interact with the blockchain and other decentralized services. Follow the steps below to integrate with Spheron UI's APIs:

1. Open the src/App.js file again.

2. Add the following code at the top of the file, below the existing imports:

    import { useSpheron } from 'spheron-ui';
   

   This code imports the useSpheron hook from Spheron UI.

3. Inside the App function, add the following code:

    const spheron = useSpheron();
   
    function handleSubmit() {
      // Perform actions using Spheron UI's APIs
    }
   
    return (
      <div>
        <h1>Welcome to my dApp/app!</h1>
        <TextInput placeholder="Enter your name" />
        <Button onClick={handleSubmit}>Submit</Button>
      </div>
    );
   

   This code initializes the spheron object using the useSpheron hook and adds a submit button with a click event handler.

4. Save the file.

Step 4: Launch the dApp/app

Now that your dApp/app is ready, let's launch it. Follow the steps below:

1. In your terminal or command prompt, make sure you are in the project directory (my-dapp).

2. Run the following command to start the development server:

    npm start
   

   This command will compile your code and launch the dApp/app in your browser.

3. Open your preferred web browser and navigate to http://localhost:3000 to see your dApp/app in action.

Congratulations! You have successfully launched a basic dApp/app using Spheron UI. You can now explore more features and capabilities of Spheron UI to enhance your dApp/app further.

Conclusion

In this tutorial, we walked through the process of launching a dApp/app using Spheron UI. We covered setting up a new project, configuring the UI components, and integrating with Spheron UI's APIs. Now, you can continue building upon this foundation and explore the vast possibilities of decentralized application development with Spheron UI.