Setup (Recommended steps using Netlify)
- Create an account on Daily.co and pick a subdomain name.
- Deploy the app (recommended: use the Netlify button above, and create an account there.)
- Create rooms in the Daily.co Dashboard, each beginning with the prefix
meet-. For example, if you want to make rooms for Avidan, Chrissy, Kane, and Lee, you would create rooms called
meet-lee. Make sure the rooms are public.
- Go to your Netlify Dashboard > Settings > Build & Deploy > Environment Variables and add
You must create rooms manually in the Daily.co Dashboard before going to the above URL. All room names must begin with
meet- such as
meet-lee. This room would be accessible at
https://[YOUR_NETLIFY_APP_NAME].netlify.com/lee. You can share this URL with anyone.
Each of your meeting rooms are located at their own path name (minus the
meet- at the beginning):
meet- prefix functions as a namespace in case you want to use your new Daily.co account for other purposes.
Deployment requires a Netlify account.
Deploy with Netlify Button
From Command Line
Our app deploys with continuous deployment hooks, which you can configure for your app here: (https://docs.netlify.com/site-deploys/create-deploys/#drag-and-drop).
You can configure the following environment variables in the Netlify UI under Settings > Build & Deploy > Environment Variables.
REACT_APP_DAILY_SUBDOMAIN = Subdomain on daily.co for your account. (e.g.
REACT_APP_ASSET_PATH = Path to your custom assets. For our own implementation, we use S3 and put the URL to the bucket here.
REACT_APP_COMPANY_NAME = Name of your company, which will appear in the title, alt tags for your logos, and various other places.
REACT_APP_COMPANY_URL = URL for your company, which is the target of the anchor tag around your logo.
Room-Specific Environment Variables
To change the appearance of a room called "wine":
REACT_APP_ROOM_WINE_TITLE = text to display in the upper left corner of the screen
REACT_APP_ROOM_WINE_BACKGROUND = a filename for a custom loading spinner background that shows before the iframe loads
REACT_APP_ROOM_WINE_HEADER = a filename for a custom header image in the S3 bucket
Learn about environment variables on Netlify: https://docs.netlify.com/configure-builds/environment-variables/#declare-variables
Command Line Scripts
In the project directory, you can run:
To install dependencies.
Meet uses scarf-js to collect anonymized installation analytics. These analytics help support the maintainers of this package. However, if you'd like to opt out, you can do so by setting
scarfSettings.enabled = false in your project's package.json, or by setting the environment variable
SCARF_ANALYTICS=false before you install. See the scarf-js readme for more information.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
src/brand.css to add your custom color scheme.
Default brand marks are located below:
To use your own brand marks, you can replace these files in your own fork or clone. Or you can change
REACT_APP_ASSET_PATH to a URL for a directory (e.g. AWS S3, or your own asset server) that contains each of these files by name. See the files for recommended dimensions.
This app was created with create-react-app. You can learn more in the Create React App documentation. (It has not been ejected. If you don't know what that means, either read the docs or don't worry about it.)
To learn React, check out the React documentation.