Skip to content

Minimal boilerplate and configuration for the development of static VR sites using aframe, react & es6

License

Notifications You must be signed in to change notification settings

Jon-Biz/simple-static-react-aframe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple Static React-Aframe

This repo is minimal boilerplate for VR sites written in React and Aframe.

2/14/22 - It's also out of date, and appears not to be working in modern browsers. Pull requests welcome.

It is intended for to get you up and developing with a minimum of fuss and configuration for a static, single page React & Aframe site. This repo gives you:

  • ES6/React (with sourcemaps)
  • Aframe & React-Aframe
  • CSS modules
  • watchfile'd development builds

And that's it.

You can see the initial output here:

http://elbizri.com/carpet/

The carpet and cube are created by the root component, so you can get quickly remove them. Sky, Earth, Camera and Cursor are all their own external components.

About React-Aframe:

Kevin Ngo's straight-forward wrapper React-Aframe ( https://github.com/ngokevin/aframe-react ) provides a React Components for Aframe's <a-scene>, <a-entity> and <a-animation> components. It should be pretty obvious from the code here how React Component props map to Aframe components.

(You can still call the aframe's components directly if you want, but you'll need to stringify de-stringify the component arguments yourself - obviously this is not a bother for any static components.)

##Set up

Clone the repo and install the node dependencies.

git clone https://github.com/Jon-Biz/simple-static-react-aframe
cd simple-static-react-aframe
npm i

##Usage

###Development

Run the npm script dev to develop.

npm run dev

A webpack server will now be running on 4000, serving the contents of the public directory. The entry files are in src - index.js and style.css.

NOTE: this is using webpack-dev-server, not actually overwriting the files in public. For that, you will need to run the build script.

###Production

Run the npm script 'build' to update style.css and index.js in the public directory. Upload this directory to your web server.

npm run build

About

Minimal boilerplate and configuration for the development of static VR sites using aframe, react & es6

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published