Jamstack Conferencing built on GatsbyJS, NetlifyCMS, and Firebase

GitHub npm codeql Netlify Status

View the demo at conference.jamfire.io

This is a GatsbyJS theme to try and test the limits of online conferencing using JAMStack technologies. A version of it has been tested in production with 500 conference participants and worked well. The application itself is built with GatsbyJS, content managed via NetlifyCMS, and user auth/interaction is built on Firebase.

This theme features a lobby, the ability to livestream, go to breakout Jitsi-based groups, chat while on the site, as well as a few other odds and ends useful for anyone hosting an online conference. You will need a github account, firebase account, and static file hosting. I recommend Netlify.com for hosting, but any server that can serve static files will do.

Getting Started

The easiest way to get started is by deploying our starter to Netlify or Gatsby Cloud. Be sure to setup the correct environment variables to deploy a successful build.

Deploy to Netlify Deploy to Gatsby Cloud

Environment Configuration

Setup the following enviornment variables either in a .env.development file on your local dev box or through your hosting provider.

# site vars
GATSBY_SITE_NAME=Jamfire
GATSBY_SHORT_NAME=Jamfire

# netlify cms
GATSBY_NETLIFY_SITE_URL=https://localhost:8000
GATSBY_NETLIFY_DISPLAY_URL=https://localhost:8000
GATSBY_NETLIFY_BACKEND_NAME=github
GATSBY_NETLIFY_BACKEND_REPO=username/repo
GATSBY_NETLIFY_BACKEND_BRANCH=master

# firebase
GATSBY_FIREBASE_API_KEY=
GATSBY_FIREBASE_AUTH_DOMAIN=
GATSBY_FIREBASE_DATABASE_URL=
GATSBY_FIREBASE_PROJECT_ID=
GATSBY_FIREBASE_STORAGE_BUCKET=
GATSBY_FIREBASE_MESSAGING_SENDER_ID=
GATSBY_FIREBASE_APP_ID=
GATSBY_FIREBASE_MEASUREMENT_ID=

# optional analytics
GATSBY_GOOGLE_ANALYTICS_TRACKING_ID=
GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID=
GATSBY_FACEBOOK_PIXEL_ID=

Firebase Configuration

This theme needs some basic Firebase setup in order to work correctly. You will need to create a Google Firebase account and then enable authentication choices of your liking. You will also need to create an index on the messages table in your Firestore Database.

Messages index to create:

event_id Ascending created_at Ascending

You need to implement the following security rules on your Firestore Database. This allows users to read chat messages and, if they are logged in, post chat messages.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /messages/{message} {
      allow read: if true;
    	allow write: if request.auth != null;
    }
  }
}

Theme Configuration

Add the package to your Gatsby site:

yarn add gatsby-theme-jamfire-conference

Simply add gatsby-theme-jamfire-conference to your plugins under gastby-config.js. Your content will live under the ./content directory in your main repository. When new features get implemented in the the theme, they will automatically be fetched when you upgrade packages or during the build process.

plugins: [
  {
    resolve: `gatsby-theme-jamfire-conference`,
  }
],

Theme Shadowing

GatsbyJS supports Theme Shadowing, allowing you to customize any part of another theme. View the shadowing docs to see how to do this. For example, you might want add information to the footer area of this theme. Copy the Footer component to ./src/gatsby-theme-jamfire-conference/components/Site/footer.tsx and customize to your liking.

Changelog

See CHANGELOG.md

Contributing

See CONTRIBUTING.md

Credits