How to Deploy Static and Dynamic Dapps on Spheron

How to Deploy Static and Dynamic Dapps, Compute instance on Spheron decentralized network

What is Spheron?

Spheron is a groundbreaking solution that is transforming decentralized application (dApp) infrastructure. With its extensive array of tools and services grounded in Web3 Infrastructure, Spheron enables developers to address the evolving needs of the digital environment. Going beyond conventional Web2 infrastructures, Spheron provides a diverse range of services such as web hosting, storage, and computing capabilities, playing a crucial role in the Web3 ecosystem. Its outstanding performance not only matches that of Web2 equivalents but also demonstrates the potential of Web3 technology for the future generation of applications.

Learn more about Spheron through their documentation.

How to Deploy Static Apps on Spheron?

Deploying static apps on Spheron is a straightforward process. Follow these steps to deploy your static apps on Spheron:

  1. Connect your Git Provider:

    Connecting your Git provider allows Spheron to synchronize your repositories and trigger deployments whenever new updates are made. Spheron supports the following Git providers: Github, Gitlab, and Bitbucket.

  2. Set up your Project:

    Create a new project on Spheron and select your desired app repository for deployment.

  3. Select deployment protocol:

    Select your preferred protocol for hosting your static app. Spheron supports the following protocols: Arweave, Filecoin, and IPFS.

  4. Configure deployment settings:
    Spheron will automatically detect and configure most of these settings for you. You only need to add environment variables in the dedicated section. If necessary, adjust the remaining parameters according to your requirements. This includes selecting the framework, branch, root directory, build and output settings, and the node engine.

  5. Trigger deployment:

    After configuring all the required settings, initiate the deployment process. Spheron will fetch your code, build the static files, and deploy them to your specified protocol.

  6. Access your app:

    Once the deployment is complete, you can access your app through the domain generated by Spheron. You also have the option to set up a custom domain for your app.

Checkout our Framework Guide for more info.

How to Deploy Dynamic-Apps/servers on Spheron?

Deploying compute instances on Spheron is simple and effortless, whether you’re using a Docker image from Docker Hub or deploying a marketplace app. Follow these steps to deploy your compute instance on Spheron:

  1. Set up your Cluster:

    Create a new cluster on Spheron by selecting Import from Docker Hub or Start from Marketplace App.

  2. For Docker Hub:

    1. Enter the name for your cluster and docker image.

    2. Then, Add the tag and Click Next.

    3. Select the instance plan that suits your needs and click Select Plan.

    4. Create a new Port Mapping. Add the container port, and select the exposed port you want to map it to.

    5. Add Environment Variables if necessary. Use the Secret Key toggle if the value is confidential. Enabling the secret key toggle ensures that the value is not stored in the database.

    6. Select your preferred Region if applicable. If you do not specify a region, the container will be deployed in any available region.

    7. You can add advanced configuration if required.

    8. Click Deploy to initiate deployment.

  3. For Marketplace App:

    1. Pick your desired template from the marketplace.

    2. Spheron will automatically choose the recommended plan for the specific template.

    3. If you want to change the plan, Click Change Plan.

    4. Select the instance plan that suits your needs, and Click Select Plan.

    5. Select your preferred region applicable. If you do not specify a region, the container will be deployed in any available region.

    6. You can add additional configuration as required.

  1. Click Deploy to initiate deployment.

Checkout our compute Documentation for more info.

How to Upload to IPFS using Spheron SDK?

1. Spheron Storage SDK (for Nodejs environments)

Installation

npm i @spheron/storage

Usage

import { SpheronClient, ProtocolEnum } from "@spheron/storage";

const client = new SpheronClient({ token });

let currentlyUploaded = 0;

const { uploadId, bucketId, protocolLink, dynamicLinks } = await client.upload(
  filePath,
  {
    protocol: ProtocolEnum.IPFS,
    name,
    onUploadInitiated: (uploadId) => {
      console.log(`Upload with id ${uploadId} started...`);
    },
    onChunkUploaded: (uploadedSize, totalSize) => {
      currentlyUploaded += uploadedSize;
      console.log(`Uploaded ${currentlyUploaded} of ${totalSize} Bytes.`);
    },
  }
);

Checkout our Storage SDK Documentation for more info.

2. Spheron Browser Upload SDK (for Browser environments)

Installation

npm i @spheron/browser-upload

Usage

Server

You have to set up a web server with an endpoint that will be used by the frontend to fetch the token for upload.

import { SpheronClient, ProtocolEnum } from "@spheron/storage";

...

app.get("/initiate-upload", async (req, res, next) => {
  try {
    const bucketName = "example-browser-upload"; // use your preferred name
    const protocol = ProtocolEnum.IPFS; // use your preferred protocol
    const token = process.env.SPHERON_TOKEN; // add your access token in .env or paste it here

    const client = new SpheronClient({ token });

    const { uploadToken } = await client.createSingleUploadToken({
      name: bucketName,
      protocol,
    });

    res.status(200).json({
      uploadToken,
    });
  } catch (error) {
    console.error(error);
    next(error);
  }
});​

Client

import { upload } from "@spheron/browser-upload";

...

const response = await fetch(`<BACKEND_URL>/initiate-upload`); // get the temporary access token from server
const resJson = await response.json();
const token =  resJson.uploadToken;

let currentlyUploaded = 0;

const { uploadId, bucketId, protocolLink, dynamicLinks } = await upload(files, {
  token,
  onChunkUploaded: (uploadedSize, totalSize) => {
    currentlyUploaded += uploadedSize;
    console.log(`Uploaded ${currentlyUploaded} of ${totalSize} Bytes.`);
  },
});

...

Checkout our Browser Upload SDK for more info.

How to Create and Deploy Apps using Spheron CLI?

Installation

For Mac and Linux

To install the Spheron CLI, run the following command in your terminal:

sudo npm install -g @spheron/cli

For Windows

To install the Spheron CLI, open your terminal as administrator mode and run the following command:

npm install -g @spheron/cli

Usage

Spheron init

The spheron init command enables you to initialize a new Spheron project. This command creates a spheron.json file in your current directory, outlining your project details. This file will be used by the spheron publish command.

Usage

spheron init

When you execute this command, a prompt will appear, allowing you to select the protocol, add a project name, specify the path, and choose the framework. Here is how it will appear:

? Project name: (Code)
? Upload protocol: (Use arrow keys)
❯ Arweave
  Filecoin
  IPFS

Spheron publish

The spheron publish command enables you to upload your project using the configuration outlined in the spheron.json file of your project.

Usage

spheron publish

Ensure that you create a production build before executing the 'spheron publish' command.

Here is an example of how the result will appear:

Spheron CLI 1.0.7

Publishing your dapp to IPFS 🚀
Uploading directory build
Upload started, ID of deployment: 643fce207c3c7a0012df33a7
⠙ Uploading to IPFS
✓ Success! Upload finished !
Here are upload details:
Upload ID: 643fce207c3c7a0012df33a7
Bucket ID: 643fce207c3c7a0012df33a5
Protocol Link: https://bafybeicrjwhn6nifl7tcuhkcitquvpumj426qa7r7ppcya5skmqly5n2la.ipfs.sphn.link
Dynamic Links: https://testapp-edab50.spheron.app

Checkout our CLI Documentation for more info.

How to View and Retrieve Content from IPFS using Spheron?

Dedicated Gateways

Dedicated Gateways are IPFS gateways specifically designed to improve access to pinned content across the network by providing faster speeds and increased rate limits.

Using Dedicated Gateways offers several benefits:

  • Improved Speed

  • Increased Rate Limits

  • Whitelabeling Gateway

  • Serve Content from Any IPFS Node

Create a Dedicated Gateway

Follow these steps to create a Dedicated Gateway:

  1. Log in to Spheron and navigate to the Gateways section in the navbar.

  2. Click Generate to create a new gateway.

  3. Enter a name for your gateway and Click Create.

How to Use Your Gateway?

To access content through your Dedicated Gateway, simply follow these steps:

1. Obtain the CID (Content Identifier) of the file you wish to view.

  1. Append the CID to your gateway URL in the following format:
https://{gateway-name}.spheron.link/ipfs/{cid}

Checkout our Gateway Documentation for more info.

Further Resources

To learn more about this topic, check out the Spheron page for detailed information. https://docs.shardeum.org/storage/spheron