daily-demos

Demo projects showcasing usage of daily-js.

Overview of available demo projects

An overview of the available demo projects can be found in the Daily.co documentation.

Running demo projects locally

Each demo project is an independent standalone project. You can choose to run a single project, or the entire demo project site.

Running a single demo project

Using the static-demos project as an example:

# From daily-demos
nvm i
cd static-demos/
npm i

npm run start
# or
npm run dev # automatically restarts server on file changes

Then open your browser and go to localhost:<port>, using the port printed in the terminal after running the above.

Running the entire demo project site

# From daily-demos
nvm i
npm i

npm run start
# or
npm run dev # automatically restarts server on file changes

Then open your browser and go to localhost:3000.

Running the React demo Electron runner

The following runs the React demo app from within a simple Electron shell.

# From react-demo-electron-runner
nvm i
npm i

npm run start # points to demos.daily.co
# or
npm run dev # points to localhost:3000 (prerequisite: "Running the entire demo project site")

Contributing a new demo project

To add a new demo project:

Create a new folder for the demo project directly under the root directory.

# From daily-demos
mkdir my-new-demo

Implement your project as a standalone site. Make sure it runs on a port not used by the other demo projects.

cd my-new-demo
npm init
# Etc, etc. Make a site.

When it's ready, hook your demo project up to the overall demo project site by: a) exposing your demo through the root-level index via proxying, b) making it run as part of the root-level npm scripts (npm run dev, npm run start, npm install, etc.), and c) adding an entry (or multiple entries) to the table of contents in index.html.

index.js:

app.use(
  "/my-new-demo",
  createProxyMiddleware({
    target: "http://localhost:1234", // Your demo's port number
  })
);

package.json:

"scripts": {
    "start": "concurrently npm:index-start npm:other-demo-start npm:my-new-demo-start",
    "dev": "concurrently npm:index-dev npm:other-demo-dev npm:my-new-demo-dev",
    "postinstall": "npm other-demo-install && npm my-new-demo-install",
    "my-new-demo-start": "cd my-new-demo && npm run start",
    "my-new-demo-dev": "cd my-new-demo && npm run dev",
    "my-new-demo-install": "cd my-new-demo && npm i"
  },

index.html:

<li><a href="./my-new-demo/">My New Demo</a></li>