To make the most of this tutorial, sign up for Serverless Framework’s dashboard account for free:
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.
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
To install it, do the following:
serverless-dashboardin the search box and press Enter
Install the package
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:
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
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.
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
Let's see what the deployment looks like:
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
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.
Let's deploy the service by clicking on the 'Deploy Service' button.
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
To invoke a function, click on the dropdown next to the function name. Select 'Invoke', and then hit 'Apply':
Invoking 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
Last but not least, you can remove the service right from the pane:
Removing a service
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.
Rupak Ganguly is an Enterprise Advocate at Serverless, Inc.