Demo projects showcasing usage of daily-js.

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

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

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.

# 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.

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")

To add a new demo project:

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

# From daily-demos
mkdir my-new-demo

2. 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.

3. 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>