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.
$ npm install -g @serverless/components$ mkdir my-realtime-app && cd my-realtime-appthe 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.
# 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.comRealtimeApp (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)$
Checkout the Serverless Components repo for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent