Skip to main content

Quickstart

In this guide, you'll create a workspace from a serverless app and explore some of the essential features available to you within the workspace. You'll work in the browser version of Visual Studio Code, which is the default editor for Boltic Workspaces.

info

Before you begin, make sure you have a Boltic account. If you don't have one, you can sign up for a free account at boltic.io.

Creating your workspace​

  1. Navigate to boltic.io and open any serverless application that you would like to work on.

  2. Open the Workspaces tab.

    Screenshot of the "Workspaces" tab in the Boltic console.

  3. Click Create Workspace.

  4. Give you workspace a unique name, select the serverless application you want to work on, the size of the workspace, and the inactivity timeout for the workspace. Click on Create once done.

    Screenshot of the "Create Workspace" form. The default configuration is selected, with the "Create Workspace" button highlighted with an orange outline.

  5. Once the workspace is created, click Open in Browser to connect to the workspace. Alternatively, you can click on the name of the workspace to open it directly.

    Screenshot of the workspace details page. The "Open in Browser" button is highlighted with an orange outline.

  6. The workspace will open in a new tab in your browser. You'll see the Visual Studio Code editor, with the Explorer, Source Control, and Activity Bar on the left side.

    Screenshot of the Visual Studio Code editor in the browser. The Explorer, Source Control, and Activity Bar are highlighted with orange outlines.

  7. To know about the available tools in your workspace, open the terminal and a welcome message will be displayed with information about the installed tools, their versions and how to use them

    Terminal Message.

Running the application​

Once your workspace is created, the serverless app repository will be automatically cloned into it. Now you can run the application and play around with it.

  1. When the terminal becomes available, enter the command boltctl serverless test. This example uses a Node.js serverless function, and this command runs a local server for you to test your serverless function.

    info

    All workspaces include the latest version of BoltCTL, the official CLI of Boltic, which you can use to interact with your serverless application and much more. To learn more about the available commands, see the BoltCTL documentation.

    Screenshot of the Terminal in VS Code with the "boltctl serverless test" command entered.

    If you're following along with a different application type, enter the corresponding start command for that project.

  2. When the server starts, you'll see a message in the terminal that the server is running at a specific URL and port. You can use curl to test the serverless function.

    Screenshot of the terminal with the message "Server running at http://localhost:3000".

  3. Edit the handler.js file to personalize the application with your own code. Hit CTRL + C to stop the server, then run the boltctl serverless test command again to see your changes.

    Screenshot of the terminal with the "boltctl serverless test" command entered.

Edit the application and view changes​

  1. Switch back to your workspace and open the handler.json file by clicking it in the Explorer.

  2. Edit the text field of the first haiku to personalize the application with your own haiku.

Committing and pushing your changes​

Now that you've made a few changes, you can use the integrated terminal or the source view to publish your work to a git repository.

  1. In the Activity Bar, click the Source Control view.

    Screenshot of the Activity Bar. The Source Control icon is highlighted with an orange outline.

  2. To stage your changes, click + next to the handler.json file, or next to Changes if you've changed multiple files and you want to stage them all.

    Screenshot of the "Source control" side bar with the staging button (a plus sign), to the right of "Changes," highlighted with a dark orange outline.

  3. To commit your staged changes, type a commit message describing the change you've made, then click Commit.

    Screenshot of the "Source control" side bar. A commit message, with "Change haiku text and styles" entered, and the "Commit" button are highlighted with an orange outline.

  4. Click Sync Changes.

    Screenshot of the "Source control" side bar showing the "Sync Changes" button.

  5. In the dialog that appears, click Ok.

    Screenshot of the "Ok" dialog. The "Ok" button is highlighted with an orange outline.

  6. Once pushed, a new build will be triggered automatically which can be verified in the Builds section.

    Screenshot of the "Builds" section in the Boltic console.

Personalizing with an extension​

When you connect to a workspace using the browser, or the Visual Studio Code desktop application, you can access the Visual Studio Code Marketplace directly from the editor. For this example, you'll install a VS Code extension that alters the theme, but you can install any extension that's useful for your workflow.

  1. In the Activity Bar, click the Extensions icon.

    Screenshot of the Activity Bar. The Extensions icon is highlighted with an orange outline.

  2. In the search bar, type fairyfloss and click Install.

    Screenshot of the "Extensions: Marketplace" side bar. "fairyfloss" is entered into the search box and, below it, the "fairyfloss" extension is displayed, with an "Install" button.

  3. Select the fairyfloss theme by selecting it from the list.

    Screenshot of the "Select Color Theme" dropdown, with the "fairyfloss" theme selected.

What's next?​