RealtimeApp – Deploy a realtime app using 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 ).

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

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) => {
  socket.send(data)
})

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

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

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

      memory: 512
      timeout: 10
      env:
        TABLE_NAME: users

    # frontend config to be passed to the website component
    frontend:
        # 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"
        build:
        
          # 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
          env:
            SOME_API_URL: https://api.com

4. Deploy

RealtimeApp (master)$ ️components

  RealtimeApp › outputs:
  frontend: 
    url:  'http://realtimeapp-lwmb8jd.s3-website-us-east-1.amazonaws.com'
    env:  undefined
  backend: 
    url:  'wss://rzrqzb6z4h.execute-api.us-east-1.amazonaws.com/dev/'
    env:  []


  14s › dev › RealtimeApp › done

RealtimeApp (master)$

New to Components?

Checkout the Serverless Components repo for more information.