|
|
|
|
|
# A-Frame Boilerplate
|
|
|
|
|
|
|
|
|
|
|
|
Boilerplate for creating WebVR scenes with [A-Frame](https://aframe.io).
|
|
|
|
|
|
This is forked from [this project](https://github.com/aframevr/aframe-boilerplate/) on github.
|
|
|
|
|
|
|
|
|
|
|
|
Alternatively, check out the [A-Frame Starter on
|
|
|
|
|
|
glitch.com](https://glitch.com/~aframe) for a more interactive way on getting
|
|
|
|
|
|
started.
|
|
|
|
|
|
|
|
|
|
|
|
## Getting Started
|
|
|
|
|
|
|
|
|
|
|
|
After downloading the repo, run:
|
|
|
|
|
|
|
|
|
|
|
|
npm install && npm start
|
|
|
|
|
|
open http://localhost:3000/
|
|
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
|
|
> :iphone: **Mobile pro tip:** Upon starting the development server, the URL will be logged to the console. Load that URL from a browser on your mobile device. (If your mobile phone and computer are not on the same LAN, consider using [ngrok](https://ngrok.com/) for local development and testing. [Browsersync](https://www.browsersync.io/) is also worth a gander.)
|
|
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
|
|
### <small><sup>Option 3:</sup> Fork this CodePen example 🍴💾✒️
|
|
|
|
|
|
|
|
|
|
|
|
Or, you can simply __[fork this CodePen example](http://codepen.io/team/mozvr/pen/BjygdO?editors=100)__ to dive right in. Enjoy!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Publishing your scene
|
|
|
|
|
|
|
|
|
|
|
|
If you don't already know, GitHub offers free and awesome publishing of static sites through __[GitHub Pages](https://pages.github.com/)__.
|
|
|
|
|
|
|
|
|
|
|
|
To publish your scene to your personal GitHub Pages:
|
|
|
|
|
|
|
|
|
|
|
|
npm run deploy
|
|
|
|
|
|
|
|
|
|
|
|
And, it'll now be live at __http://`your_username`.github.io/__ :)
|
|
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
|
|
To know which GitHub repo to deploy to, the `deploy` script first looks at the optional [`repository` key](https://docs.npmjs.com/files/package.json#repository) in the [`package.json` file](package.json) (see [npm docs](https://docs.npmjs.com/files/package.json#repository) for sample usage). If the `repository` key is missing, the script falls back to using the local git repo's remote origin URL (you can run the local command `git remote -v` to see all your remotes; also, you may refer to the [GitHub docs](https://help.github.com/articles/about-remote-repositories/) for more information).
|
|
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
|
|
## Still need Help?
|
|
|
|
|
|
|
|
|
|
|
|
### Installation
|
|
|
|
|
|
|
|
|
|
|
|
First make sure you have Node installed.
|
|
|
|
|
|
|
|
|
|
|
|
On Mac OS X, it's recommended to use [Homebrew](http://brew.sh/) to install Node + [npm](https://www.npmjs.com):
|
|
|
|
|
|
|
|
|
|
|
|
brew install node
|
|
|
|
|
|
|
|
|
|
|
|
To install the Node dependencies:
|
|
|
|
|
|
|
|
|
|
|
|
npm install
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Local Development
|
|
|
|
|
|
|
|
|
|
|
|
To serve the site from a simple Node development server:
|
|
|
|
|
|
|
|
|
|
|
|
npm start
|
|
|
|
|
|
|
|
|
|
|
|
Then launch the site from your favourite browser:
|
|
|
|
|
|
|
|
|
|
|
|
[__http://localhost:3000/__](http://localhost:3000/)
|
|
|
|
|
|
|
|
|
|
|
|
If you wish to serve the site from a different port:
|
|
|
|
|
|
|
|
|
|
|
|
PORT=8000 npm start
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
|
|
|
|
This program is free software and is distributed under an [MIT License](LICENSE).
|
