Glitch

By Alastair Beeson

What is Glitch?

  • Incredibly easy hosting service like Heroku

  • Was able to get an app up and running in 5 minutes

  • You can make React applications, Node Applications, Websites and more

  • Not limit to how many applications/websites you can host

  • Pretty fair data allowance

  • Can name your projects but comes with included Glitch.com domain

Tutorial

  1. First go to https://glitch.com/

  2. Register for an Account

  3. Once registered, navigate to New Projects

  4. Select your project type, in this case we recommend "glitch-hello-website" as this works best for A-Frame apps and makes things super simple

  5. The project will come with stencil HTML and CSS pages

  6. Make sure to delete any code in those pages

  7. Paste the code below, sourced from A-Frame, into you empty index.html file:


<html>

<head>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

</head>

<body>

<a-scene>

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>

<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>

<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

<a-sky color="#ECECEC"></a-sky>

</a-scene>

</body>

</html>


Now if you use the preview window or your hosted app URL. If you see the scene below, congrats you have completed the Hello World of WebXR and A-Frame. This is an example that sets up a simple A-Scene with an A-Plane, A-Sky and several primitive shapes like A-Box, A-Sphere and A-Cylinder.

Lots of A-Frame components will come with example demos can you can easily upload and experiment with on websites like Glitch.