GitBucket
Newer
--- title: "Hosting & Publishing" type: introduction layout: docs parent_section: introduction order: 12 --- This section will show several ways to deploy, host, and publish an A-Frame site and its assets onto the Web for the world to see. <!--toc--> ## Publishing a Site There are many free services to deploy and host a site. We'll go over some of the more easy or popular options, but there are certainly other options such as AWS, Heroku, or self-hosting. An important note is that these sites should be served with SSL/HTTPS due to a common security restriction of the browser's WebVR API. All the options below serve with SSL/HTTPS. ### Glitch  *"Glitch is the friendly community where you'll build the app of your dreams With working example apps to remix, a code editor to modify them, instant hosting and deployment - anybody can build a web app on Glitch, for free."* [Glitch](https://glitch.com) is the easiest and fastest way to create and publish a site from within the browser. Glitch lets us add code and files, upload assets, edit with other people, define our own URL name, and instantly deploy changes on every change. We don't even need to make an account nor login: 1. Try going to the [A-Frame Starter Glitch](https://glitch.com/~aframe/). 2. Hit **Remix your own** to copy the project. 3. Click the *Project info and options* icon on the top-left to rename our application (e.g., `https://yoursitename.glitch.me`). 4. Edit the HTML, add files, modify the project. 5. Click **Show** to view the application (e.g., the starter glitch is hosted at `https://aframe.glitch.me`). 6. Every change to the project will update the application instantly. This can be toggled off by signing in, clicking your user avatar, and toggling **Refresh App on Changes**. ### Neocities  *"Create your own free website. Unlimited creativity, zero ads. Neocities is a social network of 129,100 web sites that are bringing back the lost individual creativity of the web. We offer free web hosting and tools that allow you to create your own web site. Join us!"* [Neocities](https://neocities.org) is also another free and easy way to create and publish a site from within the browser. While it doesn't have some of the features of Glitch, Neocities is friendly and lets us upload assets into the project directory versus a CDN. This makes Neocities at least better at hosting models. With Neocities, we can create and edit files. They'll then be hosted and published for us (e.g., `ngokevin.neocities.org`):  ## Hosting Assets We'll also go over hosting assets such as audio, textures, models, and video. If the A-Frame site is being published alongside its assets in the same directory (i.e., the same domain), then we don't need to worry much about hosting assets. The A-Frame site can use relative URLs to reference the asset, and since they're on the same domain, there is no issue with fetching that asset. For example, if we have all your resources in the same root directory and we publish everything via Neocities, GitHub Pages, or Surge, there will be no issues. ## Content Delivery Network (CDN) If we're hosting assets externally, like on a CDN, then we need to take in considerations .The primary requirement for assets is that they be served with [cross-origin resource sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS) enabled. This allows the A-Frame site to fetch the asset to display in the scene. Plus, if we're using `<a-assets>`, we should usually set `crossorigin="anonymous"` on assets such as `<img>`, `<audio>`, and `<video>`. There are several simple options to host assets via a CDN: - [Glitch Asset Uploader](https://glitch.com/) - The Glitch code editor has a panel to upload assets and get CDN URLs in return. - [imgur](https://imgur.com/) - For images, we could use imgur, a popular image hosting service. ### Hosting Models Hosting models is not as simple. Models usually come as groups of files in a folder, where the model file relatively references other files such as images. Thus, models have to be uploaded as a single folder in the same directory. Many of the free asset hosting services support only uploading one file a time. One solution would be to rename all of the image paths to the CDN paths after the images are individually uploaded, but that is tedious. There are a couple known solutions for easily hosting models via CDN: If publishing a site via Neocities, we can upload any number of files and directories into the site directory:  *Neocities Asset Uploader* [jsdelivr]: https://www.jsdelivr.com/?docs=gh Or we can upload assets to a GitHub repository, and use GitHub to serve the model files. 1. Go to one of our GitHub repositories. 2. Click **Upload files**. 3. Upload our assets and wait for the upload to finish. 4. Type a quick message at the bottom and hit **Commit changes**. 5. Wait for processing. 6. Once finished, click on the primary asset file. 7. Click on **Raw**. 8. Then we have our asset URL hosted on GitHub. Then the asset can be hosted and referenced via [JSDelivr CDN][jsdelivr]. Below is a video of the workflow: <div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/_D_C_oSKp9Y?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div> Though ee can also host the model the same as we serve all of our other assets, and let the server and CDN handle it. If we want a special place to host them, S3 is another option. ## Sharing Our Project Once we've published our awesome project, we'll want to share it so other people dive inside! ### Creating Media [gifpardy]: https://github.com/ngokevin/gifpardy [obs]: https://obsproject.com/ A-Frame and VR are very visual; we'll want to create videos and GIFs of our project. First, we want to record the screen. On OS X, record the screen using built-in QuickTime Player's Screen Recording or [OBS Studio][obs]. On Windows, we can use [OBS Studio][obs]. OBS Studio also supports streaming and compositing a webcam image on top of the screen, which is useful to show the person using the headset in reality (even with mixed reality). Then, we can possibly want to trim the video. On OS X, we can use QuickTime Player's trim tool (`<cmd> + t`). To convert to a GIF with one command, use [gifpardy][gifpardy]. `gifpardy` uses ffmpeg and gifsicle under the hood: ``` gifpardy in.mp4 gifpardy in.mp4 out.gif gifpardy -r 320x240 --delay 8 in.mp4 ``` [brewery]: https://itunes.apple.com/us/app/gif-brewery-by-gfycat-capture-make-video-gifs/id1081413713?mt=12 Alternatively, we can use [GIF Brewery][brewery] which has UI to trim, resize, crop, and preview a GIF before exporting. Or capture straight to GIF using [LICECap](https://licecap.en.softonic.com/). ### Sharing Media [blog]: https://aframe.io/blog/ [reddit-webvr]: https://www.reddit.com/r/webvr [slack-webvr]: https://webvr-slack.herokuapp.com/ If you create something with A-Frame, please share it with us! If you share your project, we'll feature it on [*A Week of A-Frame*](https://aframe.io/blog/) for the community to see. Great channels include: - [Twitter](https://twitter.com) - Mention `@aframevr` or include the `#webvr` hashtag. - [`#projects` channel on Slack](http://aframevr.slackarchive.io/projects/) - [WebVR Slack channel][slack-webvr]. - [/r/WebVR subreddit][reddit-webvr]. - Write a case study and tell us to feature on the [A-Frame Blog][blog]. ## Embedding If we want to embed an A-Frame scene into the layout of 2D web page, we can use the [embedded component](../components/embedded.md) to remove fullscreen styles and allow us to style the canvas with CSS. Note we can only embed one scene at a time into a page. If we need multiple scenes, we can use [`<iframe>`s](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).