Giter VIP home page Giter VIP logo

aframe-boilerplate's Introduction

A-Frame Boilerplate

Boilerplate for creating WebVR scenes using A-Frame.

Getting Started

There are two easy options for obtaining this A-Frame scene. It's then up to you to make it your own!

Option 1: Download the ZIP kit ๐Ÿ“ฆ

After you have downloaded and extracted this .zip file containing the contents of this repo, open the resulting directory, and you'll be have your scene ready in these few steps:

npm install && npm start
open http://localhost:3000/

Option 2: Fork this Git repo ๐Ÿด๐Ÿ™

Alternatively, you can fork this repo to get started, if you'd like to maintain a Git workflow.

After you have forked this repo, clone a copy of your fork locally and you'll be have your scene ready in these few steps:

git clone https://github.com/aframevr/aframe-boilerplate.git
cd aframe-boilerplate && rm -rf .git && npm install && npm start
open http://localhost:3000/

๐Ÿ“ฑ 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 for local development and testing. Browsersync is also worth a gander.)


Option 3: Fork this CodePen example ๐Ÿด๐Ÿ’พโœ’๏ธ

Or, you can simply fork this CodePen example to dive right in. Enjoy!

Publishing your scene

If you don't already know, GitHub offers free and awesome publishing of static sites through [https://pages.github.com/](GitHub Pages).

To publish your scene to your personal GitHub Pages:

npm run deploy

And, it'll now be live at http://your_username.github.io/ :)


To know which GitHub repo to deploy to, the deploy script first looks at the optional repository key in the package.json file (see npm docs 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 for more information).


Still need Help?

Installation

First make sure you have Node installed.

On Mac OS X, it's recommended to use Homebrew to install Node + npm:

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/

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.

aframe-boilerplate's People

Contributors

cvan avatar dmarcos avatar ngokevin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.