Seamless Deployment Made Easy: Unleashing the Power of Vite and Spheron

Seamless Deployment Made Easy: Unleashing the Power of Vite and Spheron

How to Deploy Vite Apps on Spheron

Are you looking to deploy your Vite project and get your domain up and running? Look no further! In this extensive guide, we'll walk you through the steps to deploy your Vite app on Spheron, a powerful platform that combines the strengths of Vite's development experience with the advanced deployment capabilities of Spheron. By leveraging this integration, you can enjoy seamless deployment, custom deployment environments, and continuous deployment triggered by your Git repository pushes. Let's dive in and explore the process in detail.

Step 1: Put Your Vite Project Code in a Git Repo

Before we can deploy our Vite app on Spheron, we need to ensure that our project code is stored in a Git repository. Git repositories provide version control, collaboration capabilities, and easy access to your codebase. If you're already familiar with Git, you can skip this step. Otherwise, follow these simple instructions to set up a Git repository for your Vite project:

  1. Initialize a new Git repository by navigating to your project's root directory in your terminal and running the following command:

     git init
    
  2. Stage your project files for the initial commit using the following command:

     git add .
    
  3. Commit your files to the repository with a descriptive message:

     git commit -m "Initial commit"
    
  4. Optionally, connect your local repository to a remote repository hosted on platforms like GitHub, GitLab, or Bitbucket. This step allows for collaboration and seamless deployment from your remote repository.

Congratulations! Your Vite project is now stored in a Git repository and ready for deployment.

Step 2: Deploy using the Spheron Platform UI

Spheron simplifies the deployment process through its user-friendly platform UI. Follow these steps to deploy your Vite project on Spheron:

  1. Visit the Spheron Protocol website (spheron.app) using your preferred web browser.

  2. Choose your Git provider (GitHub, GitLab, or Bitbucket) from the available options and authorize Spheron to access the repository you want to deploy.

  3. After authorization, you'll be directed to the Spheron platform UI. Here, you'll see a list of your repositories. Select the Vite repository you want to deploy.

  4. Choose the protocol where you want to deploy your Vite app. Spheron currently supports multiple protocols, including Arweave, Skynet, Filecoin, and Pinata. Consider the specific features and requirements of each protocol before making your selection.

  5. In the next screen, you'll be prompted to provide details about your project's location and build configuration:

    • Select the branch you want to deploy from the dropdown menu. This allows you to choose the specific branch that should trigger deployments.

    • If your Vite project follows a mono repo-like structure, provide the root directory that contains the relevant code.

    • Set the install command to "yarn install" to ensure all dependencies are properly installed during the build process.

    • Set the build command to "yarn build" to trigger the Vite build process, which generates the optimized static files for deployment.

    • Specify the publish directory as "dist." This is the standard output directory for Vite projects, where the optimized static build will be located.

    • Optionally, you can add environment variables required for your application during the build process.

    • Adjust the node engine if needed, to ensure compatibility with your project's requirements.

  6. Once you've configured the deployment settings, click the "Deploy" button to initiate the deployment process.

Congratulations! You have successfully initiated the deployment of your Vite app on Spheron. Sit back and relax as Spheron automatically builds and deploys your project based on the specified settings. This seamless integration allows you to focus on developing your application without worrying about manual deployment processes.

That's All! After the deployment process is complete, Spheron assigns a unique ".spheron.app" suffixed domain to your newly deployed Vite project. This domain serves as the default access point for your application. However, if you prefer a custom domain for branding or other reasons, Spheron provides a Custom Domain feature that allows you to configure your desired domain easily.

With your Vite project deployed on Spheron, you can take advantage of a wide range of benefits. These include Preview Mode, which enables you to test your application in a development-like environment, and Static Site Rendering (SSR), which enhances performance and improves SEO by generating HTML pages on the server. Additionally, Spheron's continuous deployment feature ensures that any subsequent pushes to your Git repository will trigger automatic builds and deployments, keeping your application up to date effortlessly.

We're thrilled to see what you build with Vite on Spheron! This integration unlocks a world of possibilities, empowering you to deliver performant, scalable, and visually stunning applications. Whether you're developing a small personal project or a large-scale application, the combined power of Vite and Spheron will streamline your deployment process and enable you to focus on what you do best—building exceptional web applications.

So, why wait? Deploy your Vite app on Spheron today and embark on an exciting journey of seamless deployment experiences. Happy coding!

Did you find this article valuable?

Support Mohit Raj Sinha by becoming a sponsor. Any amount is appreciated!