Sahana's Blog

Unlocking the Future: Seamlessly Deploying Static and Dynamic Dapps on Spheron

Sahana's photo
Sahana
·

7 min read

What is Spheron?

Spheron stands as a beacon of innovation in the realm of decentralized application (dApp) infrastructure, heralding a new era in digital development. At its core, Spheron harnesses the power of Web3 Infra, providing developers with an arsenal of tools and services meticulously designed to navigate the complexities of the modern digital landscape. Gone are the constraints of Web2 infrastructures; Spheron’s holistic approach encompasses web hosting, storage, and compute capabilities, paving the way for a seamless transition into the Web3 ecosystem. Its revolutionary architecture not only matches but exceeds the performance benchmarks set by its Web2 predecessors, signaling a paradigm shift in application development paradigms.

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 sync 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 choose your desired app repository for deployment.

  3. Select deployment protocol:
    Select your desired 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 have to add environment variables in the dedicated section. If needed, modify the remaining parameters according to your requirements. That 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 their 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 new Port Mapping. Add the container port, and Select the exposed port you want to map it to.

5 -> Add Environment Variables if any. Use the Secret Key toggle if the value is a secret key. When you enable the secret key toggle, it will not be saved in the database.

6 -> Select your preferred Region if any. If you do not add a region, the container will be deployed in any 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 select 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 if any. If you do not add a region, the container will be deployed in any region.

  6. You can add additional configuration as required.

  7. Click Deploy to initiate deployment.

Checkout their 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 Spheron’s 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​

You have to send a request to your server to create the uploadToken that will be used to upload files from the browser.

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 Spheron's 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 allows you to initialize a new Spheron project. A spheron.json file is created in your current path that describes your project. It will be utilized by the spheron publish command.

Usage​

spheron init

Upon running this command, a prompter will appear that will allow you to select protocol, add project name, add path, and select framework. Here is how it will look:

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

Spheron publish​

The spheron publish command allows you to upload your project using the configuration that is described in the spheron.json file of your project.

Usage​

spheron publish

Make sure that you create a production build before running the spheron publish command.

Here is an example of how the result will look:

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 enhance access to pinned content across the network by offering 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.

  2. 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​

  • VisitSpheron’s platform to learn more.

  • Access their comprehensive documentation for detailed information.

  • Follow on Twitter for the latest updates and news.

  • Join Soheron’s Discord community for dedicated support and assistance.

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

Dynamic-AppsSpheronShardeumIsBorderlessshardeum