Using the Serverless Dashboard plugin for Atom

Written by Rupak GangulyEdit this post

Many developers love and use the Serverless Framework for writing their serverless applications. In the spirit of making it even easier to manage the serverless applications using the Serverless Framework, Takahiro Horike, created the Serverless Dashboard package for the Atom editor.

In this post, I will give you an overview of the Serverless Dashboard package.

We'll cover:

  • Installing the plugin in Atom
  • Visualizing the serverless.yml file
  • Using the Atom plugin to manage a serverless app

#Installation

Let's start by installing the Atom package or plugin. If you don't have Atom, you'll need that first! If you don't have the Serverless Framework installed, you'll need that too.

Installing the Serverless Framework is a breeze:

npm install -g serverless 

You can search for the Serverless Dashboard package on the Atom site:

Search for the package Search for the package

To install it, do the following:

  1. Launch Atom
  2. Open 'Settings View' using Cmd+, on macOS or Ctrl+, on other platforms
  3. Click the 'Install' tab on the left side
  4. Enter serverless-dashboard in the search box and press Enter
  5. Click the 'Install' button that appears

Install the package Install the package

#Visualizing the serverless.yml file

Let's create a simple app named helloatom using the boilerplate template provided by the Serverless Framework.

sls create -t hello-world -n helloatom -p helloatom

Open the app files in atom.

To use the Serverless Dashboard plugin, locate the 'Serverless Dashboard' item on the 'Packages' menu list as shown below:

Post install Post installation

Click on the 'Open your serverless.yml' and choose the serverless.yml for the project.

A new pane will open with the Serverless Dashboard showing a visual representation of the serverless.yml file.

Serverless Dashboard Serverless Dashboard

#Managing a serverless app

The Serverless Dashboard plugin not only lets you visualize the serverless.yml file, but also helps you easily manage a few things inside the Atom editor pane.

#Deploy a service

You can easily deploy the service by clicking on the 'Deploy Service' button. The service will be deployed to the stage and the region as specified. Note that you can change those settings directly from the pane.

Update deploy settings Update deploy settings

Let's see what the deployment looks like:

Deployment Deployment

Nothing new here if you're already familiar with Serverless Framework. The output of the deployment is exactly what you would see in the terminal if you'd deployed using sls deploy.

#Updating the serverless.yml file

Let's add a new function, byeWorld, to the serverless.yml file, like so:

  byeWorld:
    handler: handler.byeWorld
    # The `events` block defines how to trigger the handler.byeWorld code
    events:
      - http:
          path: bye-world
          method: get
          cors: true

Switch over to the Serverless Dashboard pane, and click on the 'Reload serverless.yml' button.

Reload serverless.yml Reload serverless.yml

Let's deploy the service by clicking on the 'Deploy Service' button.

#Deploying a function

Let's update some code in our functions. We will just add a simple line to log the event object that we receive.

console.log(`***** From helloWorld: *****\n Event: JSON.stringify(event) \n******\n`);

Since we just updated our function code, let's just deploy the helloWorld function alone. Select the 'Deploy Function' and click on the 'Apply' button as shown below:

Deploying a function Deploying a function

#Invoking a function

To invoke a function, click on the dropdown next to the function name. Select 'Invoke', and then hit 'Apply':

Invoking a function Invoking a function

#Logs for a function

To view the logs for a function, click on the dropdown next to the function name and select 'Logs', and then hit 'Apply' as shown below:

Logs for a function Logs for a function

#Removing a service

Last but not least, you can remove the service right from the pane:

Removing a service Removing a service

#Summary

The Serverless Dashboard is a convenient package that you can install in Atom to easily access various commands for the Serverless Framework within the Atom editor. It does not support all the commands that are available via the CLI, but it covers the most commonly used commands for managing a service.

Kudos to the Serverless Champion, Takahiro Horike, for writing this package and helping the community.

About Rupak Ganguly

Rupak Ganguly is an Enterprise Advocate at Serverless, Inc., striving to take the excitement around serverless into the enterprises. I tend to achieve that by working with the community, the enterprise developers & thought leaders. It is my belief that we can drive innovation, cultivate a faster go-to-market strategy with low TCO by investing in the serverless movement.

Serverless Blog

The blog on serverless & event-driven compute

New to serverless?

To get started, pop open your terminal & run

npm install serverless -g

how? learn more

Subscribe

Join 12,000+ other serverless devs & keep up to speed on the latest serverless trends

Comments