This virtual event starter kit was used to run Next.js Conf 2020, which had almost 40,000 live attendees. It includes the following features:
This platform is built upon three principles:
The virtual events starter kit now has added support for organising truly LIVE virtual events. You can quickly setup a live stage and invite speakers to interact with viewers. Live audio-video opens up a ton of possibilities with respect to what you can do with this template. You can use it for:
Click the button below to clone and deploy this template on Vercel.
You’ll be asked to install the 100ms with DatoCMS integration. It lets you sign up or log in to 100ms and DatoCMS, and connects your DatoCMS and 100ms account to vercel. In a single integration, you will be able to deploy a fully working template that contains all the elements of the virtual events starter kit.
NOTE: Before this setup make sure to deploy the project using 100ms + DatoCMS integration to speed up the setup process.
After the project is deployed on Vercel, you can find
NEXT_PUBLIC_HMS_TOKEN_ENDPOINT already setup in the environment-variables section in project settings. The integration also sets up the rooms, templates & roles associated with it.
First, to set local environment variables you can either use Vercel CLI vercel env pull or just manually copy paste them.
cp .env.local.example .env.local
Then install the package and run the development server:
yarn install yarn dev
Open http://localhost:3000 to see the landing page.
There are four different stages included in the seed data. Feel free to add or remove these based on your schedule. Each stage can be easily configured to be a Live Video/Audio experience or an embedded YouTube stream. (You can do all of these configurations via DatoCMS console)
/stage/a after entering your email you should see a "Enter your name" input form.
NOTE: by default, you will join as a Viewer
Click on Join and you should see "No Speakers Present". This is because only you have joined the Stage aka the "Room" as a viewer. A viewer does not have the permission to publish their audio and video. You can read more about roles in the sections below.
For this we pass a query param in url for eg:
So if you visit
/stage/a?role=stage now you should see a Preview screen opening up. After joining you should be able to see yourselves. Open a new tab or invite others to host your next meetup, community calls, etc.
To learn more on how to customise the live video aspect of this template, refer to this document.
Environment variables determine which CMS to use. See lib/cms-api.ts for details and
.env.local.example for all environment variables. The demo (demo.vercel.events) uses DatoCMS, but we also have support for:
lib/constants.ts contains a list of variables you should customize.
Note - In case you're looking to add live audio-video to the events template, we'd recommend you to move ahead with DatoCMS for a seamless integration experience. We've created a dato + 100ms integration that will help you to integrate both 100ms and DatoCMS to your vercel account in a few clicks.
Some features won’t work until you set up authentication and database. The demo (demo.vercel.events) uses GitHub OAuth for authentication and Redis for database. You can use different providers as you see fit.
You need to have GitHub OAuth set up to be able to customize the ticket after signing up on the registration form.
First, create a GitHub OAuth application to use for authentication.
NEXT_PUBLIC_GITHUB_OAUTH_CLIENT_IDas the Client ID of the OAuth app.
GITHUB_OAUTH_CLIENT_SECRETas the Client secret of the OAuth app.
NEXT_PUBLIC_SITE_ORIGINenvironment variable is set as
http://localhost:3000. This is required to get the OAuth popup to work locally.
yarn dev) after editing
Once it’s set up, sign up using the registration form on the home page (not on a stage page) and then click "Generate with GitHub".
<your deployment’s URL>/api/github-oauthon GitHub.
GITHUB_OAUTH_CLIENT_SECRETon Vercel Project Environment Variables Settings for the production environment.
lib/constants.tsto match your deployment’s URL (no trailing slash).
You need a database to save user data and enable the following features:
Environment variables determine which database to use. See lib/db-api.ts for details and
.env.local.example for all environment variables. There's support for: