Serverless Components


Deploy a Full-Stack Realtime App in seconds using Serverless Components. Just provide your frontend code (powered by the website component), and your backend code (powered by the socket component).

Great use-cases for this project are: Chat Apps, Bots, Notification Systems, Charting Dashboards, Stock Tickers & more. As always, consider a serverless stack like this if you are looking to deliver software or features with extremely low overhead.


  1. Install
  2. Create
  3. Configure
  4. Deploy


1. Install

$ npm install -g @serverless/components

2. Create

$ mkdir my-realtime-app && cd my-realtime-app

the directory should look something like this:

|- backend
  |- socket.js
|- frontend
  |- index.html
|- serverless.yml

the socket.js file should minimally look something like this:

on('default', async (data, socket) => {

For more info on working with the socket.js file, check out the socket component docs.

To see a full example of an application built with this, check out this Chat Application.

3. Configure

# serverless.yml

name: my-realtime-app
stage: dev

  component: "@serverless/realtime-app"
    name: my-realtime-app
    description: My Realtime App
    region: us-east-1

    # backend config to be passed to the socket component
      # path to the backend code that contains the socket.js file
      code: ./backend

      memory: 512
      timeout: 10
        TABLE_NAME: users

    # frontend config to be passed to the website component
        # path to the directory that contains your frontend code
        # if you're using a framework like React, that would be the root of your frontend project, otherwise it'd be where index.html lives.
        # default is './frontend'
        code: ./static
        # if your website needs to be built (e.g. using React)...
        # default is "undefined"
          # the path to the build directory. default is ./build
          dir: ./dist
          # the build command
          command: npm run build # this is the default anyway!
          # you can provide an env file path (relative to the code path above) to be generated for use by your frontend code. By default it's './src/env.js'
          envFile: ./frontend/src/env.js
          # the contents of this env file
          # the backend api url will be injected by default
          # under the "urlWebsocketApi" key

4. Deploy

RealtimeApp (master)$ ️components

  RealtimeApp › outputs:
    url:  ''
    env:  undefined
    url:  'wss://'
    env:  []

  14s › dev › RealtimeApp › done

RealtimeApp (master)$


New to Components?

Checkout the Serverless Components repo for more information.

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

Does Google meet its users’ expectations around consumer privacy? This news industry research says no

Mon Apr 8 , 2019