Overview
At Daily we value simplicity and ease of use. In the future, we will go into great detail about how to implement your server-side code, but for now we prefer to give you some simple building blocks to get you up-and-running as quickly as possible. This allows you, the developer, to focus on what matters: your application and your customers.
Why Glitch?
Glitch is a friendly, community-oriented developer tool that allows you to create projects from scratch or "remix" others for inspiration. Every project is backed by a real server, so you have everything you need to get started and to scale your project.
Getting started
When we say simple we mean it. Click the Remix button below.
You should now have an editable copy of the server, which includes public API endpoints that return data via the Daily API. You also have a handy web-based development environment.
Add your key
All you need to do to get going is your API Key, which you can get from the dashboard in the Developers section.
Copy it to your clipboard and open the .env
file in the Glitch editor. Paste it there (replacing Variable Value):
At your service
Now let’s have a look at the server code (in server.js
) and send a sample request.
First, open up the log view (Tools > Logs, located in the bottom left) and you should see:
💗🌴 Your app is listening on port 3000
This means the express
server is running and listening for incoming requests.
Note: I’ve glossed over express and axios. If either of these are unfamiliar, please read their documentation first. At a high level, we’re using express to handle and respond to incoming requests, and we’re using axios to make requests to external (Daily) APIs.
Looking at the code you will see three sections.
In the first section we’re importing dependencies, clearing some useful constants, and setting up an axios
instance to reference the Daily
API.
const express = require("express");
const axios = require("axios");
const app = express();
app.use(express.json());
// MAKE SURE YOU HAVE ADDED YOUR API KEY IN THE .env file
const BASE_URL = "https://api.daily.co/v1/";
const API_AUTH = process.env.DAILY_API_KEY;
// create an axios instance that includes the BASE_URL and your auth token
// this may be useful to put in an external file to it can be referenced
// elsewhere once your application grows
const api = axios.create({
baseURL: BASE_URL,
timeout: 5000,
headers: { Authorization: `Bearer ${API_AUTH}` }
Next up are all the endpoints we’re creating on our server. Each of them is essentially a loose wrapper that calls its equivalent in the Daily
API. Let’s look at the first one, as an example:
app.get("/rooms", async (request, response) => {
try {
const rooms = await apiHelper("get", "/rooms");
response.json(rooms);
} catch (e) {
console.log("error: ", e);
response.status(500).json({ error: e.message });
}
});
Here, we’re saying when a request comes in at /rooms
we want to execute this async
callback that makes a request to the Daily
API using the apiHelper
we defined below. If the request is successful then we send the response back to the requester as json
. If it fails, then we send back an http 500
error with an accompanying error message.
Lastly, let’s look at the apiHelper
function:
const apiHelper = async (method, endpoint, body = {}) => {
try {
const response = await api.request({
url: endpoint,
method: method,
data: body
});
return response.data;
} catch (error) {
console.log("Status: ", error.response.status);
console.log("Text: ", error.response.statusText);
// need to throw again so error is caught
// a possible improvement here is to pass the status code back so it can be returned to the user
throw new Error(error);
}
};
The goal here is to have a reusable way to call the Daily
API. It takes the following parameters:
- method: the http request method
- endpoint: the
Daily
API endpoint - body: the optional request body, required for
POST
,PUT
, etc
We’re using the request
method from the axios
instance we defined above, so we don’t have to worry about specifying the BASE_URL
and Authorization
header with every request. We’ve included some basic error handling here, but feel free to modify this as needed.
Note: we’re using async/await to simplify dealing with promises. If this is unfamiliar, do check out the docs on MDN.
Sample request
You can verify all is working as intended by opening the Glitch preview (Click Show -> Next to The Code). Next click 'Change URL' and add [/rooms](https://docs.daily.co/reference#list-rooms)
. You should see some json
, which is the list of rooms on your account.
Your server should now be publicly accessible at the following url:
https://YOUR-PROJECT-NAME.glitch.me
What next?
You now have a functional server to make calls to the Daily
API which protects your API key. We’ve added a few endpoints as a reference but there are many others you can add as a next step (/recordings
for example).
This server also implicitly ‘trusts’ the client that is making these requests. A great next step would be adding some authentication to your client and checking for that on the server. You don’t want just anyone generating tokens with ‘is_owner’ privileges, for example.
Finally, while this is totally viable as a development server, you may want to consider becoming a Glitch member and “Boosting” this app. This gives you a bunch of benefits, most important being that it will always be awake. You will also be supporting the team at Glitch and all the excellent work they do.