project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4

Blockless-wizard

Automate Blockless CLI tasks like project initialization, deployment, and management seamlessly within VS Code.

Blockless-wizard

Created At

ETHOnline 2024

Winner of

trophy

Best Tooling for the Blockless Network

Project Description

This project is a VS Code extension that automates tasks related to the Blockless Network Command Line Interface (CLI). It aims to streamline and simplify the development and deployment process for developers building on the Blockless Network, a platform for decentralized, serverless applications. By integrating common CLI commands and workflows directly into VS Code, this extension allows users to execute complex tasks with minimal effort and directly from their editor, reducing the need to switch between the terminal and development environment.

Key Capabilities:

1.	Blockless CLI Installation:
•	The extension can install the Blockless CLI, eliminating the need for manual installation commands. It provides built-in options to install using curl or wget on macOS and Linux, and directs users to the appropriate resources for Windows.

2.	Project Initialization:
•	Users can quickly create new projects, such as decentralized functions or static websites, directly from VS Code. This functionality covers initializing Blockless Functions or Blockless Sites with a specific framework (like AssemblyScript, Rust, React, Vite) and the desired starter template (like “Hello World”).

3.	Project Management:
•	After initialization, the extension guides users through setting up and managing their project. It provides commands to change directories, install dependencies, run the development server, and build projects.

4.	Deployment Automation:
•	One of the most powerful features is the ability to deploy Blockless Functions or Static Sites to the Blockless Network directly from VS Code. Users no longer need to switch to the terminal and manually invoke deployment commands. The extension automates the deployment process and even provides feedback on the success or failure of the deployment.

5.	CLI Command Automation:
•	Key Blockless CLI commands such as bls login, bls function init, bls function deploy, bls sites init, and more are accessible within the editor. The extension integrates these commands in an intuitive way, allowing users to:
•	Log in to the Blockless Network by prompting wallet connections.
•	Invoke and test functions before deployment.
•	Deploy applications and view results, including invocation URLs.

6.	Local Preview and Testing:
•	The extension allows users to preview and test their applications locally before deploying them. For example, after building a static site, users can preview the build at a local address (e.g., http://localhost:3000) directly from VS Code.

How it's Made

This project was built as a VS Code extension with the goal of streamlining the development workflow for the Blockless Network. Below are the technical details and steps involved in building it:

•	Command Palette Integration: The extension registers commands in VS Code’s Command Palette (using the commands.registerCommand API). Each of these commands directly corresponds to a Blockless CLI action (e.g., initializing a project, deploying a function). This provides users with quick access to critical tasks without switching to the terminal.

•	Terminal Integration: For commands like bls login, bls function init, or bls sites deploy, the extension programmatically opens a VS Code integrated terminal and runs these commands automatically. This way, users can visually see the commands executing without typing them manually.

•	Automated Task Handling: The extension listens to various user actions (e.g., project folder selection) and automates a series of Blockless CLI tasks in the background. For example, after initializing a project, the extension automatically installs dependencies and prepares the environment for further development.

•	Interactive Prompts: The extension also includes user prompts for selecting project names, frameworks, and templates. This is done using the vscode.window.showQuickPick API, allowing for a smooth and interactive user experience when setting up projects.

•	Blockless CLI: The extension heavily integrates with the Blockless CLI, using it to manage project initialization, deployment, and various network interactions. This required understanding the Blockless CLI’s commands and workflows deeply and then wrapping them in easy-to-use extension commands.

•	Webview API: For certain tasks, such as displaying deployment status, invocation URLs, or logging in via wallet integration, the VS Code Webview API is utilized to create custom, in-editor views.
background image mobile

Join the mailing list

Get the latest news and updates