This is a simple repository containing some files to give a live AFrame presentation, using Firebase as your backend service framework. You will be able to code live on your computer, and your audience will see the results live on their own devices.
In the configuration directory, copy the contents of editor-conf.dist.js
to editor-conf.js
and firebase-conf.dist.js
to firebase-conf.js
.
- Create a new instance at Firebase
- Click
Add Firebase to your web app
. Copy the contents of theconfig
variable in thefirebase-conf.js
file at the indicated spot. - Go to
Database
->Rules
and change the rules to...
{
"rules": {
".read": "true",
".write": "true"
}
}
PLEASE NOTE: These rules will give anyone read and write access to all data in your Firebase database. For now, we're assuming that your audience will play nice and won't muck with anything, but I will be adding some additional instructions on how to properly secure your database in the future.
In the editor.conf.js
file, you can add templates that will be added as buttons to the editor page to quickly copy/paste code into the editor.
The editor itself makes use of Ace for an easy-to-use code editor.
- Host these files online, possibly remove the
editor.html
page online to avoid any tampering, and send your audience to theindex.html
page. - You can use the code editor on the
editor.html
page online or on your local computer to change the scene online. - Wow and inspire your audience with how easy it is to build WebVR using AFrame.
- Instructions on how to secure Firebase from any editing.
Thanks Ruben for inspiring me with the Idea behind this project.